Accordion

Color

ClassPropertyColor token
.bx--accordion__titlecolor$text-01
.bx--accordion__contentcolor$text-01
.bx--accordion__arrowfill$icon-01
.bx--accordion__itemborder-top$ui-03

Typography

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

Structure

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__itemborder-top1
.bx--accordion__arrowsize16 / 1
.bx--accordion__arrowpadding-right16 / 1$spacing-05
.bx--accordion__titlemargin-left16 / 1$spacing-05
.bx--accordion__contentpadding-right25%
.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