Skip to main contentCarbon Design System

Code snippet

Color

Single line

ElementPropertyColor token
Containerbackground$layer *
Codetext color$text-primary
Copy buttonSee ghost button - icon only
Container:focusborder$focus

* Denotes a contextual color token that will change values based on the layer it is placed on.

States of a single line codesnippet

Enabled, focus, hover, and active states

Multi-line

ElementPropertyColor token
Containerbackground$layer *
Codetext color$text-primary
Iconsvg$icon-primary
Copy button
Snippet button
See ghost button - icon only
Container:focusborder$focus

* Denotes a contextual color token that will change values based on the layer it is placed on.

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

ElementPropertyColor token
Containerbackground-color$layer *
Codetext color$text-primary
Container:hoverbackground-color$layer-hover *
Container:focusfocus$focus
Container:activebackground-color$layer-active *

* Denotes a contextual color token that will change values based on the layer it is placed on.

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

ElementFont-size (px/rem)Font-weightType token
Code text12 / 0.75Regular / 400$code-01

Structure

Single line

ElementPropertypx / remSpacing token
Containerheight40 / 3–
max-width768 / 48–
padding-right48 / 3$spacing-09
padding-left16 / 1$spacing-05
code snippet style 1

Structure and spacing measurements for code snippet | px / rem

Multi-line code snippet

ElementPropertypx / remSpacing token
Containermin-height288 / 18–
max-heightVaries based on content–
max-width768 / 48–
padding16 / 1$spacing-05
padding-right40 / 2.5$spacing-08
Iconheight, width16px–
Snippet buttonheight, width40 / 2.5–
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

ElementPropertypx / remSpacing token
Containerheight16 / 1–
widthVaries based on content–
border-radius2-
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