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: "Coverage board"
Library page: https://astro.baysixmedia.com/components/coverage-board/
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/CoverageBoard.astro =====
---
/**
* CoverageBoard (candidate)
*
* The areas a business serves as one ruled board on a deep surface. The board
* opens with its title panel (eyebrow, heading, sentence, source note), is
* filled by compact equal cells — one supplied area each — and closes with the
* action as a solid accent tile that takes whatever the last row leaves open,
* so the board always ends as a rectangle and the next step sits where the
* list ends. There is no separate header above the list: the title is the
* board's first tile.
*
* Truth rules. It shows only the areas passed in `areas`, in the order given,
* exactly as written: never merged, sorted, abbreviated, grouped, numbered or
* counted. It draws no map, pin, lane, route, radius or premises and implies
* no geography beyond the names. No areas, no section. The action tile renders
* only from a `cta` with a label and a safe href.
*
* Responsive (container queries on the section's own width):
* - below 600px the title panel tops the board; areas run as ruled rows, or
* as two columns of compact cells for seven or more (from 340px), and the
* action is a full-width bar;
* - from 600px the panel still tops the board; two columns of cells, three
* for seven or more;
* - from 960px the panel becomes the board's left column, running its full
* height, with the cells beside it: one column of rows for up to four areas,
* two columns beyond that, and three for ten or more from 1180px. Spare height goes to the action when it
* has the last row to itself, otherwise to every row, so the two sides end
* on one line.
*
* Reads, never declares: --cvb-bg, --cvb-text, --cvb-text-muted, --cvb-brand,
* --cvb-brand-text, --cvb-border, --cvb-family, --cvb-grid-max,
* --cvb-grid-gutter, --cvb-heading-size. No script.
*/
export interface CoverageBoardProps {
heading: string;
headingLevel?: "h2" | "h3";
eyebrow?: string;
intro?: string;
/** The regions, markets, cities or counties, exactly as the business supplied them, in its order. */
areas?: readonly string[];
/** One line at the foot of the title panel, e.g. where the list comes from. */
note?: string;
/** The board's closing tile: a label, a real href and an optional line above the label. */
cta?: { label: string; href: string; detail?: string } | null;
fontStylesheet?: string;
class?: string;
id?: string;
}
interface Props extends CoverageBoardProps {}
const {
heading,
headingLevel = "h2",
eyebrow = "",
intro = "",
areas = [],
note = "",
cta = null,
fontStylesheet = "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap",
class: className,
id,
} = Astro.props;
const SAFE = /^(?:https?:|mailto:|tel:|[#/.?])/i;
const safeHref = (href: string) => (SAFE.test(href.trim()) ? href.trim() : "");
/* As supplied: trimmed, empties dropped, order and wording untouched. */
const names = (areas ?? []).filter((a) => typeof a === "string").map((a) => a.trim()).filter(Boolean);
const n = names.length;
const action =
cta && typeof cta.label === "string" && cta.label.trim() && typeof cta.href === "string" && safeHref(cta.href)
? { label: cta.label.trim(), href: safeHref(cta.href), detail: typeof cta.detail === "string" ? cta.detail.trim() : "" }
: null;
/*
* Columns of area cells per width band. With a closing tile the count follows
* the list and the tile spans what the last row leaves. Without one, the count
* that leaves the fewest open cells (ties go to `prefer`).
*/
const open = (cols: number) => (cols - (n % cols)) % cols;
const fewestOpen = (prefer: number) => {
const other = prefer === 2 ? 3 : 2;
return open(other) < open(prefer) ? other : prefer;
};
const smCols = n >= 7 ? 2 : 1;
const mdCols = n === 1 ? 1 : action ? (n <= 6 ? 2 : 3) : fewestOpen(n <= 6 ? 2 : 3);
/* Beside the panel: one column of rows up to four areas, two up to nine, three from ten (widest band only). */
const xlCols = n <= 4 ? 1 : n <= 9 ? 2 : action ? 3 : fewestOpen(3);
const lgCols = Math.min(xlCols, 2);
const tail = (cols: number) => (n % cols === 0 ? cols : cols - (n % cols));
/*
* Rows beside a title panel that may be taller than the cells: when the action
* has the last row to itself it takes the spare height; otherwise the rows
* share it.
*/
const rows = (cols: number) => {
const count = Math.ceil((n + (action ? tail(cols) : 0)) / cols);
return action && tail(cols) === cols && count > 1
? `repeat(${count - 1}, minmax(var(--cvb-row), auto)) minmax(var(--cvb-row), 1fr)`
: `repeat(${count}, minmax(var(--cvb-row), auto))`;
};
const vars = [
`--cvb-cols-md: ${mdCols}`,
`--cvb-cols-lg: ${lgCols}`,
`--cvb-cols-xl: ${xlCols}`,
`--cvb-span-md: ${tail(mdCols)}`,
`--cvb-span-lg: ${tail(lgCols)}`,
`--cvb-span-xl: ${tail(xlCols)}`,
].join("; ");
const gridVars = `--cvb-rows-lg: ${rows(lgCols)}; --cvb-rows-xl: ${rows(xlCols)}`;
const fullRow = (cols: number) => (action && tail(cols) === cols ? "" : undefined);
/* Two-column phone grid with an odd count: the last area takes the whole row above the action bar. */
const wideLast = smCols === 2 && n % 2 === 1;
const Heading = headingLevel;
---
{n > 0 && (
<>
{fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
<section
class:list={["cvb", { "cvb--pair": smCols === 2, "cvb--short": xlCols === 1 }, className]}
id={id}
style={vars}
data-cta-row-md={fullRow(mdCols)}
data-cta-row-lg={fullRow(lgCols)}
data-cta-row-xl={fullRow(xlCols)}
>
<div class="cvb-inner">
<div class="cvb-board">
<header class="cvb-panel">
<div class="cvb-title">
{eyebrow && <p class="cvb-eyebrow">{eyebrow}</p>}
<Heading class="cvb-heading">{heading}</Heading>
</div>
{(intro || note) && (
<div class="cvb-aside">
{intro && <p class="cvb-intro">{intro}</p>}
{note && <p class="cvb-note">{note}</p>}
</div>
)}
</header>
<div class="cvb-grid" style={gridVars}>
<ul class="cvb-list" role="list">
{names.map((name, i) => (
<li class:list={["cvb-cell", { "cvb-cell--wide": wideLast && i === n - 1 }]}>
<span class="cvb-name">{name}</span>
</li>
))}
</ul>
{action && (
<a class:list={["cvb-cta", { "cvb-cta--plain": !action.detail }]} href={action.href}>
{action.detail && <span class="cvb-cta-detail">{action.detail}</span>}
<span class="cvb-cta-label">{action.label}</span>
<svg class="cvb-cta-arrow" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 12h13M13 6.5 18.5 12 13 17.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>
</a>
)}
</div>
</div>
</div>
</section>
</>
)}
<style>
.cvb {
--cvb-surface: var(--cvb-bg, #0d1114);
--cvb-ink: var(--cvb-text, #f6f3ec);
--cvb-soft: var(--cvb-text-muted, #c4cad0);
--cvb-accent: var(--cvb-brand, #f2b63a);
--cvb-accent-ink: var(--cvb-brand-text, #14120d);
--cvb-line: var(--cvb-border, #39414a);
--cvb-font: var(--cvb-family, Geist, "Inter", ui-sans-serif, system-ui, sans-serif);
container-type: inline-size;
background: var(--cvb-surface);
color: var(--cvb-ink);
font-family: var(--cvb-font);
}
.cvb *,
.cvb *::before,
.cvb *::after {
box-sizing: border-box;
}
.cvb-inner {
--cvb-row: 56px;
max-width: var(--cvb-grid-max, 1232px);
margin: 0 auto;
padding: 56px 20px 64px;
}
/*
* One ruled board. The board draws its top and left edge; every tile inside
* (the title panel, each cell, the action) draws its own right and bottom.
*/
.cvb-board {
display: grid;
grid-template-columns: minmax(0, 1fr);
border-top: 1px solid var(--cvb-line);
border-left: 1px solid var(--cvb-line);
}
/* ---- the opening tile: title, sentence, note ---- */
.cvb-panel {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 28px;
min-width: 0;
padding: 28px 22px 26px;
border-right: 1px solid var(--cvb-line);
border-bottom: 1px solid var(--cvb-line);
background: color-mix(in srgb, var(--cvb-ink) 6%, var(--cvb-surface));
}
/* The accent opens the board where the action tile closes it. */
.cvb-panel::before {
content: "";
position: absolute;
top: -1px;
left: -1px;
width: 72px;
height: 4px;
background: var(--cvb-accent);
}
.cvb-title,
.cvb-aside {
min-width: 0;
}
.cvb-eyebrow {
margin: 0 0 14px;
color: var(--cvb-accent);
font: 600 15px/1.4 var(--cvb-font);
overflow-wrap: anywhere;
}
.cvb-heading {
max-width: 14ch;
margin: 0;
font-family: var(--cvb-font);
font-size: var(--cvb-heading-size, clamp(30px, 8.6cqi, 40px));
font-weight: 700;
line-height: 1.02;
letter-spacing: -0.04em;
text-wrap: balance;
overflow-wrap: anywhere;
}
.cvb-intro {
max-width: 46ch;
margin: 0;
color: var(--cvb-soft);
font: 400 16px/1.6 var(--cvb-font);
overflow-wrap: anywhere;
}
.cvb-note {
max-width: 46ch;
margin: 18px 0 0;
padding-top: 14px;
border-top: 1px solid var(--cvb-line);
color: var(--cvb-soft);
font: 500 14px/1.5 var(--cvb-font);
overflow-wrap: anywhere;
}
.cvb-aside > .cvb-note:first-child {
margin-top: 0;
}
/* ---- the cells ---- */
.cvb-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
min-width: 0;
}
/* The list keeps its semantics; its items sit in the cell grid. */
.cvb-list {
display: contents;
margin: 0;
padding: 0;
list-style: none;
}
.cvb-cell {
display: flex;
align-items: center;
min-width: 0;
min-height: var(--cvb-row);
padding: 14px 20px;
border-right: 1px solid var(--cvb-line);
border-bottom: 1px solid var(--cvb-line);
}
.cvb-name {
display: block;
min-width: 0;
font-size: var(--cvb-name-size, 18px);
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.012em;
text-wrap: balance;
overflow-wrap: anywhere;
}
/* ---- the closing tile: the section's one strong colour ---- */
.cvb-cta {
display: grid;
grid-column: 1 / -1;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"detail detail"
"label arrow";
align-content: center;
align-items: center;
column-gap: 16px;
row-gap: 4px;
min-width: 0;
min-height: 76px;
padding: 16px 20px;
border-right: 1px solid var(--cvb-accent);
border-bottom: 1px solid var(--cvb-accent);
background: var(--cvb-accent);
color: var(--cvb-accent-ink);
text-decoration: none;
transition: background-color 0.2s ease;
}
.cvb-cta--plain {
grid-template-areas: "label arrow";
}
.cvb-cta-detail {
grid-area: detail;
min-width: 0;
font: 500 15px/1.4 var(--cvb-font);
overflow-wrap: anywhere;
}
.cvb-cta-label {
grid-area: label;
min-width: 0;
font: 700 19px/1.2 var(--cvb-font);
letter-spacing: -0.015em;
overflow-wrap: anywhere;
}
.cvb-cta-arrow {
grid-area: arrow;
width: 26px;
height: 26px;
transition: transform 0.2s ease;
}
.cvb-cta:hover {
background: color-mix(in srgb, var(--cvb-accent) 84%, #ffffff);
}
.cvb-cta:hover .cvb-cta-arrow,
.cvb-cta:focus-visible .cvb-cta-arrow {
transform: translateX(4px);
}
/* Inside the tile, so the ring is never clipped by the board's edge. */
.cvb-cta:focus-visible {
outline: 3px solid var(--cvb-accent-ink);
outline-offset: -8px;
}
/* ---- phones: a long list pairs up so it does not become a tall wall ---- */
@container (min-width: 340px) and (max-width: 599.98px) {
.cvb--pair .cvb-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cvb--pair .cvb-cell {
--cvb-row: 60px;
padding: 12px 14px;
}
.cvb--pair .cvb-name {
font-size: 16px;
}
.cvb-cell--wide {
grid-column: 1 / -1;
}
}
/* ---- tablet: panel over two or three columns ---- */
@container (min-width: 600px) {
.cvb-inner {
--cvb-row: 76px;
padding: 80px 32px 88px;
}
.cvb-panel {
gap: 32px;
padding: 36px 32px 32px;
}
.cvb-panel::before {
width: 96px;
}
.cvb-heading {
font-size: var(--cvb-heading-size, clamp(40px, 6.4cqi, 52px));
}
.cvb-intro {
font-size: 17px;
}
.cvb-grid {
grid-template-columns: repeat(var(--cvb-cols-md), minmax(0, 1fr));
--cvb-name-size: clamp(19px, 2.8cqi, 22px);
}
.cvb-cell {
padding: 16px 22px;
}
.cvb-cta {
grid-column: span var(--cvb-span-md);
align-content: space-between;
min-height: var(--cvb-row);
padding: 16px 22px 18px;
}
.cvb-cta--plain {
align-content: end;
}
.cvb-cta-arrow {
align-self: end;
}
.cvb-cta-label {
font-size: 20px;
}
}
/* When the areas fill the last row, the tile becomes a full-width bar. */
@container (min-width: 600px) and (max-width: 959.98px) {
.cvb[data-cta-row-md] .cvb-cta {
grid-template-columns: minmax(0, 1fr) auto auto;
grid-template-areas: "detail label arrow";
align-content: center;
column-gap: 24px;
}
.cvb[data-cta-row-md] .cvb-cta-arrow {
align-self: center;
}
.cvb[data-cta-row-md] .cvb-cta--plain {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "label arrow";
}
}
/* ---- desktop: the panel is the board's left column ---- */
@container (min-width: 960px) {
.cvb-inner {
--cvb-row: clamp(80px, 6.2cqi, 88px);
padding: 104px var(--cvb-grid-gutter, 48px) 112px;
}
.cvb-board {
grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
}
.cvb-panel {
gap: 48px;
padding: 40px 36px 36px;
}
.cvb-panel::before {
width: 120px;
}
.cvb-heading {
max-width: none;
font-size: var(--cvb-heading-size, clamp(40px, 3.4cqi, 50px));
}
.cvb-grid {
grid-template-columns: repeat(var(--cvb-cols-lg), minmax(0, 1fr));
grid-template-rows: var(--cvb-rows-lg);
--cvb-name-size: clamp(20px, 1.6cqi, 23px);
}
.cvb-cell {
padding: 18px 26px;
}
/* A short list stands as one column of rows: the names take more of the width. */
.cvb--short .cvb-grid {
--cvb-name-size: clamp(24px, 2cqi, 28px);
}
.cvb--short .cvb-cell {
padding-inline: 32px;
}
.cvb-cta {
grid-column: span var(--cvb-span-lg);
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"detail detail"
"label arrow";
align-content: space-between;
padding: 20px 26px 22px;
}
.cvb-cta--plain {
grid-template-areas: "label arrow";
align-content: end;
}
.cvb-cta-arrow {
align-self: end;
width: 30px;
height: 30px;
}
.cvb-cta-label {
font-size: clamp(20px, 1.7cqi, 24px);
}
.cvb[data-cta-row-lg] .cvb-cta {
grid-template-columns: minmax(0, 1fr) auto auto;
grid-template-areas: "detail label arrow";
align-content: center;
column-gap: 28px;
}
.cvb[data-cta-row-lg] .cvb-cta-arrow {
align-self: center;
}
.cvb[data-cta-row-lg] .cvb-cta--plain {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "label arrow";
}
}
/* ---- wide desktop: a long list takes a third column ---- */
@container (min-width: 1180px) {
.cvb-grid {
grid-template-columns: repeat(var(--cvb-cols-xl), minmax(0, 1fr));
grid-template-rows: var(--cvb-rows-xl);
}
.cvb-cta {
grid-column: span var(--cvb-span-xl);
}
/* Reset the lg bar, then apply the xl one. */
.cvb[data-cta-row-lg] .cvb-cta {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"detail detail"
"label arrow";
align-content: space-between;
column-gap: 16px;
}
.cvb[data-cta-row-lg] .cvb-cta-arrow {
align-self: end;
}
.cvb[data-cta-row-lg] .cvb-cta--plain {
grid-template-areas: "label arrow";
align-content: end;
}
.cvb[data-cta-row-xl] .cvb-cta {
grid-template-columns: minmax(0, 1fr) auto auto;
grid-template-areas: "detail label arrow";
align-content: center;
column-gap: 28px;
}
.cvb[data-cta-row-xl] .cvb-cta-arrow {
align-self: center;
}
.cvb[data-cta-row-xl] .cvb-cta--plain {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "label arrow";
}
}
@media (prefers-reduced-motion: reduce) {
.cvb-cta,
.cvb-cta-arrow {
transition: none;
}
.cvb-cta:hover .cvb-cta-arrow,
.cvb-cta:focus-visible .cvb-cta-arrow {
transform: none;
}
}
@media (forced-colors: active) {
.cvb-board,
.cvb-panel,
.cvb-cell,
.cvb-note {
border-color: CanvasText;
}
.cvb-panel::before {
background: CanvasText;
}
.cvb-cta {
border: 2px solid LinkText;
}
}
</style>
===== END src/components/CoverageBoard.astro =====
===== FILE (supporting): src/components/CoverageBoard.md =====
# Coverage board
A business's supplied service areas or markets as one ruled board on a deep surface: opened by a title panel (heading, sentence, source note) that is the board's left column on desktop, filled by compact hairline-ruled cells, one area each, and closed by the action as a solid amber tile that fills the last row. Lists only what is supplied, in order; no map, chips, numbers or claims.
## Integration
- A section heading (h2 by default).
- No areas, no section. Areas render in the order and wording supplied, one per cell; the component adds no map, pin, lane, route, number or claim.
- Container queries on the section's own width: below 960px the title panel tops the board (ruled rows, or two compact columns for seven or more areas on phones; two or three columns from 600px); from 960px it is the board's left column with one, two or (from 1180px, ten or more areas) three columns of cells beside it.
- The action tile renders only from `cta` with a label and a safe href; it spans the cells the last row leaves open, or the full row when the areas fill it.
- Dark by default (--cvb-bg #0d1114, accent --cvb-brand #f2b63a with --cvb-brand-text #14120d). Reads --cvb-* hooks: bg, text, text-muted, brand, brand-text, border, family, grid-max, grid-gutter, heading-size.
- No script. Loads Geist from Google Fonts by default; pass fontStylesheet="" on a site that loads its own faces (via --cvb-family).
## Provenance
Staged as candidate `coverage-board` (Step 28) and admitted through the candidate pipeline. Source type: original. References (direction only): none. Quality history: quality/candidates/records/coverage-board.json.
===== END src/components/CoverageBoard.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.