Skip to main content

Color

ClassPropertySCSSHEX
.bx--tabs__nav-item--selected .bx--tabs__nav-linkcolor$brand-01#3d70b2
.bx--tabs__nav-item--selectedborder-bottom$brand-01#3d70b2
.bx--tabs__nav-linkcolor$text-01#152935
.bx--tabs__nav-link:hovercolor$hover-primary-text#294c86

Typography

Tab label should be set in sentence case, and should not exceed three words.

ClassFont-size (px/rem)Font-weightType style
.bx--tabs14 / 0.875Semi-Bold / 600.bx--type-zeta

Structure

ClassPropertypx / remSpacing token
.bx--tabs__nav-item--selectedborder-bottom2px-
.bx--tabs__nav-item + .bx--tabs__nav-itemmargin-left48 / 3$spacing-2xl
.bx--tabs__nav-itempadding-top, padding-bottom16 / 1$spacing-md

Structure and spacing measurements for Tabs Structure and spacing measurements for Tab | px / rem