Skip to main contentCarbon Design System

UI shell right panel

Color

The UI Shell can be customized to use any of the four IBM themes by applying an inline theme to the shell zone.

ElementPropertyColor token
Panelbackground color$layer
border-left$border-subtle
Header actionborder-left, border-right$border-subtle
UI shell right panel example.

UI shell switcher example

Item

StatePropertyColor token
Enabledtext color$text-secondary
Hoverbackground color$layer-hover
text color$text-primary
Focusborder$focus
Activebackground color$layer-active
text color$text-primary
Selectedbackground color$layer-selected
text color$text-primary
Disabledtext color$text-disabled

Typography

ElementFont-size (px/rem)Font-weightType token
Item14 / 0.875SemiBold / 600$heading-compact-01

Structure

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

ElementPropertypx/remSpacing token
Panelwidth256 / 16
Itemheight32 / 2
padding left, padding right16 / 1$spacing-05
Header actionheight, width48 / 8
svg20 / 1.25
UI shell right panel example.

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