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: "Footnoted services"
Library page: https://astro.baysixmedia.com/components/footnoted-services/
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/FootnotedServices.astro =====
---
/**
* FootnotedServices (candidate)
*
* A services section written as one sentence. The business says what it does
* in a single centred display-serif line of prose, and each service in that
* sentence is an inline link marked with a small reference numeral. Under a
* hairline, the matching footnotes give each service its name, a short
* description and its own text action. Hovering or focusing a service in the
* sentence lights its footnote, and the reverse. A centred closing line ends
* with a call button and one text action. No cards, icons, photos or rows.
*
* The sentence is assembled from the caller's words: `lead` + the services'
* `phrase` (or title) joined with commas and `conjunction` + `tail`. A full
* stop is added only when no tail is given. It reads well from one service
* ("We do one job: …") to eight.
*
* Truth: nothing renders that was not passed — no services, no section. The
* sentence, descriptions and note are the caller's copy from verified facts;
* the component adds none. Links go through safeHref; tel: is built from the
* supplied number's digits.
*
* Responsive (the section's own width, container queries): below 640px the
* sentence and footnotes range left for reading, footnotes stack with the
* numeral hanging in a gutter, and the call button spans the width. From
* 640px the sentence is centred and footnotes go two-up; from 1024px they
* sit in one row for up to four services (three columns for five or six,
* four for seven or eight). Five or more services set the sentence smaller.
*
* Hooks read (never declared): --fns-bg, --fns-text, --fns-text-muted,
* --fns-brand, --fns-brand-text, --fns-tint, --fns-border, --fns-family,
* --fns-display, --fns-grid-max, --fns-grid-gutter.
* No script: the sentence–footnote link is CSS (:has).
*/
export interface FootnotedServiceItem {
title: string;
/** How the service reads inside the sentence ("sports injuries"); the title when omitted. */
phrase?: string;
description?: string;
href?: string;
/** Footnote link text; "Read more" (named for the service to assistive tech) when omitted. */
linkLabel?: string;
}
export interface FootnotedServicesProps {
heading: string;
headingLevel?: "h2" | "h3";
/** Words before the list of services ("Northgate Physio helps adults recover from"). */
lead?: string;
services?: readonly FootnotedServiceItem[];
/** Words after the list ("— each plan built from a full first assessment."). */
tail?: string;
/** Joins the last two services; "and" by default. */
conjunction?: string;
/** A line above the closing actions. */
note?: string;
cta?: { label: string; href: string } | null;
/** A real number for a call button. No number, no button. */
phone?: { number: string; label?: string } | null;
fontStylesheet?: string;
class?: string;
id?: string;
}
interface Props extends FootnotedServicesProps {}
const {
heading,
headingLevel = "h2",
lead = "",
services = [],
tail = "",
conjunction = "and",
note = "",
cta = null,
phone = null,
fontStylesheet = "https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&display=swap",
class: className,
id,
} = Astro.props;
const SAFE = /^(?:https?:|mailto:|tel:|[#/.?])/i;
/* An unsafe or empty link is dropped, never replaced with "#". */
const safeHref = (href: string | undefined) => (href && SAFE.test(href.trim()) ? href.trim() : "");
const items = (services ?? [])
.filter((s) => s && typeof s.title === "string" && s.title.trim())
.slice(0, 8)
.map((s, i) => {
const title = s.title.trim();
return {
n: String(i + 1),
title,
phrase: s.phrase?.trim() || title,
description: s.description?.trim() ?? "",
href: safeHref(s.href),
/* No label: "Read more" on screen, named for its service to assistive tech. */
linkLabel: s.linkLabel?.trim() || null,
};
});
const count = items.length;
/* The sentence: lead, the services joined as prose, tail. */
type Segment = { kind: "text"; text: string } | { kind: "ref"; item: (typeof items)[number] };
const segments: Segment[] = [];
const leadText = lead.trim();
const tailText = tail.trim();
const joinWord = conjunction.trim() || "and";
if (leadText) segments.push({ kind: "text", text: `${leadText} ` });
items.forEach((item, i) => {
if (i > 0) segments.push({ kind: "text", text: i === count - 1 ? ` ${joinWord} ` : ", " });
segments.push({ kind: "ref", item });
});
if (tailText) segments.push({ kind: "text", text: /^[,.;:!?)]/.test(tailText) ? tailText : ` ${tailText}` });
else segments.push({ kind: "text", text: "." });
const desktopCols = count <= 4 ? count : count <= 6 ? 3 : 4;
const tabletCols = count === 1 ? 1 : count === 3 ? 3 : 2;
const noteText = note.trim();
const number = phone?.number?.trim() ?? "";
const digits = number.replace(/\D/g, "");
const callHref = digits ? `tel:${number.startsWith("+") ? "+" : ""}${digits}` : "";
const ctaHref = cta?.label?.trim() ? safeHref(cta.href) : "";
const hasActions = Boolean(callHref || ctaHref);
const hasFoot = Boolean(noteText || hasActions);
const Heading = headingLevel;
const NoteTitle = headingLevel === "h2" ? "h3" : "h4";
---
{count > 0 && (
<>
{fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
<section class:list={["fns", { "fns--dense": count >= 5, "fns--single": count === 1, "fns--three": count === 3 }, className]} id={id} style={`--fns-cols-d: ${desktopCols}; --fns-cols-t: ${tabletCols};`}>
<div class="fns-inner">
<Heading class="fns-heading">{heading}</Heading>
<p class="fns-sentence">{segments.map((s) => s.kind === "text" ? s.text : s.item.href ? (<a class="fns-ref" href={s.item.href} data-n={s.item.n}><span class="fns-phrase">{s.item.phrase}</span><sup class="fns-mark" aria-hidden="true">{s.item.n}</sup></a>) : (<span class="fns-ref" data-n={s.item.n}><span class="fns-phrase">{s.item.phrase}</span><sup class="fns-mark" aria-hidden="true">{s.item.n}</sup></span>))}</p>
<ol class="fns-notes" role="list">
{items.map((item) => (
<li class="fns-note" data-n={item.n}>
<span class="fns-num" aria-hidden="true">{item.n}</span>
<div class="fns-body">
<NoteTitle class="fns-title">{item.title}</NoteTitle>
{item.description && <p class="fns-desc">{item.description}</p>}
{item.href && (
<a class="fns-link" href={item.href}>
<span class="fns-link-text">{item.linkLabel ?? "Read more"}{!item.linkLabel && <span class="fns-sr"> about {item.title}</span>}</span>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M4 12h15M13 6l6 6-6 6" />
</svg>
</a>
)}
</div>
</li>
))}
</ol>
{hasFoot && (
<div class="fns-foot">
{noteText && <p class="fns-closing">{noteText}</p>}
{hasActions && (
<div class="fns-actions">
{callHref && (
<a class="fns-call" href={callHref}>
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M6.6 3.5h3l1.5 4-2 1.3a11 11 0 0 0 6.1 6.1l1.3-2 4 1.5v3a2 2 0 0 1-2.2 2A17 17 0 0 1 4.6 5.7a2 2 0 0 1 2-2.2Z" />
</svg>
<span>{phone?.label?.trim() || "Call"} <span class="fns-nowrap">{number}</span></span>
</a>
)}
{ctaHref && (
<a class="fns-cta" href={ctaHref}>
{cta?.label?.trim()}
</a>
)}
</div>
)}
</div>
)}
</div>
</section>
</>
)}
<style>
.fns {
--fns-surface: var(--fns-bg, #f5f2ec);
--fns-ink: var(--fns-text, #16181d);
--fns-soft: var(--fns-text-muted, #474b53);
--fns-accent: var(--fns-brand, #9c3a1a);
--fns-accent-ink: var(--fns-brand-text, #ffffff);
--fns-mark-bg: var(--fns-tint, #efd8c8);
--fns-line: var(--fns-border, #d4ccc0);
--fns-font: var(--fns-family, "Instrument Sans", ui-sans-serif, system-ui, sans-serif);
--fns-font-display: var(--fns-display, "Newsreader", "Iowan Old Style", Georgia, serif);
container-type: inline-size;
background: var(--fns-surface);
color: var(--fns-ink);
font-family: var(--fns-font);
}
.fns *,
.fns *::before,
.fns *::after {
box-sizing: border-box;
}
.fns-inner {
max-width: var(--fns-grid-max, 1232px);
margin: 0 auto;
padding: 64px 20px 72px;
}
/* ---- heading: a quiet label over the sentence ---- */
.fns-heading {
display: flex;
align-items: center;
gap: 14px;
margin: 0;
color: var(--fns-ink);
font: 600 17px/1.35 var(--fns-font);
letter-spacing: 0;
overflow-wrap: anywhere;
}
.fns-heading::before {
content: "";
flex: none;
width: 28px;
height: 2px;
background: var(--fns-accent);
}
/* ---- the sentence ---- */
.fns-sentence {
max-width: 19em;
margin: 28px 0 0;
color: var(--fns-ink);
font-family: var(--fns-font-display);
font-size: clamp(30px, 8.4cqi, 38px);
font-weight: 400;
font-optical-sizing: auto;
line-height: 1.2;
letter-spacing: -0.012em;
text-wrap: pretty;
overflow-wrap: anywhere;
}
.fns--dense .fns-sentence {
font-size: clamp(27px, 7.4cqi, 32px);
}
.fns-ref {
color: var(--fns-accent);
font-style: italic;
font-weight: 500;
text-decoration: none;
}
/* A service without a page reads in ink: only a link takes the accent. */
span.fns-ref {
color: var(--fns-ink);
}
/* Two layers: the underline (links only) and the marker that grows behind the words when active. */
.fns-phrase {
--fns-underline: transparent;
background-image: linear-gradient(var(--fns-underline), var(--fns-underline)), linear-gradient(var(--fns-mark-bg), var(--fns-mark-bg));
background-repeat: no-repeat;
background-position: 0 94%, 0 94%;
background-size: 100% 0.055em, 100% 0;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
transition: background-size 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
a.fns-ref .fns-phrase {
--fns-underline: var(--fns-accent);
}
.fns-mark {
position: relative;
top: -0.1em;
margin-left: 0.08em;
color: var(--fns-accent);
font: 600 0.4em/1 var(--fns-font);
font-style: normal;
font-variant-numeric: tabular-nums;
vertical-align: super;
}
a.fns-ref:focus-visible {
outline: 3px solid var(--fns-accent);
outline-offset: 4px;
border-radius: 3px;
}
/* ---- footnotes ---- */
.fns-notes {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 30px;
margin: 44px 0 0;
padding: 32px 0 0;
border-top: 1px solid var(--fns-line);
list-style: none;
}
.fns-note {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
column-gap: 14px;
align-items: start;
min-width: 0;
}
.fns-num {
display: grid;
place-items: center;
width: 30px;
height: 30px;
margin-top: -2px;
border: 1.5px solid var(--fns-accent);
border-radius: 50%;
color: var(--fns-accent);
font: 600 14px/1 var(--fns-font);
font-variant-numeric: tabular-nums;
transition: background-color 0.25s ease, color 0.25s ease;
}
.fns-body {
min-width: 0;
}
.fns-title {
margin: 0;
color: var(--fns-ink);
font: 600 19px/1.3 var(--fns-font);
letter-spacing: -0.01em;
text-wrap: pretty;
overflow-wrap: anywhere;
transition: color 0.25s ease;
}
.fns-desc {
max-width: 46ch;
margin: 8px 0 0;
color: var(--fns-soft);
font: 400 16px/1.6 var(--fns-font);
overflow-wrap: anywhere;
}
/* Inline, so a wrapping label keeps its arrow after the last word. */
.fns-link {
position: relative;
display: inline-block;
min-height: 44px;
margin-top: 2px;
padding: 11px 0;
color: var(--fns-ink);
font: 600 15px/1.45 var(--fns-font);
text-decoration: none;
overflow-wrap: anywhere;
}
.fns-link-text {
text-decoration: underline;
text-decoration-color: var(--fns-line);
text-decoration-thickness: 2px;
text-underline-offset: 6px;
transition: text-decoration-color 0.2s ease;
}
.fns-sr {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.fns-link svg {
display: inline-block;
width: 18px;
height: 18px;
margin-left: 8px;
vertical-align: -4px;
fill: none;
stroke: var(--fns-accent);
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.25s ease;
}
.fns-link:hover .fns-link-text,
.fns-link:focus-visible .fns-link-text {
text-decoration-color: var(--fns-accent);
}
.fns-link:hover svg,
.fns-link:focus-visible svg {
transform: translateX(3px);
}
.fns-link:focus-visible {
outline: 3px solid var(--fns-accent);
outline-offset: 2px;
border-radius: 2px;
}
/* ---- the link between a service in the sentence and its footnote ---- */
.fns-ref:hover .fns-phrase,
a.fns-ref:focus-visible .fns-phrase,
.fns:has(.fns-note[data-n="1"]:hover, .fns-note[data-n="1"] .fns-link:focus-visible) .fns-ref[data-n="1"] .fns-phrase,
.fns:has(.fns-note[data-n="2"]:hover, .fns-note[data-n="2"] .fns-link:focus-visible) .fns-ref[data-n="2"] .fns-phrase,
.fns:has(.fns-note[data-n="3"]:hover, .fns-note[data-n="3"] .fns-link:focus-visible) .fns-ref[data-n="3"] .fns-phrase,
.fns:has(.fns-note[data-n="4"]:hover, .fns-note[data-n="4"] .fns-link:focus-visible) .fns-ref[data-n="4"] .fns-phrase,
.fns:has(.fns-note[data-n="5"]:hover, .fns-note[data-n="5"] .fns-link:focus-visible) .fns-ref[data-n="5"] .fns-phrase,
.fns:has(.fns-note[data-n="6"]:hover, .fns-note[data-n="6"] .fns-link:focus-visible) .fns-ref[data-n="6"] .fns-phrase,
.fns:has(.fns-note[data-n="7"]:hover, .fns-note[data-n="7"] .fns-link:focus-visible) .fns-ref[data-n="7"] .fns-phrase,
.fns:has(.fns-note[data-n="8"]:hover, .fns-note[data-n="8"] .fns-link:focus-visible) .fns-ref[data-n="8"] .fns-phrase {
background-size: 100% 0.055em, 100% 0.42em;
}
.fns-note:hover .fns-num,
.fns-note:has(.fns-link:focus-visible) .fns-num,
.fns:has(.fns-ref[data-n="1"]:is(:hover, :focus-visible)) .fns-note[data-n="1"] .fns-num,
.fns:has(.fns-ref[data-n="2"]:is(:hover, :focus-visible)) .fns-note[data-n="2"] .fns-num,
.fns:has(.fns-ref[data-n="3"]:is(:hover, :focus-visible)) .fns-note[data-n="3"] .fns-num,
.fns:has(.fns-ref[data-n="4"]:is(:hover, :focus-visible)) .fns-note[data-n="4"] .fns-num,
.fns:has(.fns-ref[data-n="5"]:is(:hover, :focus-visible)) .fns-note[data-n="5"] .fns-num,
.fns:has(.fns-ref[data-n="6"]:is(:hover, :focus-visible)) .fns-note[data-n="6"] .fns-num,
.fns:has(.fns-ref[data-n="7"]:is(:hover, :focus-visible)) .fns-note[data-n="7"] .fns-num,
.fns:has(.fns-ref[data-n="8"]:is(:hover, :focus-visible)) .fns-note[data-n="8"] .fns-num {
background: var(--fns-accent);
color: var(--fns-accent-ink);
}
.fns:has(.fns-ref[data-n="1"]:is(:hover, :focus-visible)) .fns-note[data-n="1"] .fns-title,
.fns:has(.fns-ref[data-n="2"]:is(:hover, :focus-visible)) .fns-note[data-n="2"] .fns-title,
.fns:has(.fns-ref[data-n="3"]:is(:hover, :focus-visible)) .fns-note[data-n="3"] .fns-title,
.fns:has(.fns-ref[data-n="4"]:is(:hover, :focus-visible)) .fns-note[data-n="4"] .fns-title,
.fns:has(.fns-ref[data-n="5"]:is(:hover, :focus-visible)) .fns-note[data-n="5"] .fns-title,
.fns:has(.fns-ref[data-n="6"]:is(:hover, :focus-visible)) .fns-note[data-n="6"] .fns-title,
.fns:has(.fns-ref[data-n="7"]:is(:hover, :focus-visible)) .fns-note[data-n="7"] .fns-title,
.fns:has(.fns-ref[data-n="8"]:is(:hover, :focus-visible)) .fns-note[data-n="8"] .fns-title {
color: var(--fns-accent);
}
/* ---- closing line and actions ---- */
.fns-foot {
display: grid;
gap: 18px;
margin-top: 44px;
padding-top: 32px;
border-top: 1px solid var(--fns-line);
}
.fns-closing {
max-width: 62ch;
margin: 0;
color: var(--fns-ink);
font: 400 17px/1.55 var(--fns-font);
text-wrap: pretty;
overflow-wrap: anywhere;
}
.fns-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 28px;
}
.fns-call {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
min-height: 52px;
padding: 12px 26px;
border-radius: 999px;
background: var(--fns-accent);
color: var(--fns-accent-ink);
font: 600 16px/1.25 var(--fns-font);
text-align: center;
text-decoration: none;
overflow-wrap: anywhere;
transition: background-color 0.2s ease, color 0.2s ease;
}
.fns-call svg {
flex: none;
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linejoin: round;
}
.fns-nowrap {
white-space: nowrap;
}
.fns-call:hover {
background: var(--fns-ink);
color: var(--fns-surface);
}
.fns-cta {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--fns-ink);
font: 600 16px/1.3 var(--fns-font);
text-decoration: underline;
text-decoration-color: var(--fns-accent);
text-decoration-thickness: 2px;
text-underline-offset: 6px;
overflow-wrap: anywhere;
transition: text-underline-offset 0.2s ease;
}
.fns-cta:hover {
text-underline-offset: 3px;
}
.fns-call:focus-visible,
.fns-cta:focus-visible {
outline: 3px solid var(--fns-accent);
outline-offset: 3px;
}
/* ---- from 640px: centred sentence, footnotes two-up ---- */
@container (min-width: 640px) {
.fns-inner {
padding: 96px 32px 104px;
text-align: center;
}
.fns-heading {
justify-content: center;
}
.fns-heading::after {
content: "";
flex: none;
width: 28px;
height: 2px;
background: var(--fns-accent);
}
.fns-sentence {
margin: 32px auto 0;
font-size: clamp(38px, 6.2cqi, 64px);
line-height: 1.14;
text-wrap: balance;
}
.fns--dense .fns-sentence {
max-width: 22em;
font-size: clamp(32px, 4.2cqi, 46px);
line-height: 1.18;
}
.fns-notes {
grid-template-columns: repeat(var(--fns-cols-t, 2), minmax(0, 1fr));
gap: 40px 48px;
margin-top: 64px;
padding-top: 40px;
text-align: left;
}
.fns--single .fns-notes {
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
.fns-foot {
justify-items: center;
margin-top: 56px;
padding-top: 0;
border-top: 0;
}
.fns-closing {
text-wrap: balance;
}
.fns-actions {
justify-content: center;
}
.fns-call {
width: auto;
}
}
/* Three services share one row on a tablet: the numeral sits above the name to free the width. */
@container (min-width: 640px) and (max-width: 1023.98px) {
.fns--three .fns-notes {
column-gap: 32px;
}
.fns--three .fns-note {
grid-template-columns: minmax(0, 1fr);
row-gap: 14px;
}
}
/* ---- from 1024px: footnotes in one row (up to four) ---- */
@container (min-width: 1024px) {
.fns-inner {
padding: 128px var(--fns-grid-gutter, 48px) 136px;
}
.fns-sentence {
margin-top: 36px;
}
.fns-notes {
grid-template-columns: repeat(var(--fns-cols-d, 3), minmax(0, 1fr));
gap: 44px 56px;
margin-top: 88px;
}
.fns-foot {
margin-top: 72px;
}
}
@media (prefers-reduced-motion: reduce) {
.fns-phrase,
.fns-num,
.fns-title,
.fns-link-text,
.fns-link svg,
.fns-call,
.fns-cta {
transition: none;
}
}
@media (forced-colors: active) {
a.fns-ref .fns-phrase {
text-decoration: underline;
}
.fns-heading::before,
.fns-heading::after {
background: CanvasText;
}
.fns-num {
border-color: CanvasText;
}
.fns-call {
border: 1px solid ButtonText;
}
.fns-link svg {
stroke: currentColor;
}
}
</style>
===== END src/components/FootnotedServices.astro =====
===== FILE (supporting): src/components/FootnotedServices.md =====
# Footnoted services
A services section written as one sentence: a centred display-serif line of prose in which each service is an italic accent link with a reference numeral, then matching footnotes under a hairline — name, short description and a text action each — linked to the sentence on hover and focus. Optional closing line with a call button and a text action. One to eight services; no cards, icons or photos.
## Integration
- A short h2 label by default; footnote titles are one level down. The statement is a paragraph.
- No services, no section. One to eight services; a ninth and beyond are not shown.
- The sentence is the caller's copy: lead, phrases and tail from verified facts only. The component adds commas, the conjunction and a closing full stop when no tail is given — nothing else.
- The call button renders only from a real `phone.number` (tel: built from its digits); the text action only from `cta`.
- Container queries: ranged left below 640px; centred with footnotes two-up (three-up for three) from 640px; footnotes in one row (up to four) from 1024px.
- Reads --fns-bg/-text/-text-muted/-brand/-brand-text/-tint/-border/-family/-display and --fns-grid-max/-grid-gutter.
- Loads Newsreader and Instrument Sans from Google Fonts by default. Pass fontStylesheet="" on a site that loads its own fonts.
## Provenance
Staged as candidate `footnoted-services` (Step 28) and admitted through the candidate pipeline. Source type: original. References (direction only): none. Quality history: quality/candidates/records/footnoted-services.json.
===== END src/components/FootnotedServices.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.