Panels

A panel is a simple, helpful Foundation component that enables you to outline sections of your page easily. This allows you to view your page sections as you add content to them, or add emphasis to a section. The width is controlled by the grid columns you put them inside.

This is a regular panel.

It has an easy to override visual style, and is appropriately subdued.

This is a callout panel.

It's a little ostentatious, but useful for important content.

Basic

You can create a panel using minimal markup.

HTML

<divclass="panel"><h5>This is a regular panel.</h5><p>It has an easy to override visual style, and is appropriately subdued.</p></div>

Rendered HTML

This is a regular panel.

It has an easy to override visual style, and is appropriately subdued.

Advanced

Additional classes can be added to your panels.

HTML

<divclass="panel callout radius"><h5>This is a callout panel.</h5><p>It's a little ostentatious, but useful for important content.</p></div>

Rendered HTML

This is a callout panel.

It's a little ostentatious, but useful for important content.

Customize with Sass

Panels can be easily customized using our Sass variables.

SCSS

$include-html-panel-classes: $include-html-classes !default;// We use these to control the background and border styles
$panel-bg: scale-color($white, $lightness: -5%) !default;
$panel-border-style: solid !default;
$panel-border-size: 1px !default;// We use this % to control how much we darken things on hover
$panel-border-color: scale-color($panel-bg, $lightness: -11%) !default;// We use these to set default inner padding and bottom margin
$panel-margin-bottom: rem-calc(20) !default;
$panel-padding: rem-calc(20) !default;// We use these to set default font colors
$panel-font-color: $oil !default;
$panel-font-color-alt: $white !default;
$panel-header-adjust: true !default;
$callout-panel-link-color: $primary-color !default;
$callout-panel-bg: scale-color($primary-color, $lightness: 94%) !default;

Semantic Markup with Sass

You can create your own panels using our Sass mixins.

Basic

You can use the panel() mixin to create your own panel, like so:

SCSS

.custom-panel {
@include panel();
}

HTML

<divclass="custom-panel">Custom panel content goes here</div>

Advanced

You can further customize your panels using the provided options in the panel() mixin: