Code

These examples are used for automated tests and may not follow service manual best practice.

Code default

Open this example in a new tab: Code default

This is a plain text code block

Code

Markup

<div class="nhsuk-code" data-module="nhsuk-code">
  <pre class="nhsuk-code__container"><code class="nhsuk-code__content">This is a plain text code block</code></pre>
</div>

Macro

{% from "code/macro.njk" import code -%}

{{ code({
  text: "This is a plain text code block"
}) }}

Code with primary button

Open this example in a new tab: Code with primary button

This is a plain text code block

Code

Markup

<div class="nhsuk-code nhsuk-code--button" data-module="nhsuk-code">
  <button class="nhsuk-button nhsuk-button--small nhsuk-code__button nhsuk-js-code-button" data-module="nhsuk-button" type="button" hidden>
    Copy code
  </button>
  <pre class="nhsuk-code__container"><code class="nhsuk-code__content">This is a plain text code block</code></pre>
</div>

Macro

{% from "code/macro.njk" import code -%}

{{ code({
  text: "This is a plain text code block",
  button: true,
  copyButtonClassList: ["nhsuk-button--small"]
}) }}

Code with secondary button

Open this example in a new tab: Code with secondary button

This is a plain text code block

Code

Markup

<div class="nhsuk-code nhsuk-code--button" data-module="nhsuk-code">
  <button class="nhsuk-button nhsuk-button--secondary nhsuk-button--small nhsuk-code__button nhsuk-js-code-button" data-module="nhsuk-button" type="button" hidden>
    Copy code
  </button>
  <pre class="nhsuk-code__container"><code class="nhsuk-code__content">This is a plain text code block</code></pre>
</div>

Macro

{% from "code/macro.njk" import code -%}

{{ code({
  text: "This is a plain text code block",
  button: true
}) }}

Code with secondary, solid background button

Open this example in a new tab: Code with secondary, solid background button

This is a plain text code block

Code

Markup

<div class="nhsuk-code nhsuk-code--button nhsuk-code--background-body" data-module="nhsuk-code">
  <button class="nhsuk-button nhsuk-button--secondary-solid nhsuk-button--small nhsuk-code__button nhsuk-js-code-button" data-module="nhsuk-button" type="button" hidden>
    Copy code
  </button>
  <pre class="nhsuk-code__container"><code class="nhsuk-code__content">This is a plain text code block</code></pre>
</div>

Macro

{% from "code/macro.njk" import code -%}

{{ code({
  text: "This is a plain text code block",
  button: true,
  background: "body",
  copyButtonClassList: ["nhsuk-button--secondary-solid", "nhsuk-button--small"]
}) }}

Code with button double click not prevented

Open this example in a new tab: Code with button double click not prevented

This is a plain text code block

Code

Markup

<div class="nhsuk-code nhsuk-code--button" data-module="nhsuk-code">
  <button class="nhsuk-button nhsuk-button--secondary nhsuk-button--small nhsuk-code__button nhsuk-js-code-button" data-module="nhsuk-button" data-prevent-double-click="false" type="button" hidden>
    Copy code
  </button>
  <pre class="nhsuk-code__container"><code class="nhsuk-code__content">This is a plain text code block</code></pre>
</div>

Macro

{% from "code/macro.njk" import code -%}

{{ code({
  text: "This is a plain text code block",
  button: {
    preventDoubleClick: false
  }
}) }}

Code with button double click prevented

Open this example in a new tab: Code with button double click prevented

This is a plain text code block

Code

Markup

<div class="nhsuk-code nhsuk-code--button" data-module="nhsuk-code">
  <button class="nhsuk-button nhsuk-button--secondary nhsuk-button--small nhsuk-code__button nhsuk-js-code-button" data-module="nhsuk-button" data-prevent-double-click="true" type="button" hidden>
    Copy code
  </button>
  <pre class="nhsuk-code__container"><code class="nhsuk-code__content">This is a plain text code block</code></pre>
</div>

Macro

{% from "code/macro.njk" import code -%}

{{ code({
  text: "This is a plain text code block",
  button: {
    preventDoubleClick: true
  }
}) }}

Code with custom HTML

Open this example in a new tab: Code with custom HTML

<p>This is an HTML code block.</p>

Code

Markup

<div class="nhsuk-code" data-module="nhsuk-code">
  <pre class="nhsuk-code__container"><code class="nhsuk-code__content">&lt;p&gt;This is an HTML code block.&lt;/p&gt;</code></pre>
</div>

Macro

{% from "code/macro.njk" import code -%}

{{ code({
  html: "<p>This is an HTML code block.</p>"
}) }}

Code with custom HTML and button

Open this example in a new tab: Code with custom HTML and button

<p>This is an HTML code block.</p>

Code

Markup

<div class="nhsuk-code nhsuk-code--button" data-module="nhsuk-code">
  <button class="nhsuk-button nhsuk-button--secondary nhsuk-button--small nhsuk-code__button nhsuk-js-code-button" data-module="nhsuk-button" type="button" hidden>
    Copy code
  </button>
  <pre class="nhsuk-code__container"><code class="nhsuk-code__content">&lt;p&gt;This is an HTML code block.&lt;/p&gt;</code></pre>
</div>

Macro

{% from "code/macro.njk" import code -%}

{{ code({
  html: "<p>This is an HTML code block.</p>",
  button: true
}) }}

Code with custom HTML (escaped) and button

Open this example in a new tab: Code with custom HTML (escaped) and button

<p>This is a code block.</p>

Code

Markup

