The 2 files 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: "Numbered FAQ photo"
Library page: https://astro.baysixmedia.com/components/numbered-faq-photo/
Files: 2 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/NumberedFaqPhoto.astro =====
---
/**
* NumberedFaqPhoto
*
* A centred FAQ: outlined eyebrow and a big uppercase heading, then a pale
* panel of numbered question cards beside a large photo. Each question is a
* native <details> in an exclusive group, so opening one closes the others;
* its round orange "+" turns into an "×" when open. Where the browser supports
* it, the answer's height animates open and closed.
*
* No script except the appear-on-scroll observer; the accordion works without
* JavaScript.
*
* Heading syntax: wrap the orange words in asterisks.
*
* Reads the --tw-* tokens from any ancestor, with fallbacks.
*/
export interface NumberedFaqItem {
question: string;
answer: string;
}
export interface NumberedFaqPhotoProps {
eyebrow?: string;
heading?: string;
headingLevel?: "h2" | "h3";
items?: NumberedFaqItem[];
/** Prefix each question with "01.", "02."... */
numbered?: boolean;
/** 1-based index of the question open on load. 0 opens none. */
initialOpen?: number;
/** `src: ""` renders a labelled placeholder; `null` drops it and the panel spans the row. */
image?: { src?: string; alt?: string } | null;
background?: string;
fontStylesheet?: string;
class?: string;
id?: string;
}
interface Props extends NumberedFaqPhotoProps {}
const {
eyebrow = "FAQ",
heading = "",
headingLevel = "h2",
items = [],
numbered = true,
initialOpen = 1,
image: imageProp,
background = "#ffffff",
fontStylesheet = "https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800;900&family=Noto+Sans:wght@400;500;600;700&family=Inter:wght@500;600;700&display=swap",
class: className,
id,
} = Astro.props;
/* No photo unless one is passed: omitted or `null` lets the panel span the
row. `{ src: "" }` still asks for the labelled placeholder. */
const image = imageProp ? { src: "", alt: "", ...imageProp } : null;
if (imageProp && imageProp.src !== undefined && imageProp.alt === undefined && image) image.alt = "";
/* A card needs a question and an answer; anything short of that is dropped.
No cards, no section — the eyebrow and heading alone say nothing. */
const list = items.filter(
(item) =>
typeof item?.question === "string" &&
item.question.trim() !== "" &&
typeof item.answer === "string" &&
item.answer.trim() !== "",
);
const group = `${id ?? "nfp"}-${Math.random().toString(36).slice(2, 8)}`;
const words = heading
.split("*")
.flatMap((seg, i) => seg.split(/\s+/).filter(Boolean).map((w) => ({ w, accent: i % 2 === 1 })));
const Heading = headingLevel;
const pad = (n: number) => String(n).padStart(2, "0");
---
{list.length > 0 && (<>{fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
<section class:list={["nfp", className]} id={id} style={`--nfp-band:${background}`} data-nfp-root>
<div class="nfp-inner">
{(eyebrow || words.length > 0) && (
<div class="nfp-head">
{eyebrow && <p class="nfp-eyebrow">{eyebrow}</p>}
{words.length > 0 && (
<Heading class="nfp-heading" data-nfp-reveal="words">
{
words.map((t, i) => (
<>
{i > 0 && " "}
<span class:list={["nfp-w", { "nfp-accent": t.accent }]} style={`--i:${i}`}>
{t.w}
</span>
</>
))
}
</Heading>
)}
</div>
)}
<div class:list={["nfp-body", { "nfp-body--solo": !image }]}>
<div class="nfp-panel" data-nfp-reveal="up">
{
list.map((item, i) => (
<details class="nfp-item" name={group} open={initialOpen === i + 1}>
<summary class="nfp-q">
<span>
{numbered && `${pad(i + 1)}. `}
{item.question}
</span>
<span class="nfp-ic" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path d="M12 6v12M6 12h12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
</svg>
</span>
</summary>
<div class="nfp-a">
<p>{item.answer}</p>
</div>
</details>
))
}
</div>
{
image && (
<div class="nfp-media" data-nfp-reveal="up" style="--d:0.12s">
{image.src ? (
<img src={image.src} alt={image.alt} width="1260" height="1056" loading="lazy" decoding="async" />
) : (
<div class="nfp-ph" role="img" aria-label="Image placeholder">
<span>Image · 1260 × 1056</span>
</div>
)}
</div>
)
}
</div>
</div>
</section></>)}
<style>
.nfp {
--nfp-navy: var(--tw-navy, #0b4654);
--nfp-accent: var(--tw-accent, #ff6d45);
--nfp-surface: var(--tw-surface, #f0f8fa);
--nfp-muted: var(--tw-muted, #616161);
--nfp-display: var(--tw-display, Outfit, ui-sans-serif, system-ui, sans-serif);
--nfp-body: var(--tw-body, "Noto Sans", ui-sans-serif, system-ui, sans-serif);
--nfp-ease: cubic-bezier(0.44, 0, 0.56, 1);
background: var(--nfp-band);
color: var(--nfp-navy);
font-family: var(--nfp-body);
}
.nfp *,
.nfp *::before,
.nfp *::after {
box-sizing: border-box;
}
.nfp-inner {
max-width: 1440px;
margin: 0 auto;
padding: 64px 16px;
}
.nfp-head {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
text-align: center;
}
.nfp-eyebrow {
margin: 0;
padding: 4px 14px;
border: 1px solid var(--nfp-accent);
border-radius: 999px;
color: var(--nfp-accent);
font: 500 15px/24px var(--nfp-body);
letter-spacing: -0.3px;
text-transform: uppercase;
}
.nfp-heading {
max-width: 620px;
margin: 0;
font: 700 28px/1.2 var(--nfp-display);
letter-spacing: -0.56px;
text-transform: uppercase;
}
.nfp-w {
display: inline-block;
}
.nfp-accent {
color: var(--nfp-accent);
}
.nfp-body {
display: grid;
gap: 24px;
margin-top: 40px;
}
.nfp-panel {
display: grid;
align-content: start;
gap: 16px;
padding: 16px;
border-radius: 10px;
background: var(--nfp-surface);
}
.nfp-item {
border-radius: 10px;
background: #fff;
}
.nfp-q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px;
list-style: none;
cursor: pointer;
font: 600 18px/1.5 var(--nfp-body);
letter-spacing: -0.36px;
}
.nfp-q::-webkit-details-marker {
display: none;
}
.nfp-q:focus-visible {
outline: 2px solid var(--nfp-accent);
outline-offset: 2px;
border-radius: 10px;
}
.nfp-ic {
display: grid;
flex: none;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--nfp-accent);
color: #fff;
transition: transform 0.35s var(--nfp-ease);
}
.nfp-ic svg {
width: 20px;
height: 20px;
}
.nfp-item[open] .nfp-ic {
transform: rotate(45deg);
}
.nfp-a p {
margin: 0;
padding: 0 20px 24px;
color: var(--nfp-muted);
font: 400 16px/25.6px var(--nfp-body);
letter-spacing: -0.32px;
}
/* Height animation where the browser can animate to auto. */
@supports selector(::details-content) {
.nfp-item {
interpolate-size: allow-keywords;
}
.nfp-item::details-content {
height: 0;
overflow: clip;
transition:
height 0.4s var(--nfp-ease),
content-visibility 0.4s allow-discrete;
}
.nfp-item[open]::details-content {
height: auto;
}
}
.nfp-media {
min-height: 300px;
overflow: hidden;
border-radius: 15px;
}
.nfp-media img,
.nfp-ph {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.nfp-ph {
display: grid;
place-items: center;
min-height: 300px;
background: repeating-linear-gradient(135deg, #e3eef1 0 12px, #edf5f7 12px 24px);
font: 500 13px/1.4 var(--nfp-body);
}
[data-nfp-reveal="up"] {
transition:
opacity 0.8s var(--nfp-ease) var(--d, 0s),
transform 0.8s var(--nfp-ease) var(--d, 0s);
}
.nfp[data-nfp-ready] [data-nfp-reveal="up"]:not([data-in]) {
opacity: 0;
transform: translateY(80px);
}
.nfp-w {
transition:
opacity 0.6s var(--nfp-ease) calc(var(--i) * 0.06s),
transform 0.6s var(--nfp-ease) calc(var(--i) * 0.06s);
}
.nfp[data-nfp-ready] [data-nfp-reveal="words"]:not([data-in]) .nfp-w {
opacity: 0;
transform: translateY(10px);
}
@media (min-width: 810px) {
.nfp-inner {
padding: 90px 40px;
}
.nfp-heading {
font-size: 38px;
letter-spacing: -0.76px;
}
.nfp-panel {
gap: 20px;
padding: 20px;
}
.nfp-q {
padding: 26px 25px;
font-size: 20px;
line-height: 32px;
letter-spacing: -0.4px;
}
.nfp-a p {
padding: 0 25px 26px;
}
.nfp-media {
min-height: 420px;
}
}
@media (min-width: 1200px) {
.nfp-inner {
padding: 100px 65px;
}
.nfp-heading {
font-size: 50px;
line-height: 60px;
letter-spacing: -1px;
}
.nfp-body {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 50px;
margin-top: 60px;
}
.nfp-body--solo {
grid-template-columns: minmax(0, 1fr);
}
.nfp-media {
min-height: 528px;
}
}
@media (prefers-reduced-motion: reduce) {
[data-nfp-reveal="up"],
.nfp-w,
.nfp-ic,
.nfp-item::details-content {
transition: none;
}
}
</style>
<script>
/* Appear-on-scroll only; the accordion is native <details>. */
function initNumberedFaqPhoto(root: HTMLElement) {
if (root.dataset.nfpReady === "") return;
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches || !("IntersectionObserver" in window)) return;
const controller = new AbortController();
root.dataset.nfpReady = "";
const io = new IntersectionObserver(
(entries) => {
for (const entry of entries) {
if (!entry.isIntersecting) continue;
(entry.target as HTMLElement).dataset.in = "";
io.unobserve(entry.target);
}
},
{ threshold: 0.1, rootMargin: "0px 0px -5% 0px" },
);
root.querySelectorAll<HTMLElement>("[data-nfp-reveal]").forEach((t) => io.observe(t));
controller.signal.addEventListener("abort", () => io.disconnect());
document.addEventListener(
"astro:before-swap",
() => {
controller.abort();
delete root.dataset.nfpReady;
},
{ once: true, signal: controller.signal },
);
}
const boot = () => document.querySelectorAll<HTMLElement>("[data-nfp-root]").forEach(initNumberedFaqPhoto);
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", boot, { once: true });
} else {
boot();
}
document.addEventListener("astro:page-load", boot);
</script>
===== END src/components/NumberedFaqPhoto.astro =====
===== FILE (supporting): src/components/NumberedFaqPhoto.md =====
# Numbered FAQ photo
A centred FAQ: outlined eyebrow and a big uppercase heading, then a pale panel
of numbered question cards beside a large photo. Each question is a native
`<details>` in an exclusive group — opening one closes the others — and its
round orange "+" turns into an "×" when open.
Catalog page: `/components/numbered-faq-photo`
## Files required
- **`NumberedFaqPhoto.astro`** — the component. The accordion needs no script;
the only script is the appear observer.
- **`public/numbered-faq-photo/white-semi.webp`** — the catalog demo's photo. Only needed if you pass it as `image.src`.
- `NumberedFaqPhoto.md` — this file.
## Props
| Prop | Type | Default | What it does |
| :--- | :--- | :--- | :--- |
| `eyebrow`, `heading`, `headingLevel` | | `"FAQ"`, `""`, `"h2"` | Orange words in `*asterisks*`. An empty heading is not rendered. |
| `items` | `{ question, answer }[]` | `[]` | A card missing its question or answer is dropped. With no cards the component renders nothing. |
| `numbered` | `boolean?` | `true` | "01." prefixes. |
| `initialOpen` | `number?` | `1` | 1-based; `0` opens none. |
| `image` | `{ src?, alt? } \| null` | none | Omitted or `null` → the panel spans the row. `{ src: "" }` draws a neutral "Image placeholder" box. |
| `background` | `string?` | `#ffffff` | |
| `fontStylesheet`, `class`, `id` | | | |
## Behaviour (measured)
- Only one answer is open at a time (the reference closes 01 when 02 opens).
- The icon rotates 45° (+ → ×) over 0.35s.
- Where `::details-content` is supported the answer's height animates over
0.4s; elsewhere it snaps open.
- Panel and photo rise from 80px on first view; heading words from 10px.
## Browser support
`<details name>` exclusivity: Chrome 120+, Safari 17.2+, Firefox 130+. Older
browsers allow several open at once, which is harmless.
## Images and credits
| File | Size | Credit |
| :--- | :--- | :--- |
| `white-semi.webp` | 1260 × 1056 | Unsplash P0bVatS8Jdw, Unsplash License |
===== END src/components/NumberedFaqPhoto.md =====
===== FILE (required): public/numbered-faq-photo/white-semi.webp =====
[binary asset — download https://astro.baysixmedia.com/numbered-faq-photo/white-semi.webp and save it to public/numbered-faq-photo/white-semi.webp]
--- 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: event-tested only. Handlers respond to dispatched lifecycle events; this has NOT been certified against a real <ClientRouter /> transition.
--- 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.