Code snippet – Carbon Design System

Preview the code snippet component with the React live demo. For detailed code usage documentation, see the Storybooks for each framework below.

Documentation

React

Angular (Community)

Vue (Community)

Web Components (Community)

Live demo

Theme selector

Variant selector

CodeSandbox React Angular Vue Vanilla Web Components

Live editor for the Single line component


    <CodeSnippet type="single">
    node -v
    </CodeSnippet>


    <CodeSnippet type="single">
    node -v
    </CodeSnippet>

Sample data

const codeSnippet = `@mixin grid-container {
  width: 100%;
  padding-right: padding(mobile);
  padding-left: padding(mobile);

  @include breakpoint(bp--xs--major) {
    padding-right: padding(xs);
    padding-left: padding(xs);
  }

Edit this page on GitHub

Code snippet: Style

Code snippet: Accessibility