Panels

Use the panel shortcode to create panels

[panel]
[heading size="h3" style="underline"]Panel Title[/heading]
Your content here
[/panel]

 

In each of these examples, we've nested the panel code within the column grids .

Style modifiers

You can add style modifiers uk-panel-box-primary and uk-panel-box-secondary to change the visual appearance of the panel. You can also add the uk-panel-title to the heading to adapt the heading styling to the panel.

[panel style="uk-panel-box-primary"]
[heading size="h3" style="underline uk-panel-title"]Panel Title[/heading]
Your content here
[/panel]

Panel title with Icons

You can also add icons to the panels by using the [icon] shortcode right next to the header.

[panel style="uk-panel-box-primary"]
[heading size="h3" style="underline uk-panel-title"][icon style="icon-envelope-o"/] Panel Title[/heading]
Your content here
[/panel]

Using panels to define person's biodata

A pretty neat way of using panels is creating biodata for a person e.g for company staff. You can use the [person] shortcode to create a panel that gives you the option to add the person's name, the title and the person's avatar.

[person name="George Freeby" title="Head of ICT" avatar="images/demo/avatar/team-1.jpg"]
   <p>Change will not come if we wait for some other person or some other time</p>
   <br/>
   <div class="uk-text-right">
      [icon_button icon="icon-pinterest" url="#" target="_self"][/icon_button]
      [icon_button icon="icon-linkedin" url="#" target="_self"][/icon_button]
      [icon_button icon="icon-facebook" url="#" target="_self"][/icon_button]
</div>
[/person]