Black Lives Matter. Support the Equal Justice Initiative.
Skip to main contentCarbon Design System

UI shell right panel

Color

Note: The UI Shell does not currently use the Carbon theme tokens; theming options for the shell will be available in the future. All color used in the UI Shell is from the IBM Design Language palette.

ClassPropertyColor value
.bx--header-panelbackground colorGray 100
.bx--header-panelborder-leftGray 80
.bx--header__action--activeborder-left, border-rightGray 80
UI shell right panel example.

UI shell switcher example

Context switcher

ClassPropertyColor value
.bx--switcher__itemtext colorGray 30
.bx--switcher__item:hoverbackground colorGray 100-hover
.bx--switcher__item:hovertext colorGray 10
.bx--switcher__item:focusborderWhite
.bx--switcher__item:activebackground colorGray 80
.bx--switcher__item:activetext colorGray 10
.bx--switcher__item-link--selectedbackground colorGray 90
.bx--switcher__item-link--selectedtext colorGray 10
.bx--switcher__item:disabledtext colorGray 30

Typography

ClassFont-size (px/rem)Font-weightType token
.bx--switcher__item14 / 0.875SemiBold / 600$heading-01

Structure

The panel spans the full height of the browser and is fixed to the right edge of the window.

ClassPropertypx/remSpacing token
.bx--header-panelwidth256 / 16
.bx--switcher__itemheight32 / 2
.bx--switcher__itempadding left, padding right16 / 1$spacing-05
.bx--header__actionheight, width48 / 8
.bx--header__actionsvg20 / 1.25
UI shell right panel example.

Structure and spacing measurements for right panel | px | rem.