Accordion

Usage

See design usage guidelines

Accordions are user interface (UI) elements that allows content to be shown or hidden by expanding and collapsing sections.

Examples

No Borders

Heading of the Accordiono-chevron-downo-chevron-up

It's commonly used to manage large amounts of content in a compact space, providing a cleaner, more organized layout. Each section of the accordion is usually referred to as a "panel" or "item," and each panel can be expanded or collapsed independently.

<details class="no-borders">
    <summary>
        <b class="text-bold">Heading of the Accordion</b>
        <span class="closed">
            <span class="u-icon u-icon-16">o-chevron-down</span>
        </span>
        <span class="opened">
            <span class="u-icon u-icon-16">o-chevron-up</span>
        </span>
    </summary>
    <p>It's commonly used to manage large amounts of content in a compact space, providing a cleaner, more organized layout. Each section of the accordion is usually referred to as a "panel" or "item," and each panel can be expanded or collapsed independently.</p>
</details>

One Border

Heading of the Accordiono-chevron-downo-chevron-up

It's commonly used to manage large amounts of content in a compact space, providing a cleaner, more organized layout. Each section of the accordion is usually referred to as a "panel" or "item," and each panel can be expanded or collapsed independently.

<details>
    <summary>
        <b class="text-bold">Heading of the Accordion</b>
        <span class="closed"><span class="u-icon u-icon-16">o-chevron-down</span></span>
        <span class="opened"><span class="u-icon u-icon-16">o-chevron-up</span></span>
    </summary>
    <p>It's commonly used to manage large amounts of content in a compact space, providing a cleaner, more organized layout. Each section of the accordion is usually referred to as a "panel" or "item," and each panel can be expanded or collapsed independently.</p>
</details>

Two Borders

Heading of the Accordiono-chevron-downo-chevron-up

It's commonly used to manage large amounts of content in a compact space, providing a cleaner, more organized layout. Each section of the accordion is usually referred to as a "panel" or "item," and each panel can be expanded or collapsed independently.

<details class="block-borders">
    <summary>
        <b class="text-bold">Heading of the Accordion</b>
        <span class="closed"><span class="u-icon u-icon-16">o-chevron-down</span></span>
        <span class="opened"><span class="u-icon u-icon-16">o-chevron-up</span></span>
    </summary>
    <p>It's commonly used to manage large amounts of content in a compact space, providing a cleaner, more organized layout. Each section of the accordion is usually referred to as a "panel" or "item," and each panel can be expanded or collapsed independently.</p>
</details>

Usage Guidelines