Accordion

Last updated: 9/14/21

Accordions display a list of high-level options than can expand to reveal more content.

Base

Use the base class pier-accordion that wraps two elements pier-accordion__title and pier-accordion__content. pier-accordion__title should wrap the persistant header Accordion content and pier-accordion__content should wrap the content that will be revealed on click.

Accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HTML markup

<div class="pier-accordion">
    <div class="pier-accordion__title">
        <h1 class="pier-accordion__heading">
            <span class="pier-accordion__icon fas fa-atom"></span>Accordion
        </h1>
    </div>
    <div class="pier-accordion__content">
        <div class="pier-section">
            <p class="pier-body-text -m-b-0 -m-b-0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
</div>

<div class="pier-accordion">
    <div class="pier-accordion__title">
        <h1 class="pier-accordion__heading">
            <span class="pier-accordion__icon fas fa-atom"></span>Accordion
        </h1>
    </div>
    <div class="pier-accordion__content">
        <div class="pier-section">
            <p class="pier-body-text -m-b-0 -m-b-0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
</div>

Open

Use the modifier class pier-accordion--open to reveal the contents of the Accordion.

Accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HTML markup

<div class="pier-accordion pier-accordion--open">
    <div class="pier-accordion__title">
        <h1 class="pier-accordion__heading">
            <span class="pier-accordion__icon fas fa-atom"></span>Accordion
        </h1>
    </div>
    <div class="pier-accordion__content">
        <div class="pier-section">
            <p class="pier-body-text -m-b-0 -m-b-0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
</div>

<div class="pier-accordion pier-accordion--open">
    <div class="pier-accordion__title">
        <h1 class="pier-accordion__heading">
            <span class="pier-accordion__icon fas fa-atom"></span>Accordion
        </h1>
    </div>
    <div class="pier-accordion__content">
        <div class="pier-section">
            <p class="pier-body-text -m-b-0 -m-b-0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
</div>

In Card

Use the modifier class pier-accordion--card if the Accordion is in a Card component without padding.

Accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HTML markup

<div class="pier-accordion pier-accordion--card pier-accordion--open">
    <div class="pier-accordion__title">
        <h1 class="pier-accordion__heading">
            <span class="pier-accordion__icon fas fa-atom"></span>Accordion
        </h1>
    </div>
    <div class="pier-accordion__content">
        <div class="pier-section">
            <p class="pier-body-text -m-b-0 -m-b-0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
</div>

<div class="pier-accordion pier-accordion--card pier-accordion--open">
    <div class="pier-accordion__title">
        <h1 class="pier-accordion__heading">
            <span class="pier-accordion__icon fas fa-atom"></span>Accordion
        </h1>
    </div>
    <div class="pier-accordion__content">
        <div class="pier-section">
            <p class="pier-body-text -m-b-0 -m-b-0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
</div>

Sizes

Use the modifier classes pier-accordion--xs, pier-accordion--sm, pier-accordion--md, or pier-accordion--lg to change the size of the Accordion.

Accordion XS

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Accordion SM

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Accordion MD

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Accordion LG

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HTML markup

<div class="pier-accordion pier-accordion--xs pier-accordion--open">
    <div class="pier-accordion__title">
        <h1 class="pier-accordion__heading">
            <span class="pier-accordion__icon fas fa-atom"></span>Accordion XS
        </h1>
    </div>
    <div class="pier-accordion__content">
        <div class="pier-section">
            <p class="pier-body-text -m-b-0 -m-b-0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
</div>
<div class="pier-accordion pier-accordion--sm pier-accordion--open">
    <div class="pier-accordion__title">
        <h1 class="pier-accordion__heading">
            <span class="pier-accordion__icon fas fa-atom"></span>Accordion SM
        </h1>
    </div>
    <div class="pier-accordion__content">
        <div class="pier-section">
            <p class="pier-body-text -m-b-0 -m-b-0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
</div>
<div class="pier-accordion pier-accordion--md pier-accordion--open">
    <div class="pier-accordion__title">
        <h1 class="pier-accordion__heading">
            <span class="pier-accordion__icon fas fa-atom"></span>Accordion MD
        </h1>
    </div>
    <div class="pier-accordion__content">
        <div class="pier-section">
            <p class="pier-body-text -m-b-0 -m-b-0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
