Cards

Article titles

A heading directly inside an article stays within the card body. Direct h1 and h2 titles share the larger article-title style; direct h3 through h6 share the smaller style. Choose the level from the page outline, not its appearance.

Only direct article titles and article-header titles receive compact component sizing. Headings inside content wrappers use the ordinary heading hierarchy. Nested articles retain their own heading context.

<div class="grid">
  <article>
    <h2>Deployment summary</h2>
    <p>A level-two title introduces this standalone article.</p>
  </article>
  <article>
    <h3>Replica health</h3>
    <p>A lower-level title introduces a card within the current section.</p>
  </article>
</div>

<article>
  <section>
    <h3>Replica health</h3>
    <p>A content section keeps the ordinary heading hierarchy.</p>
  </section>
</article>

Frame treatments

Mix optional visual classes: .double-border uses a double line at 3× --tty-frame-width; .strong-shadow uses the Dense mask at full opacity by default, with the usual offsets; .muted uses the muted surface; .flat removes only the decorative shadow, keeping the border.

<article class="double-border muted strong-shadow">
  <h3>Sales</h3>
  <p>Find the right plan for your team.</p>
</article>
<article class="flat muted">
  <h3>Support</h3>
  <p>Help when you need it.</p>
</article>

These classes work independently on article, fieldset, dialog, and the .tabs wrapper. Defaults stay unchanged, including nested frames without their own classes. They are visual treatments, not ARIA roles. For dialog > article, put classes on the dialog; its direct article receives the visual frame.

Shadow textures

Standard is the default: two staggered rectangular marks in a 4×4px SVG mask at 0.6 opacity. Fine scales the same mask to 3×3px; .strong-shadow selects its Dense inverse at full opacity. Pattern scale does not change the shadow offset.

<article style="--tty-shadow-pattern-size: 3px 3px;
                --tty-shadow-color: var(--tty-accent); --tty-shadow-opacity: .8">
  <h3>Custom shadow</h3>
</article>

SVG masks define shapes only; CSS controls color independently. All shadow tokens also work on .strong-shadow; .flat still disables the shadow.

Header band

A direct header creates a full-width muted band. It may contain a heading and other genuinely introductory content; direct headings inside it receive a consistent card-title size.

<article>
  <header>
    <h3>Production cluster</h3>
    <small>eu-west · healthy</small>
  </header>
  <p>All replicas are serving traffic within the latency objective.</p>
</article>

Border title

Add .legend to a direct article header to place that header over the top border. This is an article-header treatment, not the native legend element; use fieldset and legend for form groups.

<article>
  <header class="legend">
    <h3>Cost calculator</h3>
  </header>
  <p>Estimate monthly storage and query volume before provisioning.</p>
</article>

Footer

A direct footer creates a separated muted band for metadata, related links, or actions. Keep destination links as links and actions as buttons.

<article>
  <h3>Nightly backup</h3>
  <p>The latest snapshot completed successfully.</p>
  <footer>
    <div class="group">
      <small>Updated 2 minutes ago</small>
      <a href="#footer">View backup log</a>
      <button type="button" class="secondary">Run backup</button>
    </div>
  </footer>
</article>

Complete structure

Header and footer bands compose around the article body. Use ordinary headings within the body when it contains its own sections.

<article>
  <header>
    <h3>Search service</h3>
    <small>Version 4.8.1</small>
  </header>
  <p>The service is available in three regions.</p>
  <h4>Current status</h4>
  <p>All checks are passing.</p>
  <footer><a href="#complete">Open service details</a></footer>
</article>