<div class="nhsuk-code nhsuk-code--button" data-module="nhsuk-code">
  <button class="nhsuk-button nhsuk-button--secondary nhsuk-button--small nhsuk-code__button nhsuk-js-code-button" data-module="nhsuk-button" type="button" hidden>
    Copy code
  </button>
  <pre class="nhsuk-code__container"><code class="nhsuk-code__content">&lt;p&gt;This is a code block.&lt;/p&gt;</code></pre>
</div>

Macro

{% from "code/macro.njk" import code -%}

{% call code({
  button: true
}) -%}

&lt;p&gt;This is a code block.&lt;/p&gt;

{%- endcall %}

Code with icon only

Open this example in a new tab: Code with icon only

<p>This is an HTML code block.</p>

Code

Markup

<div class="nhsuk-code nhsuk-code--button" data-module="nhsuk-code">
  <button class="nhsuk-button nhsuk-button--icon nhsuk-button--secondary nhsuk-button--small nhsuk-code__button nhsuk-js-code-button" data-module="nhsuk-button" type="button" aria-label="Copy code" hidden>
    <svg class="nhsuk-icon nhsuk-icon--copy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
      <path d="M6 7h6v1H6zm0 3h3v1H6zm0 3h3v1H6z" fill-opacity=".5"/>
      <path d="M12 11h3v1h-3zm0 3h6v1h-6zm0 3h6v1h-6z"/>
      <path d="M4 2h10a2 2 0 0 1 2 2v1H7V19H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m0 2v13h3V5H14V4z"/>
      <path d="M10 6h7l5 5v10a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2m0 2v13h10V11l-3-3z"/>
      <path d="m16.5 6 5.5 5.5h-4.5q-1 0-1-1.1z"/>
    </svg>
  </button>
  <pre class="nhsuk-code__container"><code class="nhsuk-code__content">&lt;p&gt;This is an HTML code block.&lt;/p&gt;</code></pre>
</div>

Macro

{% from "code/macro.njk" import code -%}

{{ code({
  html: "<p>This is an HTML code block.</p>",
  button: {
    text: false,
    icon: "copy"
  }
}) }}

Code without border

Open this example in a new tab: Code without border

This is a plain text code block

Code

Markup

<div class="nhsuk-code nhsuk-code--no-border" data-module="nhsuk-code">
  <pre class="nhsuk-code__container"><code class="nhsuk-code__content">This is a plain text code block</code></pre>
</div>

Macro

{% from "code/macro.njk" import code -%}

{{ code({
  text: "This is a plain text code block",
  border: false
}) }}

Code with scroll overflow

Open this example in a new tab: Code with scroll overflow

Supercalifragilisticexpialidocious! Even though the sound of it is something quite atrocious, if you say it loud enough, you'll always sound precocious!

Code

Markup

<div class="nhsuk-code" data-module="nhsuk-code">
  <pre class="nhsuk-code__container"><code class="nhsuk-code__content">Supercalifragilisticexpialidocious! Even though the sound of it is something quite atrocious, if you say it loud enough, you&#39;ll always sound precocious!</code></pre>
</div>

Macro

{% from "code/macro.njk" import code -%}

{{ code({
  text: "Supercalifragilisticexpialidocious! Even though the sound of it is something quite atrocious, if you say it loud enough, you'll always sound precocious!"
}) }}

Code with scroll overflow and button

Open this example in a new tab: Code with scroll overflow and button

Supercalifragilisticexpialidocious! Even though the sound of it is something quite atrocious, if you say it loud enough, you'll always sound precocious!

Code

Markup

<div class="nhsuk-code nhsuk-code--button" data-module="nhsuk-code">
  <button class="nhsuk-button nhsuk-button--secondary nhsuk-button--small nhsuk-code__button nhsuk-js-code-button" data-module="nhsuk-button" type="button" hidden>
    Copy code
  </button>
  <pre class="nhsuk-code__container"><code class="nhsuk-code__content">Supercalifragilisticexpialidocious! Even though the sound of it is something quite atrocious, if you say it loud enough, you&#39;ll always sound precocious!</code></pre>
</div>

Macro

{% from "code/macro.njk" import code -%}

{{ code({
  text: "Supercalifragilisticexpialidocious! Even though the sound of it is something quite atrocious, if you say it loud enough, you'll always sound precocious!",
  button: true
}) }}

Code with translations

Open this example in a new tab: Code with translations

<p>Bloc cod HTML yw hwn.</p>

Code

Markup

<div class="nhsuk-code nhsuk-code--button" data-i18n.copy-button="Copïo cod" data-i18n.copied-button="Cod wedi&#39;i gopïo" data-i18n.copied-announcement="Cod wedi&#39;i gopïo i&#39;r clipfwrdd" data-module="nhsuk-code">
  <button class="nhsuk-button nhsuk-button--secondary nhsuk-button--small nhsuk-code__button nhsuk-js-code-button" data-module="nhsuk-button" type="button" hidden>
    Copïo cod
  </button>
  <pre class="nhsuk-code__container"><code class="nhsuk-code__content">&lt;p&gt;Bloc cod HTML yw hwn.&lt;/p&gt;</code></pre>
</div>

Macro

{% from "code/macro.njk" import code -%}

{{ code({
  html: "<p>Bloc cod HTML yw hwn.</p>",
  button: true,
  copyButtonText: "Copïo cod",
  copiedButtonText: "Cod wedi'i gopïo",
  copiedAnnouncementText: "Cod wedi'i gopïo i'r clipfwrdd"
}) }}