---
title: Panels
layout: component.html
---
***
{{> examples_panels_basic}}
***
Basic
You can create a panel using minimal markup.
HTML
{{#markdown}}
```html
{{> examples_panels_basic_rendered}}
```
{{/markdown}}
Rendered HTML
{{> examples_panels_basic_rendered}}
***
Advanced
Additional classes can be added to your panels.
HTML
{{#markdown}}
```html
{{> examples_panels_advanced}}
```
{{/markdown}}
Rendered HTML
{{> examples_panels_advanced}}
***
## Customize with Sass
Panels can be easily customized using our Sass variables.
SCSS
{{> examples_panels_variables}}
***
## 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
{{#markdown}}
```scss
.custom-panel {
@include panel();
}
```
{{/markdown}}
HTML
{{#markdown}}
```html
Custom panel content goes here
```
{{/markdown}}
Advanced
You can further customize your panels using the provided options in the `panel()` mixin:
SCSS
{{#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}}
HTML
{{#markdown}}
```html
Custom panel content with options goes here
```
{{/markdown}}
***
##### Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file:
SCSS
```scss
@import "foundation/components/panels";
```