Page 6 of 24
Panels
Use the [panel_box] shortcode to create panels. You can also use the [panel] shortcode to create a panel box without a border.
Panel Box
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.Panel without borders
Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.Panel Box
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]