The 1 file this component needs and nothing else, each fenced with the path it belongs at, followed by what the library's own verification covered and what it did not. No instructions attached — for placing it yourself, or handing it to something that has its own.
Read it first
Install kit: "KPI card strip"
Library page: https://astro.baysixmedia.com/components/kpi-card-strip/
Files: 1 required, 1 supporting
Write each block below to the path named in its header, relative to the project root. A block marked (required) is one the component does not work without; (supporting) is documentation. Nothing here needs downloading except a block that says so in as many words.
===== FILE (required): src/components/KpiCardStrip.astro =====
---
/**
* KpiCardStrip
*
* A pale blue-grey band with a lime-dot eyebrow, a heading and a scoreboard:
* one white panel divided by hairlines into metric cells. Each cell carries a
* short accent bar, one big number, a label and a caption. Four across from
* 1000px of the section's own width, two by two from 560px, and on phones one
* row per metric with the number beside its words.
*
* Numbers only as supplied: a card needs a label and a value, or it is not
* drawn, and with no cards the section renders nothing.
*
* Static: no script, no hover, no motion. Reads --nv-* design tokens from any
* ancestor, with fallbacks.
*/
export interface KpiCard {
/** Short label for the number. */
label: string;
/** The big figure, as displayed: "120+", "2.4M", "98.7%". */
value: string;
/** One line under the label. */
caption?: string;
/** Any CSS colour for the cell's accent bar. */
accent?: string;
}
export interface KpiCardStripProps {
eyebrow?: string;
heading?: string;
headingLevel?: "h2" | "h3" | "h4";
cards?: KpiCard[];
/** The band's surface. */
background?: string;
fontStylesheet?: string;
id?: string;
}
interface Props extends KpiCardStripProps {}
const {
eyebrow = "",
heading = "",
headingLevel = "h2",
cards = [],
background = "#dde8f0",
fontStylesheet = "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap",
id,
} = Astro.props;
const Heading = headingLevel;
const list = Array.isArray(cards) ? cards.filter((c) => c && c.label && c.value) : [];
---
{fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
{list.length > 0 && (
<section class="kcs" id={id} style={`--kcs-bg: ${background};`}>
<div class="kcs-inner">
{
(eyebrow || heading) && (
<header class="kcs-head">
{eyebrow && (
<p class="kcs-eyebrow">
<span class="kcs-dot" aria-hidden="true" />
{eyebrow}
</p>
)}
{heading && <Heading class="kcs-heading">{heading}</Heading>}
</header>
)
}
<dl class:list={["kcs-board", { "kcs-board--odd": list.length % 2 === 1 }]} style={`--kcs-n: ${Math.min(list.length, 4)};`}>
{list.map((card) => (
<div class="kcs-cell" style={card.accent ? `--kcs-accent: ${card.accent};` : undefined}>
<dt class="kcs-label">{card.label}</dt>
<dd class="kcs-value">
<span class="kcs-bar" aria-hidden="true" />
{card.value}
</dd>
{card.caption && <dd class="kcs-caption">{card.caption}</dd>}
</div>
))}
</dl>
</div>
</section>
)}
<style>
.kcs {
--kcs-font: var(--nv-font, Manrope, Inter, ui-sans-serif, system-ui, sans-serif);
--kcs-lime: var(--nv-lime, #c8ff38);
--kcs-ink: #071a2a;
--kcs-soft: #4a6076;
--kcs-rule: #d7e1ea;
container-type: inline-size;
box-sizing: border-box;
background: var(--kcs-bg);
font-family: var(--kcs-font);
}
.kcs *,
.kcs *::before,
.kcs *::after {
box-sizing: border-box;
}
.kcs-inner {
display: flex;
flex-direction: column;
gap: 28px;
max-width: 1240px;
margin: 0 auto;
padding: 64px 20px;
}
.kcs-head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.kcs-eyebrow {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
font: 700 14px/1.3 var(--kcs-font);
color: #34506a;
}
.kcs-dot {
flex: none;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--kcs-lime);
box-shadow: 0 0 0 2px var(--kcs-ink);
}
.kcs-heading {
max-width: 20ch;
margin: 0;
font: 800 clamp(30px, 6.4cqi, 46px) / 1.04 var(--kcs-font);
letter-spacing: -0.035em;
color: #0a1c2a;
text-wrap: balance;
}
/* ---- the scoreboard: one panel, cells split by hairlines ---- */
.kcs-board {
display: grid;
margin: 0;
overflow: hidden;
border: 1px solid var(--kcs-rule);
border-radius: 18px;
background: #fff;
}
/* Phones: one row per metric — the number beside its words. */
.kcs-cell {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
grid-template-rows: auto 1fr;
column-gap: 16px;
align-items: start;
min-width: 0;
padding: 22px 20px;
}
.kcs-cell + .kcs-cell {
border-top: 1px solid var(--kcs-rule);
}
/* The label comes first in the markup (dt before dd); the number is shown first. */
.kcs-value {
grid-column: 1;
grid-row: 1 / span 2;
margin: 0;
font: 800 clamp(34px, 9cqi, 64px) / 0.95 var(--kcs-font);
letter-spacing: -0.045em;
font-variant-numeric: tabular-nums;
color: var(--kcs-ink);
overflow-wrap: anywhere;
}
.kcs-bar {
display: block;
width: 28px;
height: 4px;
margin-bottom: 14px;
border-radius: 2px;
background: var(--kcs-accent, var(--kcs-lime));
}
.kcs-label {
grid-column: 2;
grid-row: 1;
margin: 18px 0 0;
font: 700 15px/1.3 var(--kcs-font);
color: var(--kcs-ink);
overflow-wrap: anywhere;
}
.kcs-caption {
grid-column: 2;
grid-row: 2;
margin: 4px 0 0;
font: 500 14px/1.45 var(--kcs-font);
color: var(--kcs-soft);
overflow-wrap: anywhere;
}
/* ---- tablet: two by two ---- */
@container (min-width: 560px) {
.kcs-inner {
gap: 36px;
padding: 80px 32px;
}
.kcs-board {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kcs-cell {
display: flex;
flex-direction: column;
padding: 30px 30px 32px;
}
/* Two by two: only the second cell loses the phone layout's top rule. (Sibling selectors outrank :nth-child, so both sides use them.) */
.kcs-cell + .kcs-cell:nth-child(2) {
border-top: 0;
}
.kcs-cell:nth-child(even) {
border-left: 1px solid var(--kcs-rule);
}
/* An odd last metric takes the full row. */
.kcs-board--odd .kcs-cell:last-child {
grid-column: 1 / -1;
}
.kcs-value {
order: -1;
}
.kcs-label {
margin-top: 20px;
}
}
/* ---- desktop: all across ---- */
@container (min-width: 1000px) {
.kcs-inner {
padding: 104px 40px;
}
.kcs-head {
flex-direction: row;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
column-gap: 48px;
}
.kcs-eyebrow {
order: 2;
}
.kcs-board {
grid-template-columns: repeat(var(--kcs-n), minmax(0, 1fr));
}
.kcs-cell {
padding: 36px 32px 38px;
}
.kcs-cell + .kcs-cell {
border-top: 0;
border-left: 1px solid var(--kcs-rule);
}
/* Five or more: the board wraps into a second row of four. */
.kcs-cell + .kcs-cell:nth-child(n + 5) {
border-top: 1px solid var(--kcs-rule);
}
.kcs-cell + .kcs-cell:nth-child(4n + 1) {
border-left: 0;
}
.kcs-board--odd .kcs-cell:last-child {
grid-column: auto;
}
}
@media (forced-colors: active) {
.kcs-board {
border-color: CanvasText;
}
.kcs-bar,
.kcs-dot {
background: CanvasText;
}
}
</style>
===== END src/components/KpiCardStrip.astro =====
===== FILE (supporting): src/components/KpiCardStrip.md =====
# KPI card strip
A pale blue-grey band with a lime-dot eyebrow, a heading and a scoreboard:
one white panel divided by hairlines into metric cells, each with a short
accent bar, one big figure, a label and a caption. Four across from 1000px of
the section's own width, two by two from 560px (an odd last metric spans the
row), and one row per metric on phones with the figure beside its words. The
markup is a `<dl>`: label (`dt`), then figure and caption (`dd`).
Catalog page: `/components/kpi-card-strip`
## Purpose
The "by the numbers" band between a hero and the services. Four figures that
back up the claim above them. Use something else if the figures need to be
charts, or if you have more than eight: past that it stops being a glance.
## Files required
**`KpiCardStrip.astro`**, one file. No imports, no script, no images, no npm
packages. `KpiCardStrip.md` is this file and is not needed to run it.
## Basic usage
```astro
---
import KpiCardStrip from "../components/KpiCardStrip.astro";
---
<KpiCardStrip
eyebrow="By the numbers"
heading="Results you can hold us to."
cards={[
{ label: "Global reach", value: "140+", caption: "Countries on the network", accent: "#73f5df" },
{ label: "On-time arrival", value: "97.9%", caption: "Rolling 12-month average", accent: "#c8ff38" },
]}
/>
```
## Props
| Prop | Type | Default | What it does |
| :--- | :--- | :--- | :--- |
| `eyebrow` | `string?` | `""` | Small line with the lime dot. Hidden when empty. |
| `heading` | `string?` | `""` | Centred heading. Hidden when empty. |
| `headingLevel` | `"h2" \| "h3" \| "h4"?` | `"h2"` | Fits your outline. |
| `cards` | `KpiCard[]?` | `[]` | See below. Cards without a `label` or `value` are skipped. No cards → the component renders nothing. |
The component ships no figures of its own: every number, label and heading
comes from you. The catalog demo's "Halcyon by the numbers" cards live in the
registry's demo props.
| `background` | `string?` | `#dde8f0` | The band surface. |
| `fontStylesheet` | `string?` | Manrope + Inter on Google Fonts | `""` skips the `<link>`. |
| `id` | `string?` | none | Root id. |
```ts
interface KpiCard {
label: string; // "On-time delivery"
value: string; // "98.7%": a display string, formatted by you
caption?: string; // "Rolling 12-month average"
accent?: string; // any CSS colour for the top line; defaults to lime
}
```
## Behaviour
- **Hover:** none. Measured, and reproduced as none.
- **Animation:** none. The reference layer is called "Animated Counter Grid"
but the captured values were static, and the brief measures no motion here.
- Cards are 190px minimum height, with label, figure and caption spaced
top/middle/bottom (`justify-content: space-between`).
## Accessibility
- A `<ul>` of `<li>` cards, so a screen reader announces "list, 4 items".
Label, figure and caption are plain paragraphs in reading order.
- Nothing is focusable, so there is nothing to tab to.
- The accent line and the dot are decorative (`aria-hidden`).
- Under `forced-colors: active` each card gets a real border and the accent
line uses `CanvasText`.
## Responsive
| Width | Columns | Gutters | Heading | Figure |
| :--- | :--- | :--- | :--- | :--- |
| ≥ 1200 | 4 | 64px | 42/43.68, −2.1px | 57.6px |
| 810–1199 | 2 | 48px | 36px | 52px |
| < 810 | 1 | 64px | 28/29.12, −1.4px | 42px |
| < 360 | 1 | 24px | 28px | 42px |
## Integration notes
- Full-bleed band: paints its own surface edge to edge and applies its own
84px block padding. No wrapper needed.
- Reads `--nv-font` and `--nv-lime` from any ancestor, with fallbacks. The
blue-grey text colours (`#45617b`, `#65809b`, `#58728c`, `#0a1c2a`) are the
measured values and are deliberately not tokenised; they belong to this
band's tint.
- Renders a `<section>` with no accessible name. Add `aria-label` on a page
with several landmarks.
## Images and credits
None. The component uses no images.
## Approximations
- **Tablet is interpolated.** No tablet capture exists; 2 columns, 48px
gutters, 36px heading and 52px figures are my choice between the two
measured ends.
- **Gutters below 360px drop to 24px.** The reference keeps 64px at 375,
which would leave a 192px card at 320.
- The measured grid had a fifth, 0px-wide track (a Framer artefact). Not
reproduced.
- The reference renders the suffix ("+", "M", "%") as a separate text run;
here the value is one string in the same style, which looks identical.
- Card border is 0.67px as measured; on 1x screens browsers round it to 1px.
===== END src/components/KpiCardStrip.md =====
--- VERIFIED IN THE COMPONENT LIBRARY ---
Enrolled for verification but never run.
No verification run has been recorded.
No checks have passed yet.
No usable source fingerprint, so these results cannot be tied to the files below.
--- NOT PROVEN ---
- ClientRouter: not applicable — this component ships no script.
--- WHAT THIS DOES NOT CERTIFY ---
Verification was performed on the unmodified component, in an isolated fixture, in the
library. It says nothing about this project's CSS, routes, layout or data, and nothing
about the component once you adapt it. A verified component is a good starting point,
not a guarantee about the installation you are about to build.
--- TEST IN THIS PROJECT AFTER INSTALLING OR CUSTOMISING ---
- Horizontal overflow at 1440, 1280, 1024, 834, 390 and 320px.
- Keyboard operation end to end, including visible focus.
- The no-JavaScript render.
- prefers-reduced-motion: reduce.
- Two instances on one page, if this project renders more than one.
- If this project uses <ClientRouter />: teardown and reinitialisation across a real navigation.