Bolt Design System

Code Snippet Header Display

Language title and copy to clipboard button are shown by default but can be turned off individually.

Important Notes:

If using Twig, use hide_lang_label and hide_copy props to hide one or both of these Code Snippet header items.

If using HTML, use the data-hide-lang-label and data-hide-copy attributes.

Demo

.my-css {
  display: block;
}

.my-css {
  display: block;
}

.my-css {
  display: block;
}

Twig

{% set code_snippet %}
.my-css {
  display: block;
}
{% endset %}

{% include '@bolt-components-code-snippet/code-snippet.twig' with {
  content: code_snippet,
  lang: 'css',
  hide_lang_label: true,
} only %}

{% include '@bolt-components-code-snippet/code-snippet.twig' with {
  content: code_snippet,
  lang: 'css',
  hide_copy: true,
} only %}

{% include '@bolt-components-code-snippet/code-snippet.twig' with {
  content: code_snippet,
  lang: 'css',
  hide_lang_label: true,
  hide_copy: true,
} only %}

HTML

<div class="c-bolt-code-snippet c-bolt-code-snippet--light" data-lang="css" data-hide-lang-label>
<pre><code>.my-css {
  display: block;
}</code></pre>
</div>

<div class="c-bolt-code-snippet c-bolt-code-snippet--light" data-lang="css" data-hide-copy>
<pre><code>.my-css {
  display: block;
}</code></pre>
</div>

<div class="c-bolt-code-snippet c-bolt-code-snippet--light" data-lang="css" data-hide-lang-label data-hide-copy>
<pre><code>.my-css {
  display: block;
}</code></pre>
</div>