Elements

If you can dream it, you can do it

Panels

Use the uk-panel uk-panel-box classes 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

<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>

important

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.


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

<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.


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

<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>

demo