[heading size=”h2″ style=”uk-module-title”]Panels[/heading]
Use the [panel_box] shortcode to create panels. You can also use the [panel] shortcode to create a panel box without a border.
[child_grid] [column size=”1-3″] [panel_box][heading size=”h3″]Panel Box[/heading] Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. [/panel_box] [/column] [column size=”1-3″][panel_space][heading size=”h3″]Panel without borders[/heading] Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.[/panel_space] [/column] [column size=”1-3″] [panel_box] [heading size=”h3″]Panel Box[/heading] Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.[/panel_box] [/column] [/child_grid] [line_break/] [badge style=”note uk-margin-top”]markup[/badge] [code][panel] [heading size=”h3″]Panel Title[/heading] Your content here [/panel][/code] [line_break/] [badge style=”danger”]important[/badge]
In each of these examples, we’ve nested the panel code within the column grids.
[line_break/] [heading size=”h3″ style=”uk-module-title”]Style modifiers[/heading]
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.
[line_break/] [child_grid] [column size=”1-2″] [panel style=”uk-panel-box-primary”] [heading size=”h3″ style=”uk-panel-title”]Primary Panel[/heading] Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.[/panel] [/column] [column size=”1-2″] [panel style=”uk-panel-box-secondary”] [heading size=”h3″ style=”uk-panel-title”]Secondary Panel[/heading] Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.[/panel] [/column] [/child_grid] [line_break/] [badge style=”note uk-margin-top”]markup[/badge]
[code][panel style=”uk-panel-box-primary”] [heading size=”h3″ style=”uk-panel-title”]Panel Title[/heading] Your content here [/panel][/code]
[line_break/] [heading size=”h3″ style=”uk-module-title”]Panel title with Icons[/heading]
You can also add icons to the panels by using the [icon] shortcode right next to the header.
[line_break/] [child_grid] [column size=”1-2″] [panel style=”uk-panel-box-primary”] [heading size=”h3″ style=”uk-panel-title”][icon style=”icon-envelope-o”/] Primary Panel[/heading] Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.[/panel] [/column] [column size=”1-2″] [panel style=”uk-panel-box-secondary”] [heading size=”h3″ style=”uk-panel-title”][icon style=”icon-gear”/] Secondary Panel[/heading] Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.[/panel] [/column] [/child_grid] [line_break/] [badge style=”note uk-margin-top”]markup[/badge]
[code][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][/code] [line_break/]
