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.
Heading
Heading
Using column headings
Heading 1 Heading 2
Heading 1 Heading 2
Using dividers between items
Heading
Heading
Using spacing between items
Heading
Heading
Using no border between items
Heading
Heading
Larger content in the accordion item
Lorem ipsum dolor sit amet
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Quid est documentum?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Exempla:
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Sed do eiusmod tempor
- Incididunt ut labore et dolore magna aliqua
- Ut enim ad minim veniam
Quid est documentum publicum?
Lorem ipsum dolor sit amet si:
- Consectetur adipiscing elit, et
- Sed do eiusmod tempor incididunt
Documenta publica sine mora registranda sunt.
Quid significant vocabula conservatum, receptum et constitutum?
- Conservatum: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Receptum: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Constitutum: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Quid est documentum secretum?
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Documenta quae informationes secretas continent semper registranda sunt.
Lorem ipsum dolor sit amet
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Quid est documentum?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Exempla:
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Sed do eiusmod tempor
- Incididunt ut labore et dolore magna aliqua
- Ut enim ad minim veniam
Quid est documentum publicum?
Lorem ipsum dolor sit amet si:
- Consectetur adipiscing elit, et
- Sed do eiusmod tempor incididunt
Documenta publica sine mora registranda sunt.
Quid significant vocabula conservatum, receptum et constitutum?
- Conservatum: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Receptum: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Constitutum: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Quid est documentum secretum?
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Documenta quae informationes secretas continent semper registranda sunt.
Lorem ipsum dolor sit amet
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Quid est documentum?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Exempla:
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Sed do eiusmod tempor
- Incididunt ut labore et dolore magna aliqua
- Ut enim ad minim veniam
Quid est documentum publicum?
Lorem ipsum dolor sit amet si:
- Consectetur adipiscing elit, et
- Sed do eiusmod tempor incididunt
Documenta publica sine mora registranda sunt.
Quid significant vocabula conservatum, receptum et constitutum?
- Conservatum: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Receptum: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Constitutum: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Quid est documentum secretum?
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Documenta quae informationes secretas continent semper registranda sunt.
Accordion wrapped with a card component
Accordion in a card
Lorem ipsum dolor sit amet
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Accordion wrapped with a paper component
Lorem ipsum dolor sit amet
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
API
| Parameter | Default | Description |
|---|---|---|
|
id
|
ID for the accordion | |
|
heading
|
The heading for the accordion | |
|
list
|
[] | List of accordion section |
|
spacing
|
false | Sections are spaced instead of glued together |
|
border
|
true | Whether the accordion should have a border or not |
|
divider
|
false | Whether the accordion should have a divider between sections or not, can not be used together with border |
Subcomponents
Accordion Item
ID for the accordion
| Parameter | Default | Type | Purpose |
|---|---|---|---|
|
id
|
string | ID for the accordion | |
|
heading
|
string|array | The heading | |
|
content
|
string | The content of the accordion item | |
|
classList
|
[] | array | Additional CSS classes added to the wrapping element. |
|
attributeList
|
[] | array | Additional HTML attributes added to the wrapping element. |
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-90
|
var(--font-size-90) | range | - | One step below base in the type scale. |
|
--c-accordion--font-size-200
|
var(--font-size-200) | range | - | One step above base in the type scale. Equivalent to h6/subtitle. |
|
--c-accordion--base
|
var(--base) | range | - | Main unit that drives radius and spacing scales. |