Accordion

Collapsible content sections using native details/summary semantics. The default matches Sailboat's simple accordion, with a bordered variant for boxed layouts.

Default accordion

Accordion item 01

This is the first item's accordion body.

Accordion item 02

This is the second item's accordion body.

Accordion item 03

This is the third item's accordion body.

<div class="accordion">
  <details class="accordion-item" open>
    <summary class="accordion-trigger">
      Accordion item 01
      <div class="text-secondary-500">
        <svg class="accordion-icon">...</svg>
      </div>
    </summary>
    <div class="accordion-panel">
      This is the first item's accordion body.
    </div>
  </details>
</div>

Bordered variant — add .accordion-bordered