Elements

Panels

Use the uk-panel uk-panel-box classes to create panels

<div class="uk-panel uk-panel-box">
  <h3>Panel Title</h3>
  <p>Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.</p>
</div>

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

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 class to the heading to adapt the heading styling to the panel.

<div class="uk-panel uk-panel-box uk-panel-box-primary">
  <h3 class="uk-panel-title">Panel Title</h3>
  <p>Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.</p>
</div>

Panel title with Icons

You can also add icons to the panels by using the uk-icon-{icon} class right next to the header.

<div class="uk-panel uk-panel-box uk-panel-box-primary">
  <h3 class="uk-panel-title"><i class="uk-icon-envelope-o"></i> Panel Title</h3>
  <p>Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.</p>
</div>