---
patternId: example-pattern
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Sample demo</title>
    <style>
      html {
        box-sizing: border-box;
      }

      *,
      *:before,
      *:after {
        box-sizing: inherit;
      }

      body {
        margin: 1rem;
        font-family: system-ui, sans-serif;
      }

      code {
        display: inline;
        background: #f7f7f7;
        padding: 4px;
        border-radius: 8px;
        line-break: anywhere
      }
    </style>
  </head>
  <body>
    <h1>Sample demo</h1>

    <img src="assets/example.svg" alt="Example" width="128" height="128">

    <p>To create a demo like this, add a demo.njk file to the pattern's root directory</p>

    <p>You can add JavaScript to the demo as demonstrated below.</p>

    <div id="sample-container" style="margin-top:24px; padding:10px; border:1px solid #d8d8d8; text-align: center"></div>

    <p>Refer to <code>src/site/content/en/handbook/content-types/example-pattern/demo.njk</code> to see how this was achieved.</p>

    {% set script %}
      const container = document.getElementById('sample-container');
      container.innerHTML = 'I was added via js.';
    {% endset %}

    <script>{{ script | minifyJs | cspHash | safe }}</script>
  </body>
</html>
