index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Elements</title>
    <meta name="description" content="Elements, in text and in the frame." />
    <link rel="canonical" href="https://example.com/">
    <meta property="og:title" content="Elements">
    <meta property="og:description" content="Elements, in text and in the frame.">
    <meta property="og:url" content="https://example.com/">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Elements">
    <meta name="twitter:description" content="Elements, in text and in the frame.">
    <link rel="stylesheet" href="/elements.9dL6W-aL.css" />
    <script type="module" src="/script.C_FMZhwJ.js"></script>
  </head>
  <body>
    <site-nav><nav>
    <strong>Elements</strong><a href="/docs/">Docs</a>
  </nav></site-nav>
    <main><h1 id="elements">Elements</h1>
<p>A Markz element with a file of its name renders it; the rest stay as Markz writes them.</p>
<call-out type="note" title="{a brace}"><strong>{a brace}</strong> <p>Rendered by <code>code/@call-out.html</code>, holding a <key-word><dfn>term</dfn></key-word> of its own.</p>
</call-out>
<chart-view data="sales.csv"></chart-view>
<p>The cards in <code>data/cards.json</code>, read through a <code>data</code> attribute:</p>
<card-list class="cards"><ul>
    <li><key-word><dfn>Lantern</dfn></key-word>: A small tool.</li><li><key-word><dfn>Compass</dfn></key-word>: Another one.</li>
  </ul></card-list>
<fold-out label="Details"><button aria-expanded="false" title="Details on Elements">Details</button>
  <div hidden><p>Folded text, an element with behavior, its children, with a <key-word><dfn>term</dfn></key-word> rendered at build time.</p>
</div></fold-out>
<p>Every other page, listed by <code>code/@page-list.html</code> from <code>pages</code>:</p>
<page-list><ul>
    <li><a href="/docs/">Docs</a></li>
  </ul></page-list>
<p>A <key-word><dfn>term</dfn></key-word> in a paragraph, and <code>{@call-out}</code> in code, which stays code.</p>
<script>console.log('raw HTML, written as it is');</script>
<p>The <a href="/docs/">docs</a> use the same call-out. This line has *star emphasis*, so it warns.</p>
</main>
    <site-footer><footer>Handwritten. <key-word><dfn>Sitez</dfn></key-word></footer></site-footer>
  </body>
</html>