Shortcodes

Panels

Use the [panel] shortcode to create panels

Panel Title

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.

Panel Title

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.

Panel Title

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.

markup

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

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.


Primary Panel

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.

Secondary Panel

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.

markup

[panel style="uk-panel-box-primary"]
[heading size="h3" style="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.


Primary Panel

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.

Secondary Panel

Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.

markup

[panel style="uk-panel-box-primary"]
[heading size="h3" style="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.


Gary Long - CEO

Gary Long

CEO



Change will not come if we wait for some other person or some other time

Lori Carroll - Chief Editor

Lori Carroll

Chief Editor



Change will not come if we wait for some other person or some other time

Paul Morgan - Creative Designer

Paul Morgan

Creative Designer



Change will not come if we wait for some other person or some other time

Jose Cooper - Joomla Developer

Jose Cooper

Joomla Developer



Change will not come if we wait for some other person or some other time


markup

[person  name="Gary Chapman" title="Joomla Developer" avatar="images/demo/avatar/client-4.png"]
[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]
[line_break/][line_break/]
<p>Change will not come if we wait for some other person or some other time</p>
[/person]