Code snippet

@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);
    }
  }

  $z-indexes: (
    modal : 9000,
    overlay : 8000,
    dropdown : 7000,
    header : 6000,
    footer : 5000,
    hidden : - 1,
    overflowHidden: - 1,
    floating: 10000
  );

Code:

<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->


<div class="bx--snippet bx--snippet--single" > <div class="bx--snippet-container" aria-label="Code Snippet Text">
  <pre>
<code>@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);
    }
  }

  $z-indexes: (
    modal : 9000,
    overlay : 8000,
    dropdown : 7000,
    header : 6000,
    footer : 5000,
    hidden : - 1,
    overflowHidden: - 1,
    floating: 10000
  );</code>
    </pre>
</div>
<button data-copy-btn class="bx--snippet-button" type="button" aria-label="Copy" tabindex="0">
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--snippet__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M14 5v9H5V5h9m0-1H5a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z"></path><path d="M2 9H1V2a1 1 0 0 1 1-1h7v1H2z"></path></svg>
  <div class="bx--btn--copy__feedback" role="alert" data-feedback="Copied!"></div>
</button>
</div>

Inline code snippet

Here is an example of a text that a user would be reading. In this paragraph would be that the user could look at and copy in to their code editor.

Code:

<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<p>Here is an example of a text that a user would be reading. In this paragraph would be
  <button data-copy-btn="" type="button" class="bx--snippet bx--snippet--inline bx--btn--copy"
    aria-label="Copy code" tabindex="0">
    <code>inline code</code>
    <div class="bx--btn--copy__feedback" role="alert" data-feedback="Copied!"></div>
  </button>
  that the user could look at and copy in to their code editor.</p>

Multi line code snippet

@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);
    }
  }

  $z-indexes: (
    modal : 9000,
    overlay : 8000,
    dropdown : 7000,
    header : 6000,
    footer : 5000,
    hidden : - 1,
    overflowHidden: - 1,
    floating: 10000
  );

Code:

<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->


<div class="bx--snippet bx--snippet--multi" 
  data-code-snippet> <div class="bx--snippet-container" aria-label="Code Snippet Text">
  <pre>
<code>@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);
    }
  }

  $z-indexes: (
    modal : 9000,
    overlay : 8000,
    dropdown : 7000,
    header : 6000,
    footer : 5000,
    hidden : - 1,
    overflowHidden: - 1,
    floating: 10000
  );</code>
    </pre>
</div>
<button data-copy-btn class="bx--snippet-button" type="button" aria-label="Copy" tabindex="0">
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--snippet__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M14 5v9H5V5h9m0-1H5a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z"></path><path d="M2 9H1V2a1 1 0 0 1 1-1h7v1H2z"></path></svg>
  <div class="bx--btn--copy__feedback" role="alert" data-feedback="Copied!"></div>
</button>
<button class="bx--btn bx--btn--ghost bx--btn--sm bx--snippet-btn--expand"
  type="button">
  <span class="bx--snippet-btn--text" data-show-more-text="Show more" data-show-less-text="Show less">Show
    more</span>
  <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" aria-label="Show more icon" class="bx--icon-chevron--down bx--snippet__icon" width="16" height="16" viewBox="0 0 16 16" role="img"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
</button>
</div>

Documentation

SCSS

Mixins

Mixins specific to Code Snippet are located in src/components/code-snippet/_mixins.scss.

Name	Params	Description
`bx--snippet`		Common styles for Snippet

Modifiers

Use these modifiers with .bx--snippet class.

Selector	Description
`.bx--snippet--single`	Selector for single lines of code
`.bx--snippet--multi`	Selector for multiple lines of code
`.bx--snippet--inline`	Selector for inline code inside text
`.bx--snippet--light`	Selector for inline code inside text with a light background. Can only be used with .bx--snippet-inline selector

Edit this page on GitHub

Components: Checkbox

Code snippet: Usage