--- title: Accordion layout: doc/layouts/default.html --- # Accordion

Accordions are elements used to expand and collapse content that is broken into logical sections, much like tabs.

*** {{> 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}}
***

Embedded Block Grid

You can embed a block grid into the accordion for responsive columns:

HTML

{{#markdown}} ```html {{> examples_accordion_grid}} ``` {{/markdown}}

Rendered HTML

{{> examples_accordion_grid}}
*** ## 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"; ```