Skip to main contentCarbon Design System

Accordion

Color

ElementPropertyColor token
Titlecolor
$text-primary
Contentcolor
$text-primary
Iconfill
$icon-primary
Headerborder-top
$border-subtle
backgroundTransparent
Panelborder-bottom
$border-subtle
backgroundTransparent

Interactive states

ElementStatePropertyColor token
HeaderHoverbackground
$layer-hover
Focusborder
$focus
Disabledborder-top
$border-subtle
TitleDisabledbackground
$text-disabled
IconDisabledfill
$icon-disabled
default accordion alignment interactive states

Typography

All accordion titles are set in sentence case. See the accordion content guidelines for more details.

ElementFont-size (px/rem)Font-weightType token
Title14 / 0.875Regular / 400
$body-01
Content14 / 0.875Regular / 400
$body-01

Structure

There is no max-height for an open panel but an accordion may scroll if constrained by vertical space. The width of an accordion varies based on the content, layout, and page design. The icon used in the header is a

chevron
. The accordion has an indented default alignment but can also be set to have a flush alignment.

Default alignment

ElementPropertypx/remSpacing token
Headerheight40 / 2.5–
Itemborder-top1–
Titlemargin-left16 / 1
$spacing-05
Panelpadding-top8 / 0.5
$spacing-03
padding-bottom24 / 1.5
$spacing-06
padding-right25%–
padding-left16 / 1
$spacing-05
Iconsize16 / 1–
padding-right16 / 1
$spacing-05
Structure measurements for default accordion alignment

Structure measurements for default accordion alignment. | px / rem


Spacing measurements for default accordion alignment

Spacing measurements for default accordion alignment. | px / rem

Flush alignment

ElementPropertypx/remSpacing token
Headerheight40 / 2.5–
Itemborder-top1–
Titlemargin-left0–
Panelpadding-top8 / 0.5
$spacing-03
padding-bottom24 / 1.5
$spacing-06
padding-right25%–
padding-left0–
Iconsize16 / 1–
padding-right0–
Structure measurements for flush accordion alignment

Structure measurements for flush accordion alignment. | px / rem


Spacing measurements for flush accordion alignment

Spacing measurements for flush accordion alignment. | px / rem

Margin right

Accordions have a variable right margin that changes based on its width. Accordions that are 640px and wider have a

margin-right: 25%
with the percentage being based off the width of the container it is placed in. At smaller widths, the
margin-right
is a fixed size.

Body copy, including titles, in an accordion always follows the margin-right rules. However, inputs and other components may still expand to the full width of the accordion panel.

Accordion widthMargin-rightSpacing token
> 64025%–
420-640px64px / 4rem
$spacing-10
< 42016px / 1rem
$spacing-05

Sizes

ElementSizeHeight (px/rem)
HeaderSmall (sm)32 / 2
Medium (md)40 / 2.5
Large (lg)48 / 3
Sizes for accordion