Details

When to use it

The Details component styles the native <details> / <summary> pattern for expandable sections of supporting content. Use it when the hidden content should still remain part of the normal document flow and when the built-in disclosure behavior is enough.

INFO

This is a CSS-only component. The open/closed state comes from the browser's native <details> behavior, so no framework JS is required.

Variants

The Details component currently has one class-based variant:

• Justified: Use .c-details--justify to push the disclosure icon to the far edge of the summary row.

You can also adjust the border and label styling with CSS custom properties:

• --border-radius
• --border-color
• --label-color

What it looks like

Code examples

Default

<details class="c-details">
    <summary>Filter by section</summary>
    <p>Here comes some options with which you can filter you current view.</p>
</details>

Justified variant

<details class="c-details c-details--justify">
    <summary>Justified variant</summary>
    <p>Your tickets are delivered by e-mail immediately after the order is completed.</p>
</details>

Open by default

<details class="c-details" open>
    <summary>Refund policy</summary>
    <div class="c-box c-box--small">
        <p>If an event is cancelled, the organizer handles refunds according to the event terms.</p>
    </div>
</details>

Accessibility notes

Because this component builds on native <details> and <summary>, it gets keyboard interaction and expanded/collapsed semantics from the browser. Keep the summary text short and descriptive, and use real content inside the disclosure instead of placing critical actions or labels only in CSS-generated content.