Browse Blocks

Feature grid

Three benefits in a responsive grid.

Basic

Three benefits in a responsive grid.

View Code

HTML

<section class="stack">
  <h2>
    Built around your work.
  </h2>
  <div class="grid">
    <article class="panel stack">
      <h3>
        Familiar code
      </h3>
      <p class="muted">
        Semantic HTML and ordinary CSS you can edit.
      </p>
    </article>
    <article class="panel stack">
      <h3>
        Only what you need
      </h3>
      <p class="muted">
        Select the pieces that belong in your project.
      </p>
    </article>
    <article class="panel stack">
      <h3>
        Your design
      </h3>
      <p class="muted">
        Shared tokens keep details consistent.
      </p>
    </article>
  </div>
</section>

Installation

Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.

base.css panel.css

Add to your page

<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/panel.css">

8,754 bytes CSS including base · 0 bytes runtime JavaScript

Usage

Lead with benefits

Replace each sample with a useful benefit and a descriptive heading. Keep related descriptions similar in length.

Let the grid adapt

The grid rearranges without JavaScript. Use shared spacing and color tokens to keep the cards consistent.

Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.