Tickets

A ticket is a full-width card with a stub down one side. The stub carries the pattern. Inside data-tickets, every other ticket mirrors, so the stubs alternate sides and the text follows.

Basic

<div data-tickets>
  <article data-ticket data-tone="go">
    <aside><span class="stub-label">Build</span></aside>
    <h3>atlas build finished</h3>
    <p>182 pages rendered in 1.94 seconds, one warning.</p>
  </article>
  <article data-ticket data-tone="stop">
    <aside><span class="stub-label">Links</span></aside>
    <h3>Three links point at nothing</h3>
    <p>Every one of them is <code>/guide/old-path</code>, left over from the rename.</p>
  </article>
</div>

The <aside> is the stub; .stub-label is the one class in the library, and it keeps the label readable on the pattern.

Notes

• Tickets are all the same width and line up on both edges; the stub is clamp(4.2rem, 20%, 11rem) wide.
• Under 560px the stub narrows and its label turns to read down the side.
• A ticket is a good stamp target: see Stamps.