Panels and Borders

Panels and borders can be used to draw attention to special or important content. Simply add the class panel or border to your element, or to a div wrapped around many elements. Customize by also adding a brand color.

HTML

<p class="border orange"><!--Your content goes here--></p>
<p class="panel orange"><!--Your content goes here--></p>

Rendered HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies consequat lorem, a dapibus ex eleifend nec. Sed vehicula nunc tellus, a feugiat nulla ullamcorper eu. Quisque mollis, quam eget sollicitudin auctor, lacus risus egestas erat, id cursus est risus in mauris.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies consequat lorem, a dapibus ex eleifend nec. Sed vehicula nunc tellus, a feugiat nulla ullamcorper eu. Quisque mollis, quam eget sollicitudin auctor, lacus risus egestas erat, id cursus est risus in mauris.

Other Use Examples:

HTML

<h4 class="panel sky">Header</h4>

Rendered HTML

Header

HTML

<div class="panel regalia">
    <h4 class="last">Header</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Rendered HTML