Accordion

Expandable content sections built on native <details> and <summary>. The --exclusive modifier uses the name attribute for mutual exclusivity with no JavaScript.

Default

<div class="ln-accordion">
  <details class="ln-accordion__item" open>
    <summary class="ln-accordion__summary">
      <span class="ln-accordion__title">What is vertical rhythm?</span>
      <i class="fa-solid fa-chevron-down ln-accordion__icon" aria-hidden="true"></i>
    </summary>
    <div class="ln-accordion__content">
      <p>Vertical rhythm is a design principle where all vertical
         spacing and line-heights are multiples of a base unit.</p>
    </div>
  </details>
  <details class="ln-accordion__item">
    <summary class="ln-accordion__summary">
      <span class="ln-accordion__title">What grid does ln use?</span>
      <i class="fa-solid fa-chevron-down ln-accordion__icon" aria-hidden="true"></i>
    </summary>
    <div class="ln-accordion__content">
      <p>An 8px base grid for all boxes, and a 24px line grid for
         running text and headings.</p>
    </div>
  </details>
  <details class="ln-accordion__item">
    <summary class="ln-accordion__summary">
      <span class="ln-accordion__title">Do borders break the grid?</span>
      <i class="fa-solid fa-chevron-down ln-accordion__icon" aria-hidden="true"></i>
    </summary>
    <div class="ln-accordion__content">
      <p>No. All visible borders use inset box-shadows, which take no
         space in the box model.</p>
    </div>
  </details>
</div>

What is vertical rhythm?

Vertical rhythm is a design principle where all vertical spacing and line-heights are multiples of a base unit.

What grid does ln use?

An 8px base grid for all boxes, and a 24px line grid for running text and headings.

Do borders break the grid?

No. All visible borders use inset box-shadows, which take no space in the box model.

Flush accordion

<div class="ln-accordion ln-accordion--flush">
  <details class="ln-accordion__item" open>
    <summary class="ln-accordion__summary">
      <span class="ln-accordion__title">No borders between items</span>
      <i class="fa-solid fa-chevron-down ln-accordion__icon" aria-hidden="true"></i>
    </summary>
    <div class="ln-accordion__content">
      <p>The flush modifier removes all divider lines.</p>
    </div>
  </details>
  <details class="ln-accordion__item">
    <summary class="ln-accordion__summary">
      <span class="ln-accordion__title">Useful inside cards</span>
      <i class="fa-solid fa-chevron-down ln-accordion__icon" aria-hidden="true"></i>
    </summary>
    <div class="ln-accordion__content">
      <p>When embedded in a card body, flush avoids doubled borders.</p>
    </div>
  </details>
</div>

No borders between items

The flush modifier removes all divider lines.

Useful inside cards

When embedded in a card body, flush avoids doubled borders.

Reference

Class	Description	Responsive
`.ln-accordion`	Accordion container	No
`.ln-accordion__item`	Individual expandable item (uses `<details>`)	No
`.ln-accordion__summary`	Clickable header row (uses `<summary>`)	No
`.ln-accordion__title`	Title text within the summary	No
`.ln-accordion__icon`	Chevron icon that rotates on open	No
`.ln-accordion__content`	Expandable body content	No
`.ln-accordion--flush`	Remove item borders	No
`.ln-accordion--sm`	Compact size with smaller text	No