Details (former Collapse)

Make a page easier to scan by hiding non-essential detailed information until it is needed

When to use this component

Use this component to hide information that is relevant for some users.

Details vs Accordion

The former Collapse component are now two components: Details (this component) and Accordion. Both are useful to make a page easier to scan, but they differ in purpose and also in semantics. Details should be used for:

• Information that is not relevant for every user
• Information that is not important
• Short information (one or few paragraphs)

The semantics of Details are <details> and <summary> which means:

• The title (summary) is not a heading. It does not affect the headings hierarchy of the rest of the document
• The content should not include any headings, sections and other landmarks

How it works

<details>
  <summary>Show details</summary>
  <div>
    <p>Lorem ipsum</p>
  </div>
</details>

@use "@kth/style/scss/components/details.scss";