Reasons ledger

Why choose us, set as a ledger rather than cards: heading and intro on the left, the verified reasons down the right as a numbered list with large serif numerals and hairlines. No icons, photos or figures.

aboutwhy-usreasonslisttypographicno-photo

Open preview in a new tab

Use this component

Three ways to get Reasons ledger into one of your own projects. The first two carry the component's files with them, so nothing has to fetch this page.

Start here

Placement prompt

The whole thing: what to do, where it goes, what must not change, and every one of the component's 1 file appended underneath with the path each belongs at. Paste it into Claude Code inside the destination project — it fetches nothing and needs nothing else.

Read it first — the files are added underneath when you copy

Add Reasons ledger from my Astro Component Library to this Astro project.

Library page, for reference only:
https://astro.baysixmedia.com/components/reasons-ledger/

Place it in:
[ENTER PAGE, FILE, OR ROUTE]

Position:
[ENTER WHERE IT SHOULD APPEAR]

Every file you need is appended below, each fenced with the path it belongs at. Write them there, relative to the project root. Do not import anything from the deployed library at runtime, and do not fetch the library page — the files below are the source of truth.

Adapt its demo content, links, colors, typography, and images to this project through documented props where possible. Preserve its responsive behavior, accessibility, interaction logic, reduced-motion behavior, and support for multiple instances. Avoid changing unrelated project code.

Test it at desktop, tablet, and mobile widths. Run the project's available check and build commands. Report the files changed and any differences from the library version. Do not commit or deploy.

Install kit

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: "Reasons ledger"
Library page: https://astro.baysixmedia.com/components/reasons-ledger/
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/ReasonsLedger.astro =====
---
/**
 * ReasonsLedger
 *
 * "Why choose us" set as a ledger rather than a card grid: the heading and a
 * short introduction hold the left column, and the reasons run down the
 * right as a numbered list — a large serif numeral, the reason, a hairline —
 * with no icons, photos, badges or figures. It works on the business's own
 * verified reasons alone.
 *
 * Renders nothing without reasons. Heading, eyebrow and intro render only
 * when given. No default reason, claim, figure or credential.
 *
 * Reads --rlg-* custom properties from any ancestor, with fallbacks.
 */

export interface ReasonsLedgerProps {
	eyebrow?: string;
	heading?: string;
	/** h2 by default. */
	headingLevel?: "h2" | "h3";
	/** One short paragraph under the heading. */
	intro?: string;
	/** The reasons, one line each. */
	reasons?: string[];
	fontStylesheet?: string;
	class?: string;
	id?: string;
}

interface Props extends ReasonsLedgerProps {}

const {
	eyebrow = "",
	heading = "",
	headingLevel = "h2",
	intro = "",
	reasons = [],
	fontStylesheet = "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Archivo:wght@500;600&display=swap",
	class: className,
	id,
} = Astro.props;

const Heading = headingLevel;
const items = reasons.filter((r) => typeof r === "string" && r.trim());
const pad = (n: number) => String(n).padStart(2, "0");
---

