Welcome Banner

The welcome banner, is a useful widget that can be creatively used on the main dashboard to welcome a user to your app and display some useful information to get them started or to show any other info you wish.

Structure

welcomeBanner($title,$body,$link='#',$link_text='View Details',$link_target='_blank')

Parameters

The welcome banner has 5 parameters that we will explore below

  • Title- The title of the welcome banner

  • Body- The body content of the welcome banner

  • Link- The URL of the button on the welcome banner

  • Link Text- The text to be displayed on the welcome banner button

  • Link Target- How you wish the link to be opened, either on same page or a blank new tab possible values: _self, _blank

Example Usage

The welcome banner is capped at 4 cols in the bootstrap grid therefore you need to wrap it within a row and use the remaining 8 cols to display other things. We will se example below:

<div class="row">
    <?php echo welcomeBanner("Welcome to NorthWind $username", 'This is an amazing app for your sales and inventory management','https://google.com?q=appgini'); ?>
    <div class="col-md-8">
        <div class="row">
             <?php
        echo statCounter('Total Sales', '3,000', 'Profit', '1200', 'Loss', '1000', 'success', '30', 'col-md-6 col-sm-6 col-12', '#');
         echo statCounter('Total Sales', '3,000', 'Profit', '1200', 'Loss', '1000', 'danger', '20', 'col-md-6 col-sm-6 col-12', '#');
          echo statCounter('Total Sales', '3,000', 'Profit', '1200', 'Loss', '1000', 'warning', '70', 'col-md-6 col-sm-6 col-12', '#');
           echo statCounter('Total Sales', '3,000', 'Profit', '1200', 'Loss', '1000', 'primary', '50', 'col-md-6 col-sm-6 col-12', '#');
        ?>
        </div>
    </div>
</div>

In the above example , welcomeBanner function has been placed inside a row and we can see in the row we have a col-md-8 to take up space for other components to fill up the 12 cols in bootstrap grid. Below is the output of the above.

Output

Last updated