Skip to main contentCarbon Design System

Code snippet

Color

Single & multi-line

ClassPropertyColor token
.bx--snippetbackground$field-01
.bx--snippet__iconcolor$icon-01
.bx--snippet-button:hoverbackground-color$hover-ui
.bx--snippet--lightbackground-color$field-02
.bx--snippet--light:hoverbackground-color$hover-ui

Inline snippet

ClassPropertyColor token
.bx--snippet--inlinebackground-color$field-01
.bx--snippet--inlinecolor$text-02
.bx--snippet--inline:hoverbackground-color$hover-ui

Syntax colors

Carbon has defined a set of accessible syntax colors. View an incontext example on CodePen.

Typography

ClassFont-size (px/rem)Font-weightType token
.bx--snippet.code12 / 0.75Regular / 400$code-01
.bx--snippet--inline.code12 / 0.75Regular / 400$code-01

Structure

Single line

ClassPropertypx / remSpacing token
.bx--snippet--singleheight40 / 3–
.bx--snippet--singlemax-width768 / 48–
.bx--snippet--singlepadding-right48 / 3$spacing-09
.bx--snippet--singlepadding-left16 / 1$spacing-05
code snippet style 1

Structure and spacing measurements for code snippet | px / rem

Multi-line code snippet

ClassPropertypx / remSpacing token
.bx--snippet--multimin-height288 / 18–
.bx--snippet--multimax-heightVaries based on content–
.bx--snippet--multimax-width768 / 48–
.bx--snippet-containerpadding-top, padding-bottom16 / 1$spacing-05
.bx--snippet-containerpadding-right48 / 3$spacing-09
.bx--snippet-containerpadding-left16 / 1$spacing-05
.bx--snippet__iconheight, width16px–
.bx--snippet-buttonheight, width32 / 2–
Structure and spacing measurements for multi-line snippet

Structure and spacing measurements for multi-line snippet | px / rem

Inline code snippet

ClassPropertypx / remSpacing token
.bx--snippet--inlineheight16 / 1–
.bx--snippet--inlinewidthVaries based on content–
.bx--snippet--inlineborder-radius2-
.bx--snippet--inline codepadding-right, padding-left8 / 0.5\$spacing-03
Structure and spacing measurements for inline snippet

Structure and spacing measurements for inline code snippet | px / rem