Tableau de Bord
Components
Reusable component catalogue, usage register, variables, and live examples.
Used in
No production-page use is registered yet.
Selected component
Accordions
src/components/Accordion.astro Variables
| Property | Example | Purpose |
|---|---|---|
id | product-details | Optional stable prefix for generated trigger and panel ids. |
ariaLabel | Product details | Accessible name for the accordion group. |
mode | single | Allows one open item or several open items. |
openItems | ["overview"] | Selects initially open children by data-accordion-id. |
collapsible | true | Allows the active item to close in single mode. |
variant | bordered | Selects bordered, separated, or plain. |
iconPosition | end | Places the expand/collapse icon before or after the label. |
headingLevel | 3 | Sets the semantic heading level around each trigger. |
data-accordion-label | Ingredients | Required child attribute used as the trigger label. |
data-accordion-id | ingredients | Optional stable key for initial state and change events. |
data-accordion-open | boolean | Marks a child as initially open without using openItems. |
data-accordion-disabled | boolean | Shows a disabled item that cannot be opened. |
Keyboard and integration details
Trigger buttons work with Enter and Space. Up/Down arrows, Home, and End move focus
between enabled headers. Every change emits bf-accordion-change with
itemId, open, and openItems in event.detail.
Live clickable example
Each child remains ordinary Astro markup. Use single mode for a compact disclosure group, or multiple mode when users should compare several sections at once.
Forms, tables, images, explanatory text, or another reusable component.
Use a focused panel for structured values that do not need to remain visible all the time.
Multiple mode is useful when two or more related panels need to stay open for comparison.
This content is present but its trigger is disabled until the feature becomes available.