text: <!DOCTYPE html>
  <html lang="en">
    <head>
      <title>Clarity Design System</title>
      <meta name="Description" content="Clarity Design System" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <link rel="stylesheet" href="https://unpkg.com/normalize.css/normalize.css" />
      <link rel="stylesheet" href="https://unpkg.com/@clr/core@next/global.min.css" />
      <link rel="stylesheet" href="https://unpkg.com/@clr/city/css/bundles/default.min.css" />
    </head>
    <body>
      <main cds-layout="vertical gap:lg p:lg">
        <h1 cds-text="heading">Clarity Design <cds-badge status="success"></cds-badge></h1>
  
        <p cds-text="body">
          This is an example of Clarity with no build step or bundling required.
        </p>
  
        <p cds-text="body">
          <a href="https://clarity.design/storybook/core" cds-text="link">API Documentation</a>
        </p>
      </main>
      <script type="module" src="https://unpkg.com/@clr/core@next/badge/register.js?module"></script>
      <script type="module">
        document.querySelector('cds-badge').textContent = `v${window.CDS.getVersion().versions[0]}`;
      </script>
    </body>
  </html>
  