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 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 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"
}) }}