Accordion

<div class="ui-accordion" data-type="single">
  <div class="ui-accordion__item is-open">
    <button type="button" class="ui-accordion__trigger"
      id="acc-trigger-status" aria-expanded="true"
      aria-controls="acc-panel-status">
      <span class="ui-accordion__trigger-label">Application status</span>
      <span class="ui-icon ui-icon--chevron-down ui-accordion__chevron"
        aria-hidden="true"></span>
    </button>
    <div class="ui-accordion__panel" role="region"
      id="acc-panel-status" aria-labelledby="acc-trigger-status">
      <div class="ui-accordion__panel-body">Packet is ready to submit.</div>
    </div>
  </div>
</div>

import {
  Accordion, AccordionItem, AccordionTrigger, AccordionPanel,
} from 'caustica-design/core'
import 'caustica-design/css'

<Accordion type="single" defaultValue="status">
  <AccordionItem value="status">
    <AccordionTrigger>Application status</AccordionTrigger>
    <AccordionPanel>Packet is ready to submit.</AccordionPanel>
  </AccordionItem>
  <AccordionItem value="channel">
    <AccordionTrigger>Channel notes</AccordionTrigger>
    <AccordionPanel>Prefer email follow-up within 48 hours.</AccordionPanel>
  </AccordionItem>
</Accordion>