Browse Blocks

Stat cards

A row of clearly labeled metrics.

Basic

A row of clearly labeled metrics.

View Code

HTML

<section class="stack">
  <h2>
    Workspace overview
  </h2>
  <p class="muted">
    Illustrative data, not connected to a service.
  </p>
  <div class="grid">
    <article class="panel stack">
      <h3>
        Projects
      </h3>
      <p>
        14
      </p>
    </article>
    <article class="panel stack">
      <h3>
        Members
      </h3>
      <p>
        28
      </p>
    </article>
    <article class="panel stack">
      <h3>
        Published
      </h3>
      <p>
        8
      </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

Give numbers context

Label each metric and include its units and time range. Make clear whether a value is live or illustrative.

Connect your own data

The examples use static values. Your application supplies updates; no database connection is included.

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