eds-accordion

Explore the Interactive Component

Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.

See It in Use with Code

Check out this practical implementation of component.

When you’re using the component directly in HTML (or in frameworks that don’t support property binding), you must pass the values like:

Slotted eds-alert

In React

In Vue

Overview

EdsAccordion is a flexible, interactive component for expanding and collapsing content sections. It features a customizable header with optional icon, description, and content area.

Supports two visual variants (default and inverse) matching the card design system, with hover effects, smooth CSS-driven expand/collapse animation, and optional icon display.

The accordion event is emitted when the accordion’s expanded state changes, allowing parent components to track its open/close status.

Properties

Property	Attribute	Description	Type	Default
`clampText`	`clamp-text`	Clamps the description text when the accordion is collapsed to prevent overflow	`boolean`	`true`
`description`	`description`	Optional description displayed below the title in the header	`string`	`undefined`
`expanded`	`expanded`	Determines if the accordion is expanded by default	`boolean`	`false`
`heading`	`title`	The title of the accordion, displayed in the header area	`string`	`undefined`
`icon`	`icon`	Optional icon displayed in the header	"copy" \| "arrow-right" \| "chevron-right" \| "chevron-left" \| "chevron-down" \| "chevron-up" \| "arrow-left" \| "arrow-up-right" \| "close" \| "add" \| "edit" \| "checkmark" \| "download" \| "upload" \| "view" \| "exit" \| "caretSort" \| "bookmark" \| "createLink" \| "activity" \| "account" \| "analytics" \| "template" \| "documentExport" \| "documentDownload" \| "trashCan" \| "chooseItem" \| "copyLink" \| "dragHorizontal" \| "dragVertical" \| "login" \| "logout" \| "move" \| "replicate" \| "sortAscending" \| "sortDescending" \| "requestQuote" \| "reset" \| "resultDraft" \| "share" \| "play" \| "book" \| "chatOff" \| "forum" \| "shareKnowledge" \| "time" \| "help" \| "customerService" \| "code" \| "rocket" \| "compass" \| "menu" \| "search" \| "settings" \| "notification" \| "user" \| "group" \| "save" \| "document" \| "folder" \| "image" \| "calendar" \| "information" \| "warning" \| "error" \| "checkmark-filled" \| "star" \| "thumbs-up" \| "thumbs-down" \| "twitter" \| "linkedin" \| "facebook" \| "youtube" \| "mastodon" \| "bluesky"	`undefined`
`switchBg`	`switch-bg`	[DEPRECATED] Use `variant` prop instead. Kept for backward compatibility.	`boolean`	`true`
`variant`	`variant`	Visual variant: ‘default’ for dark background, ‘inverse’ for light background	`"default" \| "inverse"`	`'inverse'`

Events

Event	Description	Type
`accordion`	Event emitted when the accordion toggles, indicating the new expanded/collapsed state	`CustomEvent<boolean>`

Dependencies

Used by

Depends on

eds-icon-wrapper

Graph

graph TD;
  eds-accordion --> eds-icon-wrapper
  eds-kg-learning-resources --> eds-accordion
  eds-matomo-notice --> eds-accordion
  style eds-accordion fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS