Templates and snippets in plain HTML

Page templates

Complete pages. Open one, then copy its source.

• Admin table: a page to manage records, with breadcrumbs, a title row with an action, a filter box, a sortable table with status badges, and an "invite" form in a modal dialog.
• Blog post: an article with author and date, a lead image that enlarges, sections with anchor links, a pull quote, code with a copy button, a sortable table, a callout, and related posts.
• Dashboard: an app page with a full-height sidebar, a top bar with an account menu, stat tiles, a sortable and filterable orders table, and a ranked list.
• Docs page: breadcrumbs, a generated table of contents that follows the scroll, heading anchor links, code with copy buttons, a tip callout, and previous/next links.
• Landing page: a hero with a picture, a feature grid, pricing plans, testimonials, an FAQ accordion, a call to action, and a footer with link columns.
• Sign-up page: a single-form page with help text, a password show/hide toggle, checkboxes, a switch, a character counter, and validation messages under each field.

Snippets

Pieces to paste into a page that already links TagBrush.css (and TagAction, for the behaviors).

Callouts

highlighted notes inside an article. A bold first word labels them; data-tone colors them. Preview the callouts.

<article>
  <h2>Before you deploy</h2>
  <p>Check that your environment variables are set in the dashboard.</p>
  <aside><strong>Note:</strong> Changes to variables take effect on the next deploy.</aside>
  <aside data-tone="warning"><strong>Warning:</strong> Deleting a variable can break a running site.</aside>
</article>

Card grid

a section of linked cards, such as blog posts, projects, or products. Each card is an <article>. Preview the card grid.

<section>
  <h2>Recent posts</h2>
  <article>
    <img src="https://picsum.photos/id/1043/600/340" alt="A desk with a notebook and a laptop" width="600" height="340">
    <h3><a href="/blog/pricing-by-the-day">Why I price by the day</a></h3>
    <p>Hourly rates punish you for getting faster. Here's what changed when I stopped using them.</p>
    <footer><time datetime="2026-10-28">October 28, 2026</time></footer>
  </article>
  <article>
    <img src="https://picsum.photos/id/1060/600/340" alt="Coffee being poured into a cup" width="600" height="340">
    <h3><a href="/blog/four-day-week">A year of four-day weeks</a></h3>
    <p>What I lost, what I gained, and the one rule that made it stick.</p>
    <footer><time datetime="2026-10-14">October 14, 2026</time></footer>
  </article>
  <article>
    <img src="https://picsum.photos/id/1073/600/340" alt="A stack of books on a table" width="600" height="340">
    <h3><a href="/blog/contracts">Five clauses every contract needs</a></h3>
    <p>Plain-language wording you can copy, from payment terms to kill fees.</p>
    <footer><time datetime="2026-09-30">September 30, 2026</time></footer>
  </article>
</section>

Confirm dialog

a button opens a modal with no page script (commandfor/command); clicking the backdrop, Escape, or Cancel closes it. Preview the confirm dialog.

<button class="secondary" commandfor="delete-project" command="show-modal">Delete project</button>
<dialog id="delete-project">
  <form method="post" action="/projects/42/delete">
    <header>
      <h2>Delete "Website redesign"?</h2>
      <button type="button" commandfor="delete-project" command="close" aria-label="Close">✕</button>
    </header>
    <p>This deletes the project and its 128 time entries. It can't be undone.</p>
    <footer>
      <button type="button" class="secondary" commandfor="delete-project" command="close">Cancel</button>
      <button>Delete project</button>
    </footer>
  </form>
</dialog>

Contact form

labeled fields with help text, validation messages shown under each field, a character counter, and a busy submit button. Preview the contact form.

<form action="/contact" method="post">
  <label for="contact-name">Name</label>
  <input id="contact-name" name="name" autocomplete="name" required>
  <label for="contact-email">Email</label>
  <input type="email" id="contact-email" name="email" autocomplete="email" required>
  <small>We reply within one working day.</small>
  <label for="contact-topic">Topic</label>
  <select id="contact-topic" name="topic">
    <option>A question about pricing</option>
    <option>Help with my account</option>
    <option>Something else</option>
  </select>
  <label for="contact-message">Message</label>
  <textarea id="contact-message" name="message" maxlength="1000" required></textarea>
  <label><input type="checkbox" name="copy"> Send me a copy</label>
  <button>Send message</button>
</form>

Data table

sortable columns (click a header), a filter box that hides rows as you type, and status badges. Sort values go in <data value> and <time datetime>. Preview the data table.

<search>
  <input type="search" aria-label="Filter orders" aria-controls="orders-table" placeholder="Filter orders…" hidden>
</search>
<figure>
  <table id="orders-table" class="striped">
    <thead>
      <tr><th>Order</th><th>Customer</th><th>Placed</th><th>Total</th><th>Status</th></tr>
    </thead>
    <tbody>
      <tr><td><a href="/orders/1042">#1042</a></td><td>Maya Lin</td><td><time datetime="2026-11-05">Nov 5</time></td><td><data value="1240">$1,240.00</data></td><td><mark data-tone="success">Paid</mark></td></tr>
      <tr><td><a href="/orders/1041">#1041</a></td><td>Alex Chen</td><td><time datetime="2026-11-04">Nov 4</time></td><td><data value="95">$95.00</data></td><td><mark data-tone="warning">Pending</mark></td></tr>
      <tr><td><a href="/orders/1040">#1040</a></td><td>Zoë Park</td><td><time datetime="2026-11-02">Nov 2</time></td><td><data value="310.5">$310.50</data></td><td><mark data-tone="success">Paid</mark></td></tr>
      <tr><td><a href="/orders/1039">#1039</a></td><td>Bo Ito</td><td><time datetime="2026-10-30">Oct 30</time></td><td><data value="18">$18.00</data></td><td><mark data-tone="error">Refunded</mark></td></tr>
    </tbody>
  </table>
</figure>
<nav aria-label="Pagination">
  <ul>
    <li><a rel="prev" href="?page=1">← Previous</a></li>
    <li><a href="?page=1">1</a></li>
    <li><a href="?page=2" aria-current="page">2</a></li>
    <li><a href="?page=3">3</a></li>
    <li><a rel="next" href="?page=3">Next →</a></li>
  </ul>
</nav>

Docs layout

a docs page with breadcrumbs, a generated table of contents that follows the scroll, heading anchor links, copy buttons on code, and previous/next links. Preview the docs layout.

<header>
  <nav><strong>shipit docs</strong><ul><li><a href="/docs">Guide</a></li><li><a href="/docs/cli">CLI</a></li></ul></nav>
</header>
<main>
  <aside><nav data-tag-toc aria-label="On this page"></nav></aside>
  <article>
    <nav aria-label="Breadcrumb"><ol><li><a href="/docs">Docs</a></li><li><a aria-current="page">Install</a></li></ol></nav>
    <h1>Install shipit</h1>
    <p>shipit deploys a folder of static files with one command.</p>
    <h2 id="requirements">Requirements</h2>
    <p>Node.js 20 or later, and an account on your host.</p>
    <h2 id="install">Install</h2>
    <pre><code>npm install --global shipit</code></pre>
    <h3 id="verify">Check the install</h3>
    <pre><code>shipit --version</code></pre>
    <h2 id="first-deploy">Your first deploy</h2>
    <p>Run <code>shipit</code> in the folder you want to publish. Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to cancel.</p>
    <aside><strong>Tip:</strong> Add <code>--dry-run</code> to see what would be uploaded.</aside>
    <nav aria-label="Pagination">
      <ul>
        <li><a rel="prev" href="/docs">← Introduction</a></li>
        <li><a rel="next" href="/docs/configure">Configure →</a></li>
      </ul>
    </nav>
  </article>
</main>

FAQ

an accordion where one answer is open at a time (the shared name), and the page remembers which. Preview the faq.

<section data-tag-remember>
  <h2>Questions</h2>
  <details name="faq" id="faq-trial" open>
    <summary>Do I need a credit card to start?</summary>
    <p>No. The Starter plan is free forever, and Pro has a 30-day trial without a card.</p>
  </details>
  <details name="faq" id="faq-export">
    <summary>Can I export my data?</summary>
    <p>Yes. Download every entry as CSV or JSON at any time, even after you cancel.</p>
  </details>
  <details name="faq" id="faq-offline">
    <summary>Does it work offline?</summary>
    <p>Yes. Lumen keeps tracking without a connection and syncs when you're back online.</p>
  </details>
</section>

Feature grid

three cards with an icon, a heading, and a sentence each. Add or remove <article>s; the grid adapts. Preview the feature grid.

<section id="features">
  <hgroup>
    <p>Features</p>
    <h2>Everything a one-person business needs</h2>
  </hgroup>
  <article>
    <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
    <h3>Automatic tracking</h3>
    <p>Lumen notices what you work on and fills in your timesheet. You only confirm it.</p>
  </article>
  <article>
    <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 3h9l4 4v14H6z"/><path d="M9 12h6M9 16h6"/></svg>
    <h3>One-click invoices</h3>
    <p>Turn a week of hours into a branded invoice, and send it from Lumen.</p>
  </article>
  <article>
    <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 20V10M10 20V4M16 20v-7M22 20H2"/></svg>
    <h3>Honest reports</h3>
    <p>See which clients pay well for your time and which ones only feel busy.</p>
  </article>
</section>

Footer columns

a site footer with an about line, link columns, and a copyright. Replace the <footer> of your page. Preview the footer columns.

<footer>
  <p>Lumen: time tracking for freelancers.</p>
  <nav aria-label="Product">
    <h2>Product</h2>
    <ul><li><a href="/features">Features</a></li><li><a href="/pricing">Pricing</a></li><li><a href="/changelog">Changelog</a></li></ul>
  </nav>
  <nav aria-label="Company">
    <h2>Company</h2>
    <ul><li><a href="/about">About</a></li><li><a href="/blog">Blog</a></li><li><a href="/contact">Contact</a></li></ul>
  </nav>
  <p>© 2026 Lumen Labs</p>
</footer>

Hero

the page header of a landing page, with a big promise, two calls to action, and a picture beside them. Replace the <header> of your page. Preview the hero.

<header>
  <nav>
    <strong>Lumen</strong>
    <ul>
      <li><a href="#features">Features</a></li>
      <li><a href="#pricing">Pricing</a></li>
      <li><a href="/login">Sign in</a></li>
    </ul>
  </nav>
  <hgroup>
    <h1>Know where your hours go</h1>
    <p>Lumen tracks time for freelancers without timers to forget, and turns it into invoices in one click.</p>
  </hgroup>
  <div role="group">
    <a class="button" href="/signup">Start free</a>
    <a class="button outline" href="/tour">Take the tour</a>
  </div>
  <figure>
    <img src="https://picsum.photos/id/180/800/520" alt="The Lumen week view, with hours grouped by client" width="800" height="520">
  </figure>
</header>

Page header

a title and subtitle with action buttons on the same row. Put it first in <main>. Preview the page header.

<header>
  <hgroup>
    <h1>Orders</h1>
    <p>1,148 orders this month</p>
  </hgroup>
  <div role="group">
    <a class="button outline" href="/orders.csv">Export CSV</a>
    <a class="button" href="/orders/new">New order</a>
  </div>
</header>

Pricing table

three plans as cards, with a price, what's included, and a button. Preview the pricing table.

<section id="pricing">
  <hgroup>
    <p>Pricing</p>
    <h2>Simple plans that grow with you</h2>
  </hgroup>
  <article>
    <header>
      <h3>Starter</h3>
      <p><strong>$0</strong> per month</p>
    </header>
    <ul>
      <li>One client</li>
      <li>Automatic tracking</li>
      <li>Weekly report</li>
    </ul>
    <footer><a class="button outline" href="/signup?plan=starter">Start free</a></footer>
  </article>
  <article>
    <header>
      <h3>Pro <mark data-tone="info">Most popular</mark></h3>
      <p><strong>$12</strong> per month</p>
    </header>
    <ul>
      <li>Unlimited clients</li>
      <li>Invoices and payments</li>
      <li>Reports by client and project</li>
    </ul>
    <footer><a class="button" href="/signup?plan=pro">Try Pro for 30 days</a></footer>
  </article>
  <article>
    <header>
      <h3>Studio</h3>
      <p><strong>$29</strong> per month</p>
    </header>
    <ul>
      <li>Up to five people</li>
      <li>Shared clients and rates</li>
      <li>Priority support</li>
    </ul>
    <footer><a class="button outline" href="/contact">Talk to us</a></footer>
  </article>
</section>

Search bar

a search field with filters and a button in one row, sent to the server as a GET form. Preview the search bar.

<form action="/users" method="get">
  <search>
    <input type="search" name="q" aria-label="Search users" placeholder="Name or email">
    <select name="role" aria-label="Role">
      <option value="">All roles</option>
      <option value="admin">Admin</option>
      <option value="editor">Editor</option>
      <option value="viewer">Viewer</option>
    </select>
    <button>Search</button>
  </search>
</form>

Sidebar layout

an app page with a full-height sidebar, a top bar, and the content beside it. This is the whole <body>. Preview the sidebar layout.

<aside>
  <nav aria-label="Sections">
    <ul>
      <li><a href="/dashboard">Dashboard</a></li>
      <li><a href="/orders" aria-current="page">Orders</a></li>
      <li><a href="/customers">Customers</a></li>
      <li><a href="/settings">Settings</a></li>
    </ul>
  </nav>
</aside>
<header>
  <nav><strong>Northwind</strong><ul><li><a href="/help">Help</a></li></ul></nav>
</header>
<main>
  <h1>Orders</h1>
  <p>The page content goes here.</p>
</main>
<footer><p>© 2026 Northwind</p></footer>

Stat tiles

a row of key numbers with a change for each. A <dl> whose items are wrapped in <div>s becomes tiles. Preview the stat tiles.

<dl>
  <div><dt>Revenue</dt><dd>$84,312</dd><dd><ins>+12.4%</ins> vs. last month</dd></div>
  <div><dt>Orders</dt><dd>1,148</dd><dd><ins>+3.1%</ins> vs. last month</dd></div>
  <div><dt>Conversion</dt><dd>2.9%</dd><dd><del>−0.4%</del> vs. last month</dd></div>
  <div><dt>Average order</dt><dd>$73.44</dd><dd><ins>+8.9%</ins> vs. last month</dd></div>
</dl>

Testimonials

quotes from customers as cards. Preview the testimonials.

<section>
  <h2>Freelancers who switched</h2>
  <article>
    <blockquote>
      <p>I found eleven billable hours a month I used to forget. Lumen paid for itself the first week.</p>
      <footer>Ana Ruiz, illustrator</footer>
    </blockquote>
  </article>
  <article>
    <blockquote>
      <p>The reports showed me my favorite client was my worst-paying one. I raised my rate and kept the client.</p>
      <footer>Tom Okafor, developer</footer>
    </blockquote>
  </article>
</section>

User menu

a top bar with a dropdown account menu. Without JavaScript the menu links simply show in the bar. Preview the user menu.

<header>
  <nav>
    <strong>Northwind</strong>
    <ul>
      <li><a href="/dashboard">Dashboard</a></li>
      <li><a href="/orders">Orders</a></li>
      <li>
        <button class="outline" aria-expanded="false" aria-controls="account-menu">Maya Lin</button>
        <ul id="account-menu">
          <li><a href="/profile">Profile</a></li>
          <li><a href="/settings">Settings</a></li>
          <li><a href="/logout">Sign out</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</header>