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.

Build With Predefined HTML Classes

There are two ways to build panels in Foundation 4, either with our predefined HTML or with our mixin. Building panels using our predefined class isn't hard at all. You'll start with <div> and add a class of .panel to it. From there, you just need to add content inside, anything will do.

Available HTML class options:

  • Adding .callout to your panel will make it our default blue and add a shiny top edge to help it stand out.
  • You may also you .radius to add a tasteful border-radius to the mix.
<div class="panel">
  <!-- Content here -->
Basic panel with content.

For these styles to come across, make sure you have the default Foundation CSS package or that you've selected panels from a custom package. These should be linked up following our default HTML page structure.

Build with a Mixin

We've included SCSS mixins used to style panels so that you can code smarter. To use the mixin, you'll need to have the extension installed or grab _variables.scss, _global.scss and _panels.scss from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:

@import "foundation/variables";
@import "foundation/components/global";
@import "foundation/components/panels";

If you are using the mixins, you may include the styles on whatever class or ID you'd like to the <div>.

<div class="your-class-name">
  <!-- Content here -->
Quick Mixin

You can build your panel using our global mixin by including it on your own custom class or ID. The mixin contains all the necessary styles and they can be customized a bit within the mixin. The rest of the important styles are controlled by variables. The code looks like this:

.your-class-name { @include panel; }
Panel content goes here...

You also have three options available to customize the panel within the mixin. These control the background color (which also effect border and font color) and the interior padding of the panel itself.

.your-class-name { @include panel($bg, $padding, $adjust); }

/* This controls the background color, border color and type color based on brightness of the bg. */
$bg: $secondary-color

/* This controls the interior padding */
$padding: $panel-padding

/* Control whether panel mixin adjusts header styles */
$adjust: true
Custom panel. Hell yeah! We used @include panel(pink, 40px);
Default SCSS Variables
$include-html-panel-classes: $include-html-classes;

/* We use these to control the background and border styles */
$panel-bg: darken(#fff, 5%);
$panel-border-style: solid;
$panel-border-size: 1px;

/* We use this % to control how much we darken things on hover */
$panel-function-factor: 10%;
$panel-border-color: darken($panel-bg, $panel-function-factor);

/* We use these to set default inner padding and bottom margin */
$panel-margin-bottom: em-calc(20);
$panel-padding: em-calc(20);

/* We use these to set default font colors */
$panel-font-color: #333;
$panel-font-color-alt: #fff;

$panel-header-adjust: true;

Note: em-calc(); is a function we wrote to convert px to em. It is included in _variables.scss.

This is a modal.

Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of close-reveal-modal. Clicking anywhere outside the modal will also dismiss it.

Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.

Second Modal...


This is a second modal.

See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.


This modal has video