<%= @page_title %>

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.

---

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.

<%= code_example ' ', :html %>

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:

<%= code_example ' @import "foundation/variables", "foundation/components/global", "foundation/components/panels"; ', :css %>

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

<%= code_example ' ', :html %>

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:

<%= code_example ' .your-class-name { @include panel; }', :css %>

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.

<%= code_example ' .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 ', :css %>

Default SCSS Variables

<%= code_example ' $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: emCalc(20); $panel-padding: emCalc(20); /* We use these to set default font colors */ $panel-font-color: #333; $panel-font-color-alt: #fff; $panel-header-adjust: true;', :css %>

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