</div>
<div class="pier-accordion pier-accordion--lg pier-accordion--open">
    <div class="pier-accordion__title">
        <h1 class="pier-accordion__heading">
            <span class="pier-accordion__icon fas fa-atom"></span>Accordion LG
        </h1>
    </div>
    <div class="pier-accordion__content">
        <div class="pier-section">
            <p class="pier-body-text -m-b-0 -m-b-0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
</div>

<div class="pier-accordion pier-accordion--xs pier-accordion--open">
    <div class="pier-accordion__title">
        <h1 class="pier-accordion__heading">
            <span class="pier-accordion__icon fas fa-atom"></span>Accordion XS
        </h1>
    </div>
    <div class="pier-accordion__content">
        <div class="pier-section">
            <p class="pier-body-text -m-b-0 -m-b-0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
</div>
<div class="pier-accordion pier-accordion--sm pier-accordion--open">
    <div class="pier-accordion__title">
        <h1 class="pier-accordion__heading">
            <span class="pier-accordion__icon fas fa-atom"></span>Accordion SM
        </h1>
    </div>
    <div class="pier-accordion__content">
        <div class="pier-section">
            <p class="pier-body-text -m-b-0 -m-b-0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
</div>
<div class="pier-accordion pier-accordion--md pier-accordion--open">
    <div class="pier-accordion__title">
        <h1 class="pier-accordion__heading">
            <span class="pier-accordion__icon fas fa-atom"></span>Accordion MD
        </h1>
    </div>
    <div class="pier-accordion__content">
        <div class="pier-section">
            <p class="pier-body-text -m-b-0 -m-b-0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
</div>
<div class="pier-accordion pier-accordion--lg pier-accordion--open">
    <div class="pier-accordion__title">
        <h1 class="pier-accordion__heading">
            <span class="pier-accordion__icon fas fa-atom"></span>Accordion LG
        </h1>
    </div>
    <div class="pier-accordion__content">
        <div class="pier-section">
            <p class="pier-body-text -m-b-0 -m-b-0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
</div>

Disabled

Use the modifier class pier-accordion--disabled to change the state of the Accordion to disabled.

Accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HTML markup

<div class="pier-accordion pier-accordion--disabled">
    <div class="pier-accordion__title">
        <h1 class="pier-accordion__heading">
            <span class="pier-accordion__icon fas fa-atom"></span>Accordion
        </h1>
    </div>
    <div class="pier-accordion__content">
        <div class="pier-section">
            <p class="pier-body-text -m-b-0 -m-b-0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
</div>

<div class="pier-accordion pier-accordion--disabled">
    <div class="pier-accordion__title">
        <h1 class="pier-accordion__heading">
            <span class="pier-accordion__icon fas fa-atom"></span>Accordion
        </h1>
    </div>
    <div class="pier-accordion__content">
        <div class="pier-section">
            <p class="pier-body-text -m-b-0 -m-b-0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
</div>

Dark

Use the modifier class pier-accordion--dark to change the style of the Accordion for dark UI themes.

Accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HTML markup

<div class="pier-accordion pier-accordion--dark pier-accordion--open">
    <div class="pier-accordion__title">
        <h1 class="pier-accordion__heading">
            <span class="pier-accordion__icon fas fa-atom"></span>Accordion
        </h1>
    </div>
    <div class="pier-accordion__content">
        <div class="pier-section">
            <p class="pier-body-text -m-b-0 -m-b-0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
</div>

<div class="pier-accordion pier-accordion--dark pier-accordion--open">
    <div class="pier-accordion__title">
        <h1 class="pier-accordion__heading">
            <span class="pier-accordion__icon fas fa-atom"></span>Accordion
        </h1>
    </div>
    <div class="pier-accordion__content">
        <div class="pier-section">
            <p class="pier-body-text -m-b-0 -m-b-0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
</div>

Pier Design System

Accordion

Base

Accordion

HTML markup

Open

Accordion

HTML markup

In Card

Accordion

HTML markup

Sizes

Accordion XS

Accordion SM

Accordion MD

Accordion LG

HTML markup

Disabled

Accordion

HTML markup

Dark

Accordion

HTML markup