Accordion
The Accordion component provides a reusable pattern for accordion in the interface.
Accordion
The accordion can be used to display larger lists of content on one page. This is wrapped in a paper component, to get a better look and feel.
Using a slot
The accordion will see if you're using the slot. In this example we're using the sub component accordion item to fill the accordion with items
A accordion with spaced items
This accordion style adds spacing between the items..
API
| Parameter | Default | Description |
|---|---|---|
|
id
|
ID for the accordion | |
|
list
|
[] | List of accordion section |
|
beforeHeading
|
Insert before heading | |
|
afterHeading
|
Insert after heading | |
|
beforeContent
|
|
Insert before content |
|
afterContent
|
Insert after content | |
|
componentElement
|
div | Component element |
|
sectionElement
|
div | Section element |
|
sectionHeadingElement
|
button | Section heading component |
|
sectionContentElement
|
div | Section content component |
|
spacedSections
|
false | Sections are spaced instead of glued together |
|
taxonomy
|
[] | Array of taxonomies such as tags |
|
taxonomyPosition
|
Taxonomy position like top or below |
CSS API
| Variable | Default | Type | Values | Description |
|---|---|---|---|---|
|
--c-accordion--space
|
var(--space) | range | - | Base spacing unit. Used for padding and margin inside components. |
|
--c-accordion--border-width
|
var(--border-width) | range | - | Size |
|
--c-accordion--border-radius
|
var(--border-radius) | range | - | Border Radius |
|
--c-accordion--color--surface
|
var(--color--surface) | color | - | Surface |
|
--c-accordion--color--surface-border
|
var(--color--surface-border) | color | - | Manual companion token for borders on surface elements. |
|
--c-accordion--color--surface-contrast
|
var(--color--surface-contrast) | color | - | Used for text and icons on surface backgrounds with less contrast. |
|
--c-accordion--color--surface-alt
|
var(--color--surface-alt) | color | - | Manual companion token for subtle surface backgrounds. |
|
--c-accordion--corner-shape
|
var(--corner-shape) | select | square, round, squircle, circular, bevel, scoop | Corner Shape |
|
--c-accordion--shadow-color
|
var(--shadow-color) | rgba | - | Shadow Color |
|
--c-accordion--shadow-amount
|
var(--shadow-amount) | range | - | Multiplier for elevation shadows. 0 = none, 1 = default. |
|
--c-accordion--font-size-200
|
var(--font-size-200) | range | - | One step above base in the type scale. Equivalent to h6/subtitle. |