Accordion

a single disclosure that expands to reveal its content; stack several for an FAQ.

Example

Every plan ships the full component library and design tokens.
<div class="lucent-accordion is-expanded">
  <button type="button" class="lucent-accordion__header" id="acc-22-h" aria-expanded="true" aria-controls="acc-22-c">
    <span class="lucent-accordion__title">What’s included?</span>
    <span class="lucent-icon lucent-icon--sm lucent-accordion__chevron" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">expand_more</span>
    </span>
  </button>
  <div class="lucent-accordion__content" id="acc-22-c" role="region" aria-labelledby="acc-22-h">Every plan ships the full component library and design tokens.</div>
</div>
<div class="lucent-accordion">
  <button type="button" class="lucent-accordion__header" id="acc-23-h" aria-expanded="false" aria-controls="acc-23-c">
    <span class="lucent-accordion__title">Can I self-host?</span>
    <span class="lucent-icon lucent-icon--sm lucent-accordion__chevron" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">expand_more</span>
    </span>
  </button>
  <div class="lucent-accordion__content" id="acc-23-c" role="region" aria-labelledby="acc-23-h" hidden>Yes, the packages are distributed on GitHub Packages.</div>
</div>

Playground

Yes, the packages are distributed on GitHub Packages.
expanded
disabled 
 
 
 
Using it
 
 
  
 Angular  lucent-accordion 
import { LucentAccordion } from '@design-foundry/lucent-angular';
 		 
 
 Stylesheet  .lucent-accordion 
@design-foundry/lucent-styles/core.css
 		 
  
 
  
API
 
 
 
NameKindTypeDefaultDescription
  
 title input string '' header label. 
 expanded input, two-way boolean false expanded state (two-way). 
 disabled input boolean false not interactive. 
  
 
  
Theming
 
 
 
Color (3)
  
 
Size & spacing (3)
  
 
Border & radius (1)
  
 
Type (5)