---
title: Accordion
layout: doc/layouts/default.html
---
# Accordion
***
{{> examples_accordion_intro}}
***
Basic
You can create an accordion using minimal markup like so:
HTML
{{#markdown}}
```html
{{> examples_accordion_basic}}
```
{{/markdown}}
Rendered HTML
{{> examples_accordion_basic}}
***
## Customize With Sass
Accordions can be easily customized with the Sass variables provided in the `_settings.scss` file.
SCSS
{{> examples_accordion_variables}}
***
##### Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file:
SCSS
```scss
@import "foundation/components/accordion";
```