zurb-foundation-5/doc/pages/components/panels.html

Foundation 5 for npm (no code modification from original repo)

---
title: Panels
---

<h3 class="subheader"> 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. </h3>

***

{{> examples_panels_basic}}

***

<h3>Basic</h3>

You can create a panel using minimal markup.

<div class="row">
  <div class="large-6 columns">
    <h4>HTML</h4>
{{#markdown}}
```html
{{> examples_panels_basic_rendered}}
```
{{/markdown}}

  </div>
  <div class="large-6 columns">
    <h4>Rendered HTML</h4>
{{> examples_panels_basic_rendered}}
  </div>
</div>

***

<h3>Advanced</h3>

Additional classes can be added to your panels.

<div class="row">
  <div class="large-6 columns">
    <h4>HTML</h4>
{{#markdown}}
```html
{{> examples_panels_advanced}}
```
{{/markdown}}
  </div>
  <div class="large-6 columns">
    <h4>Rendered HTML</h4>
{{> examples_panels_advanced}}
  </div>
</div>

***

## Customize with Sass

Panels can be easily customized using our Sass variables.

<h4>SCSS</h4>

{{> examples_panels_variables}}

***

## Semantic Markup with Sass

You can create your own panels using our Sass mixins.

<h3>Basic</h3>

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

<h4>SCSS</h4>
{{#markdown}}
```scss
.custom-panel {
  @include panel();
}
```
{{/markdown}}

<h4>HTML</h4>

{{#markdown}}
```html
<div class="custom-panel">Custom panel content goes here</div>
```
{{/markdown}}

<h3>Advanced</h3>

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

<h4>SCSS</h4>

{{#markdown}}
```scss
.custom-panel {
  @include panel(
    // Sets the panel background color. Default: $panel-pg
    $bg:orange,
    // Sets the panel padding amount. Default: $panel-padding
    $padding:20px,
    // Sets the font color based on the darkness of the bg & resets header line-heights for panels. Default: $panel-header-adjust
    $adjust:true
  );
}
```
{{/markdown}}

<h4>HTML</h4>

{{#markdown}}
```html
<div class="custom-panel">Custom panel content with options goes here</div>
```
{{/markdown}}

***

##### Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

<h4>SCSS</h4>

```scss
@import "foundation/components/panels";
```