{items.length > 0 && fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
{
	items.length > 0 && (
		<section class:list={["rlg", className]} id={id}>
			<div class="rlg-inner">
				{(eyebrow.trim() || heading.trim() || intro.trim()) && (
					<div class="rlg-lead">
						{eyebrow.trim() && <p class="rlg-eyebrow">{eyebrow}</p>}
						{heading.trim() && <Heading class="rlg-heading">{heading}</Heading>}
						{intro.trim() && <p class="rlg-intro">{intro}</p>}
					</div>
				)}
				<ol class="rlg-list" role="list">
					{items.map((reason, i) => (
						<li class="rlg-item">
							<span class="rlg-num" aria-hidden="true">
								{pad(i + 1)}
							</span>
							<p class="rlg-reason">{reason}</p>
						</li>
					))}
				</ol>
			</div>
		</section>
	)
}

<style>
	.rlg {
		--rlg-bg: var(--rlg-surface, #fbfaf7);
		--rlg-ink-color: var(--rlg-ink, #1d2523);
		--rlg-muted-color: var(--rlg-muted, #5b6663);
		--rlg-accent-color: var(--rlg-accent, #2f5d4a);
		--rlg-hair: rgb(29 37 35 / 0.16);
		background: var(--rlg-bg);
		color: var(--rlg-ink-color);
		font-family: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	}

	.rlg-inner {
		display: grid;
		gap: clamp(28px, 5vw, 48px);
		max-width: 1200px;
		margin-inline: auto;
		padding: clamp(56px, 8vw, 112px) clamp(20px, 5vw, 48px);
	}

	.rlg-eyebrow {
		margin: 0 0 14px;
		font-size: 0.8125rem;
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--rlg-accent-color);
	}

	.rlg-heading {
		margin: 0;
		max-width: 16ch;
		font-family: "Fraunces", ui-serif, Georgia, serif;
		font-weight: 500;
		font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3.25rem);
		line-height: 1.08;
		letter-spacing: -0.015em;
	}

	.rlg-intro {
		margin: 18px 0 0;
		max-width: 40ch;
		font-size: 1.0625rem;
		line-height: 1.6;
		color: var(--rlg-muted-color);
	}

	.rlg-list {
		margin: 0;
		padding: 0;
		list-style: none;
		border-top: 1px solid var(--rlg-hair);
	}

	.rlg-item {
		display: grid;
		grid-template-columns: 3.25rem minmax(0, 1fr);
		align-items: baseline;
		gap: 16px;
		padding-block: clamp(18px, 2.5vw, 26px);
		border-bottom: 1px solid var(--rlg-hair);
	}

	.rlg-num {
		font-family: "Fraunces", ui-serif, Georgia, serif;
		font-weight: 600;
		font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
		line-height: 1;
		color: var(--rlg-accent-color);
		font-variant-numeric: lining-nums tabular-nums;
	}

	.rlg-reason {
		margin: 0;
		font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.375rem);
		font-weight: 500;
		line-height: 1.4;
		overflow-wrap: break-word;
	}

	@media (min-width: 900px) {
		.rlg-inner {
			grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
			column-gap: clamp(40px, 6vw, 96px);
			align-items: start;
		}
	}
</style>

===== END src/components/ReasonsLedger.astro =====

===== FILE (supporting): src/components/ReasonsLedger.md =====
# Reasons ledger

"Why choose us" set as a ledger rather than a card grid: heading and a short
introduction on the left, the business's verified reasons down the right as a
numbered list — a large serif numeral, the reason, a hairline. No icons,
photos, badges or figures.

Catalog page: `/components/reasons-ledger`

## Files required

- **`ReasonsLedger.astro`** — the whole component. No script, no images.
- `ReasonsLedger.md` — this file.

## Props

| Prop | Type | Default | What it does |
| :--- | :--- | :--- | :--- |
| `reasons` | `string[]` | `[]` | One line each. No reasons: nothing renders. |
| `eyebrow`, `heading`, `intro` | `string?` | `""` | Each renders only when given. |
| `headingLevel` | `"h2" \| "h3"` | `"h2"` | |
| `fontStylesheet`, `class`, `id` | | | Loads Fraunces and Archivo by default. |

The list is an `<ol>`; the numerals are decorative (`aria-hidden`) so the
order is not announced twice.

===== END src/components/ReasonsLedger.md =====

--- VERIFIED IN THE COMPONENT LIBRARY ---
Production-ready in the library.
Verified 2026-09-25 at 1440, 1280, 1024, 768, 640, 390, 360, 320px.
Passed: full-page context, keyboard, no javascript, reduced motion, two instances, no overflow, declarations corroborated, lifecycle.
Library source fingerprint: sha256:d55e41ca359dcac8a35aad77866d065d2d1aebb7991e9020f84b29b58372b7d7 — MATCHES 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.

Component reference

A fragment for a request you write yourself, e.g. “I want to add [paste] to Section 3 of my homepage.” It names the component, links its page, and fixes what must not change — the design build and its effects — while leaving branding and content open. It does not carry the code.

Read it first

“Reasons ledger” from my Astro Component Library:
https://astro.baysixmedia.com/components/reasons-ledger/

Use the existing library component as the implementation source. Preserve its design structure, layout, proportions, spacing system, responsive behavior, visual effects, animations, transitions, hover states, interactions, and accessibility.

The copy, colors, typography, images, and other content may be adapted to match the destination website. Do not redesign, simplify, or reinterpret the component’s underlying design build or effects.

Component readiness

Judged on recorded evidence, not on how it looks in the frame above. A description of a component is not a result.

Interactivity: Static
Profile: core only
Installation files: 1 required + 1 supporting
Verified: 2026-09-25
Client navigation: Not applicable — ships no script
Source fingerprint: Matches the verified source
Production ready: Yes

Production-ready component

Every required check passed against the code below, and the recorded fingerprint still matches it.

Verified 2026-09-25 at 1440, 1280, 1024, 768, 640, 390, 360, 320px

Full-page contextpass
Keyboard — declared to contain nothing focusablenot-applicable
No JavaScriptpass
Reduced motion — declared to have no motionnot-applicable
Two instancespass
No overflowpass
Declarations corroboratedpass
Lifecycle — declared to ship no scriptnot-applicable

7 verification notes

Run 2026-09-25 in Chromium against the dev server's generic verification fixture (/integration-test/component/<slug>), two instances per page. Chromium only; no WebKit or Gecko claim is made.
Overflow: scrollWidth === clientWidth at 320, 360, 390, 640, 768, 1024, 1280 and 1440.
Two instances: independent ids (seeded from the fixture's id), no duplicate ids on the page.
No JavaScript: identical render, because the component ships none (no script inside either root).
Content safety: omitted props render nothing, checked by src/lib/content-safety.test.ts.
The list is an <ol>; numerals are aria-hidden. The second instance (no lead column, two reasons) renders the list alone.
Keyboard not-applicable, licensed by hasFocusableContent: false (0 focusable elements observed). Reduced motion not-applicable, licensed by hasMotion: false (0 transitions, 0 animations observed).

Open the verification fixture

src/components/library/ReasonsLedger.astro

one fileNo imports, no companion files, no packages. Copy ReasonsLedger.astro into any Astro project's components folder and render it.

---
/**
 * ReasonsLedger
 *
 * "Why choose us" set as a ledger rather than a card grid: the heading and a
 * short introduction hold the left column, and the reasons run down the
 * right as a numbered list — a large serif numeral, the reason, a hairline —
 * with no icons, photos, badges or figures. It works on the business's own
 * verified reasons alone.
 *
 * Renders nothing without reasons. Heading, eyebrow and intro render only
 * when given. No default reason, claim, figure or credential.
 *
 * Reads --rlg-* custom properties from any ancestor, with fallbacks.
 */

export interface ReasonsLedgerProps {
	eyebrow?: string;
	heading?: string;
	/** h2 by default. */
	headingLevel?: "h2" | "h3";
	/** One short paragraph under the heading. */
	intro?: string;
	/** The reasons, one line each. */
	reasons?: string[];
	fontStylesheet?: string;
	class?: string;
	id?: string;
}

interface Props extends ReasonsLedgerProps {}

const {
	eyebrow = "",
	heading = "",
	headingLevel = "h2",
	intro = "",
	reasons = [],
	fontStylesheet = "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Archivo:wght@500;600&display=swap",
	class: className,
	id,
} = Astro.props;

const Heading = headingLevel;
const items = reasons.filter((r) => typeof r === "string" && r.trim());
const pad = (n: number) => String(n).padStart(2, "0");
---

{items.length > 0 && fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
{
	items.length > 0 && (
		<section class:list={["rlg", className]} id={id}>
			<div class="rlg-inner">
				{(eyebrow.trim() || heading.trim() || intro.trim()) && (
					<div class="rlg-lead">
						{eyebrow.trim() && <p class="rlg-eyebrow">{eyebrow}</p>}
						{heading.trim() && <Heading class="rlg-heading">{heading}</Heading>}
						{intro.trim() && <p class="rlg-intro">{intro}</p>}
					</div>
				)}
				<ol class="rlg-list" role="list">
					{items.map((reason, i) => (
						<li class="rlg-item">
							<span class="rlg-num" aria-hidden="true">
								{pad(i + 1)}
							</span>
							<p class="rlg-reason">{reason}</p>
						</li>
					))}
				</ol>
			</div>
		</section>
	)
}

<style>
	.rlg {
		--rlg-bg: var(--rlg-surface, #fbfaf7);
		--rlg-ink-color: var(--rlg-ink, #1d2523);
		--rlg-muted-color: var(--rlg-muted, #5b6663);
		--rlg-accent-color: var(--rlg-accent, #2f5d4a);
		--rlg-hair: rgb(29 37 35 / 0.16);
		background: var(--rlg-bg);
		color: var(--rlg-ink-color);
		font-family: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	}

	.rlg-inner {
		display: grid;
		gap: clamp(28px, 5vw, 48px);
		max-width: 1200px;
		margin-inline: auto;
		padding: clamp(56px, 8vw, 112px) clamp(20px, 5vw, 48px);
	}

	.rlg-eyebrow {
		margin: 0 0 14px;
		font-size: 0.8125rem;
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--rlg-accent-color);
	}

	.rlg-heading {
		margin: 0;
		max-width: 16ch;
		font-family: "Fraunces", ui-serif, Georgia, serif;
		font-weight: 500;
		font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3.25rem);
		line-height: 1.08;
		letter-spacing: -0.015em;
	}

	.rlg-intro {
		margin: 18px 0 0;
		max-width: 40ch;
		font-size: 1.0625rem;
		line-height: 1.6;
		color: var(--rlg-muted-color);
	}

	.rlg-list {
		margin: 0;
		padding: 0;
		list-style: none;
		border-top: 1px solid var(--rlg-hair);
	}

	.rlg-item {
		display: grid;
		grid-template-columns: 3.25rem minmax(0, 1fr);
		align-items: baseline;
		gap: 16px;
		padding-block: clamp(18px, 2.5vw, 26px);
		border-bottom: 1px solid var(--rlg-hair);
	}

	.rlg-num {
		font-family: "Fraunces", ui-serif, Georgia, serif;
		font-weight: 600;
		font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
		line-height: 1;
		color: var(--rlg-accent-color);
		font-variant-numeric: lining-nums tabular-nums;
	}

	.rlg-reason {
		margin: 0;
		font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.375rem);
		font-weight: 500;
		line-height: 1.4;
		overflow-wrap: break-word;
	}

	@media (min-width: 900px) {
		.rlg-inner {
			grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
			column-gap: clamp(40px, 6vw, 96px);
			align-items: start;
		}
	}
</style>