Feature grid

Preview Available in release assets

Explain a set of peer capabilities in semantic articles that reflow intrinsically.

Feature grid in context

<section aria-labelledby="features-heading">
  <h2 id="features-heading">Built for durable publishing</h2>
  <div class="thin-feature-grid">
    <article class="thin-feature">
      <svg data-icon aria-hidden="true">
        <use href="/icons/sprite.svg#sparkles">
        </use>
      </svg>
      <h3>Theme driven</h3>
      <p>The same contract feels editorial in Neutral and expressive in Thin-Sky.</p>
    </article>
    <article class="thin-feature">
      <h3>Content first</h3>
      <p>A deliberately long localized explanation wraps without hiding the destination or changing source order.</p>
    </article>
  </div>
</section>

Show code

<section aria-labelledby="features-heading">
  <h2 id="features-heading">Built for durable publishing</h2>
  <div class="thin-feature-grid">
    <article class="thin-feature">
      <svg data-icon aria-hidden="true">
        <use href="/icons/sprite.svg#sparkles">
        </use>
      </svg>
      <h3>Theme driven</h3>
      <p>The same contract feels editorial in Neutral and expressive in Thin-Sky.</p>
    </article>
    <article class="thin-feature">
      <h3>Content first</h3>
      <p>A deliberately long localized explanation wraps without hiding the destination or changing source order.</p>
    </article>
  </div>
</section>

Anatomy

Section heading
Intrinsic grid
Article per feature
Optional decorative Lucide icon
Feature heading and explanation

Variants and sizes

Text only
Decorative icons
Linked features
Uneven content

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

One item
Long localized copy
Missing icon
Narrow container
Wide container

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

A feature is static unless it contains an ordinary link; the complete card is not made clickable by scripting.

Accessibility

Maintain heading order beneath the section heading, hide decorative icons, and use descriptive link text for linked features.

Contract: COMPOSE
Basis: Composition of native landmarks, headings, lists, links, and forms; no APG widget

API

Use a container.thin-feature-grid and semantic article.thin-feature children.

Behavior tier: css-only

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Landmarks, headings, links, media, disclosure, and native forms remain useful in normal document flow without CSS or JavaScript.

Assets and dependencies

/foundation.css
/layouts.css
/components.css
/patterns/marketing.css
/icons/sprite.svg

Dependencies: None

Source: packages/ui/src/items/marketing/style.ts