An accordion can be helpful if you want to display more information in a smaller area. With the accordion card, you can hide anything than the title and show the rest on demand.

Variations

  • default: minimal styling and nothing more.
  • --box: with border and padding.

Technical Details

  • This component is progressively enhanced, showing everything without JS (like an open state).
  • It is accessible. It uses a button element and the aria-expanded attribute to control its state.
  • We only show a focus ring on :focus-visible and just on the SVG icon.

Resources