Skip to main contentCarbon Design System

Code snippet

Color

Single line

ClassPropertyColor token
.bx--snippetbackground$field-01
.bx--snippettext color$text-01
.bx--snippet__iconsvg$icon-01
.bx--copy-btn:hoverbackground-color$hover-ui
.bx--copy-btn:focusborder$focus
.bx--copy-btn:activebackground-color$active-ui
.bx--snippet--lightbackground-color$field-02
.bx--copy-btn--light:hoverbackground-color$hover-light-ui
.bx--copy-btn--light:activebackground-color$active-light-ui
States of a single line codesnippet

Enabled, focus, hover, and active states

Multi-line

ClassPropertyColor token
.bx--snippetbackground$field-01
.bx--snippettext color$text-01
.bx--snippet__iconsvg$icon-01
.bx--copy-btn:hover
.bx--snippet-btn:hover
background-color$hover-ui
.bx--copy-btn:focus
.bx--snippet-btn:focus
border$focus
.bx--copy-btn:active
.bx--snippet-btn:active
background-color$active-ui
.bx--snippet--lightbackground-color$field-02
.bx--copy-btn--light:hover
.bx--snippet-btn--light:hover
background-color$hover-light-ui
.bx--copy-btn--light:active
.bx--snippet-btn--light:active
background-color$active-light-ui
States of a multi-line codesnippet

States for copy button: active, enabled, hover, focus, disabled

States of a multi-line codesnippet

States for show toggle: enabled, hover, focus

Inline snippet

ClassPropertyColor token
.bx--snippet--inlinebackground-color$field-01
.bx--snippet--inlinecolor$text-01
.bx--snippet--inline:hoverbackground-color$hover-ui
.bx--snippet--inline:focusfocus$focus
.bx--snippet--inline:activebackground-color$active-ui
.bx--snippet--inline.bx--snippet--lightbackground-color$field-02
.bx--snippet--inline:hover.bx--snippet--lightbackground-color$hover-light-ui
.bx--snippet--inline:active.bx--snippet--lightbackground-color$active-light-ui
States of an inline codesnippet

States for inline codesnippet: enabled, hover, active, focus

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--snippetpadding16 / 1$spacing-05
.bx--snippet-containerpadding-right40 / 2.5$spacing-08
.bx--snippet__iconheight, width16px–
.bx--snippet-buttonheight, width40 / 2.5–
.bx--copy-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