[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] [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] [/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/]