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: "Checked reasons section"
Library page: https://astro.baysixmedia.com/components/checked-reasons-section/
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/CheckedReasonsSection.astro =====
---
/**
* CheckedReasonsSection
*
* A "why choose us" section that works on words alone, laid out like a
* checklist sheet: the heading across the top with the paragraph and action
* beside it, then the reasons as a ruled grid — each a ticked box, a short
* reason and a line explaining it — and, when real figures are passed, a
* ruled row of them to close. An optional photo sits beside the heading.
* None of the optional parts is needed for it to read as finished.
*
* Built for trust without evidence it does not have: no statistic, rating,
* year, award or certification appears unless it is passed, and the reasons
* themselves have no defaults. Given no reasons it renders its copy alone.
*
* No script. Sizes follow the section's own width (container queries).
* Reads --crs-* tokens from any ancestor, with fallbacks.
* Step 34: --crs-grid-max / --crs-grid-gutter (desktop) put the content on a
* site's page grid, and --crs-heading-size lets the site's heading scale size the heading;
* with no input the design is exactly as it was.
*/
export interface CheckedReason {
/** The reason, short: "Upfront pricing". */
title: string;
/** One sentence that makes it concrete. */
detail?: string;
}
export interface CheckedReasonsFigure {
/** The figure as the business states it: "1,200+", "15". */
value: string;
/** What it counts: "homes served in 2024". */
label: string;
}
export interface CheckedReasonsSectionProps {
heading: string;
headingLevel?: "h2" | "h3";
eyebrow?: string;
body?: string;
reasons?: readonly CheckedReason[];
/** Real figures only. Omit for none; nothing is computed or assumed. */
figures?: readonly CheckedReasonsFigure[];
/** A photo under the copy. Omit it and the copy stands alone. */
image?: { src: string; alt?: string } | null;
cta?: { label: string; href: string } | null;
fontStylesheet?: string;
class?: string;
id?: string;
}
interface Props extends CheckedReasonsSectionProps {}
const {
heading,
headingLevel = "h2",
eyebrow = "",
body = "",
reasons = [],
figures = [],
image = null,
cta = null,
fontStylesheet = "https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=swap",
class: className,
id,
} = Astro.props;
const SAFE = /^(?:https?:|mailto:|tel:|[#/.?])/i;
const safeHref = (href: string) => (SAFE.test(href.trim()) ? href.trim() : "#");
const rows = (reasons ?? [])
.filter((r) => r && typeof r.title === "string" && r.title.trim())
.map((r) => ({ title: r.title.trim(), detail: r.detail?.trim() ?? "" }));
const numbers = (figures ?? [])
.map((f) => ({ value: f?.value?.trim() ?? "", label: f?.label?.trim() ?? "" }))
.filter((f) => f.value && f.label);
const photo = image?.src ? { src: image.src, alt: image.alt ?? "" } : null;
const Heading = headingLevel;
const ReasonTitle = headingLevel === "h2" ? "h3" : "h4";
---
{fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
<section class:list={["crs", className]} id={id}>
<div class="crs-inner">
<div class:list={["crs-head", { "crs-head--photo": photo }]}>
<div class="crs-lead">
{eyebrow && <p class="crs-eyebrow">{eyebrow}</p>}
<Heading class="crs-title">{heading}</Heading>
</div>
{
(body || cta) && (
<div class="crs-aside">
{body && <p class="crs-body">{body}</p>}
{cta && (
<a class="crs-cta" href={safeHref(cta.href)}>
{cta.label}
</a>
)}
</div>
)
}
{photo && <img class="crs-photo" src={photo.src} alt={photo.alt} width="640" height="440" loading="lazy" decoding="async" />}
</div>
{
rows.length > 0 && (
<ul class:list={["crs-list", { "crs-list--odd": rows.length % 2 === 1 }]} role="list">
{rows.map((row) => (
<li class="crs-row">
<span class="crs-check" aria-hidden="true">
<svg viewBox="0 0 24 24" focusable="false">
<path d="m5.5 12.5 4 4 9-9.5" />
</svg>
</span>
<div class="crs-row-text">
<ReasonTitle class="crs-row-title">{row.title}</ReasonTitle>
{row.detail && <p class="crs-row-detail">{row.detail}</p>}
</div>
</li>
))}
</ul>
)
}
{
numbers.length > 0 && (
<dl class="crs-figures">
{numbers.map((n) => (
<div class="crs-figure">
<dt>{n.label}</dt>
<dd>{n.value}</dd>
</div>
))}
</dl>
)
}
</div>
</section>
<style>
.crs {
--crs-surface: var(--crs-bg, #ffffff);
--crs-ink: var(--crs-text, #0f1b2d);
--crs-muted: var(--crs-text-muted, #46546a);
--crs-accent: var(--crs-brand, #1d4ed8);
--crs-rule: var(--crs-border, #d5dae3);
--crs-font: var(--crs-family, Manrope, ui-sans-serif, system-ui, sans-serif);
container-type: inline-size;
background: var(--crs-surface);
color: var(--crs-ink);
font-family: var(--crs-font);
}
.crs *,
.crs *::before,
.crs *::after {
box-sizing: border-box;
}
.crs-inner {
max-width: var(--crs-grid-max, 1200px);
margin: 0 auto;
padding: 56px 20px;
}
/* ---- head: heading, then paragraph and action ---- */
.crs-head {
display: grid;
gap: 16px;
}
.crs-lead,
.crs-aside {
min-width: 0;
}
.crs-eyebrow {
margin: 0 0 12px;
color: var(--crs-accent);
font: 700 14px/1.4 var(--crs-font);
}
.crs-title {
margin: 0;
max-width: 16ch;
font: 800 var(--crs-heading-size, clamp(30px, 7.4cqi, 48px)) / 1.08 var(--crs-font);
letter-spacing: -0.025em;
text-wrap: balance;
overflow-wrap: anywhere;
}
.crs-body {
max-width: 46ch;
margin: 0;
color: var(--crs-muted);
font: 500 17px/1.6 var(--crs-font);
overflow-wrap: anywhere;
}
.crs-cta {
display: inline-block;
margin-top: 18px;
padding: 6px 0;
color: var(--crs-ink);
font: 700 16px/1.4 var(--crs-font);
text-decoration: underline;
text-decoration-color: var(--crs-accent);
text-decoration-thickness: 2px;
text-underline-offset: 6px;
transition: text-underline-offset 0.18s ease;
}
.crs-cta:hover {
text-underline-offset: 3px;
}
.crs-cta:focus-visible {
outline: 3px solid var(--crs-accent);
outline-offset: 3px;
border-radius: 2px;
}
.crs-photo {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
margin-top: 8px;
border-radius: 6px;
object-fit: cover;
}
/* ---- reasons: a ruled sheet, ticked boxes ---- */
.crs-list {
display: grid;
margin: 40px 0 0;
padding: 0;
border-bottom: 1px solid var(--crs-rule);
list-style: none;
}
.crs-row {
display: grid;
grid-template-columns: 28px minmax(0, 1fr);
gap: 16px;
padding: 22px 0 24px;
border-top: 1px solid var(--crs-rule);
}
.crs-check {
display: grid;
place-items: center;
width: 28px;
height: 28px;
margin-top: 1px;
border: 2px solid var(--crs-ink);
border-radius: 4px;
color: var(--crs-accent);
}
.crs-check svg {
width: 22px;
height: 22px;
margin: -3px -4px 0 0;
fill: none;
stroke: currentColor;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
.crs-row-title {
margin: 2px 0 0;
font: 800 18px/1.35 var(--crs-font);
letter-spacing: -0.01em;
overflow-wrap: anywhere;
}
.crs-row-detail {
max-width: 44ch;
margin: 6px 0 0;
color: var(--crs-muted);
font: 500 15.5px/1.6 var(--crs-font);
overflow-wrap: anywhere;
}
/* ---- figures: a ruled row that closes the sheet ---- */
.crs-figures {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
margin: 0;
border-bottom: 1px solid var(--crs-rule);
}
.crs-list + .crs-figures {
border-top: 0;
}
.crs-figures:first-child,
.crs-head + .crs-figures {
margin-top: 40px;
border-top: 1px solid var(--crs-rule);
}
.crs-figure {
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
gap: 4px;
min-width: 0;
padding: 20px 20px 22px 0;
}
.crs-figure dd {
margin: 0;
font: 800 clamp(30px, 6cqi, 40px) / 1 var(--crs-font);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
.crs-figure dt {
color: var(--crs-muted);
font: 600 14px/1.4 var(--crs-font);
overflow-wrap: anywhere;
}
/* ---- two columns of reasons from tablet width ---- */
@container (min-width: 640px) {
.crs-inner {
padding: 72px 32px;
}
.crs-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 48px;
}
/* An odd last reason spans the sheet instead of leaving a hole. */
.crs-list--odd .crs-row:last-child {
grid-column: 1 / -1;
}
.crs-figure + .crs-figure {
padding-left: 24px;
border-left: 1px solid var(--crs-rule);
}
}
/* ---- desktop: heading and paragraph share the top line ---- */
@container (min-width: 960px) {
.crs-inner {
padding: 96px var(--crs-grid-gutter, 40px);
}
.crs-head {
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
column-gap: 72px;
align-items: end;
}
.crs-head--photo {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
.crs-head--photo .crs-photo {
grid-column: 2;
grid-row: 1 / span 2;
margin: 0;
}
.crs-list {
margin-top: 56px;
column-gap: 72px;
}
}
@media (forced-colors: active) {
.crs-check {
border-color: CanvasText;
color: CanvasText;
}
}
</style>
===== END src/components/CheckedReasonsSection.astro =====
===== FILE (supporting): src/components/CheckedReasonsSection.md =====
# Checked reasons section
A "why choose us" section that works on words alone, laid out as a checklist
sheet: the heading across the top with the paragraph and action beside it,
then the reasons as a ruled two-column grid — each a ticked box, a short
reason and a line explaining it. A photo, an action and a ruled row of
figures are optional; none is needed for the section to look finished.
Made for a business that has to earn trust but has no award, statistic or
team photo to hand.
Catalog page: `/components/checked-reasons-section`
## Files required
- **`CheckedReasonsSection.astro`** — the whole component. No script, no images.
- `CheckedReasonsSection.md` — this file.
## Basic usage
```astro
<CheckedReasonsSection
eyebrow="Why choose us"
heading="Straight answers, careful work, fair prices."
body="We are a local team, and most of our work comes from repeat customers."
reasons={[
{ title: "Upfront pricing", detail: "You get the price before we start." },
{ title: "Our own technicians", detail: "No subcontractors." },
]}
cta={{ label: "Meet the team", href: "/about" }}
/>
```
## Props
| Prop | Type | Default | What it does |
| :--- | :--- | :--- | :--- |
| `heading` | `string` | **required** | The section heading. |
| `headingLevel` | `"h2" \| "h3"` | `"h2"` | Reason titles are one level below. |
| `eyebrow` | `string?` | `""` | Short line above the heading. |
| `body` | `string?` | `""` | A paragraph under the heading. |
| `reasons` | `{ title, detail? }[]?` | `[]` | The checked rows. None — copy renders alone. |
| `figures` | `{ value, label }[]?` | `[]` | Real figures under the reasons. See below. |
| `image` | `{ src, alt? } \| null` | `null` | A photo in the heading row. |
| `cta` | `{ label, href } \| null` | `null` | A text link under the paragraph. |
| `fontStylesheet` | `string?` | Manrope | `""` skips it. |
| `class`, `id` | | | Root attributes. |
## Trust data
No reason, figure, year, rating, award or certification has a default.
Figures are printed exactly as passed — nothing is counted, rounded or
assumed — and a figure missing its value or label is dropped. Pass only what
the business can stand behind; leave `figures` out rather than invent them.
## Layout and media
| Supplied | Result |
| :--- | :--- |
| Heading and copy only | The heading row alone. No empty sheet. |
| Reasons | A ruled grid: one column, two from 640px of the section's width; an odd last reason spans both. |
| A photo | From 960px it stands beside the heading; narrower, under the paragraph. |
| Figures | A ruled row of figures at the foot of the reasons card. |
## Call to action
`cta` is a quiet underlined text link — this is a supporting section. There
is no phone or button by design.
## Responsive behaviour
- One column below 960px: copy, photo, link, then the reasons card.
- Figures wrap to as many columns as fit (120px minimum each).
- Long text wraps anywhere rather than overflow.
## Motion
None.
## Accessibility
- The reasons are a list; each title is a real heading one level below the section's.
- Check marks are `aria-hidden`.
- Figures are a `<dl>`: the label is the term, the value its description.
- The link shows a 3px focus outline in the brand colour.
- `image.alt` defaults to `""` (decorative); pass one when the photo carries meaning.
## Tokens
`--crs-bg`, `--crs-panel`, `--crs-text`, `--crs-text-muted`, `--crs-brand`,
`--crs-border`, `--crs-family` — set on any ancestor to recolour it.
## Selection
Roles `about` and `features`. No market: ruled reasons suit any business, so
it is not tagged to one. Professional and minimal; split, no media by
default, with a `split / beside` alternate that needs an image; balanced; no
motion; supporting pressure. It needs no client material.
===== END src/components/CheckedReasonsSection.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.