Skip to main contentCarbon Design System



ClassPropertyColor token


All accordion labels are set in sentence case and should not exceed three words. Set body text appropriately based on content.

ClassFont-size (px/rem)Font-weightType token
.bx--accordion__title14 / 0.875Regular / 400$body-long-01
.bx--accordion__content14 / 0.875Regular / 400$body-long-01


There is no limit to the height of an open row, however, follow the other padding specs below. The width of an accordion varies based on the content, layout, and page design. The chevron icon can be found on the icons library page. Avoid having any text within 16px / 1rem of the accordion’s sides. Additionally, include padding between labels, body copy, and separation lines to provide breathing room between elements.

ClassPropertypx/remSpacing token
.bx--accordion__headingheight32 / 2
.bx--accordion__arrowsize16 / 1
.bx--accordion__arrowpadding-right16 / 1$spacing-05
.bx--accordion__titlemargin-left16 / 1$spacing-05
.bx--accordion__contentpadding-top8 / 0.5$spacing-03
.bx--accordion__contentpadding-left16 / 1$spacing-05
.bx--accordion__item--activepadding-bottom24 / 1.5$spacing-06
Structure and spacing measurements for accordion

Structure and spacing measurements for accordion | px / rem