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: "Split intro FAQ"
Library page: https://astro.baysixmedia.com/components/split-intro-faq/
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/SplitIntroFaq.astro =====
---
/**
* SplitIntroFaq
*
* A text-only FAQ in two parts: an intro column — optional label, a big
* heading and a short paragraph — and a list of full-width question rows
* separated by hairlines. From 1024px of its own width the intro sits beside
* the list and stays in view while the list scrolls; from 700px the heading
* and paragraph share a line above it; narrower, everything stacks.
*
* Each row carries a ring on the right with a plus that turns into a minus
* when it is open; the open row is marked by a heavier rule and the answer
* sits on the question's own left edge.
*
* Built on `<details>` / `<summary>`: the toggle is the browser's own and it
* works with no script. There is no script at all. `exclusive` hands the
* one-at-a-time rule to the browser through `<details name>`.
*
* Reads --nv-* design tokens from any ancestor, with fallbacks.
*/
export interface SplitIntroFaqItem {
question: string;
answer: string;
}
export interface SplitIntroFaqProps {
heading?: string;
headingLevel?: "h2" | "h3";
/** Paragraph under the heading. `""` drops it. */
intro?: string;
/** Small label above the heading, with the lime dot. `""` drops it. */
eyebrow?: string;
items?: SplitIntroFaqItem[];
/** Which row starts open, counting from 1. `0` (default) opens none. */
initialOpen?: number;
/** Only one row open at a time, through the native `<details name>` group. */
exclusive?: boolean;
/** The section surface. */
background?: string;
fontStylesheet?: string;
class?: string;
id?: string;
}
interface Props extends SplitIntroFaqProps {}
const {
heading = "",
headingLevel = "h2",
intro = "",
eyebrow = "",
items = [],
initialOpen = 0,
exclusive = false,
background = "#ffffff",
fontStylesheet = "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap",
class: className,
id,
} = Astro.props;
const Heading = headingLevel;
/* `name` is document-wide, so each instance gets its own group. */
const uid = id ?? `sif-${Math.random().toString(36).slice(2, 9)}`;
/* A row needs a question and an answer; anything short of that is dropped.
No rows, no section — the heading and eyebrow alone say nothing. */
const list = items.filter(
(item) =>
typeof item?.question === "string" &&
item.question.trim() !== "" &&
typeof item.answer === "string" &&
item.answer.trim() !== "",
);
const openAt = Math.trunc(Number(initialOpen));
const openIndex = Number.isFinite(openAt) && openAt >= 1 && openAt <= list.length ? openAt - 1 : -1;
const hasIntro = Boolean(heading || intro || eyebrow);
---
{list.length > 0 && (<>{fontStylesheet && <link rel="stylesheet" href={fontStylesheet} />}
<section
class:list={["sif", className]}
id={id}
style={`--sif-bg: ${background};`}
aria-labelledby={heading ? `${uid}-heading` : undefined}
aria-label={heading ? undefined : "Frequently asked questions"}
>
<div class:list={["sif-inner", { "sif-inner--split": hasIntro }]}>
{
hasIntro && (
<div class="sif-intro-col">
<div class="sif-intro-stick">
{eyebrow && (
<p class="sif-eyebrow">
<span class="sif-dot" aria-hidden="true" />
<span>{eyebrow}</span>
</p>
)}
{heading && <Heading class="sif-heading" id={`${uid}-heading`}>{heading}</Heading>}
{intro && <p class="sif-intro">{intro}</p>}
</div>
</div>
)
}
<div class="sif-list">
{
list.map((item, index) => (
<details class="sif-row" name={exclusive ? uid : undefined} open={index === openIndex}>
<summary class="sif-q">
<span class="sif-q-text">{item.question}</span>
<span class="sif-icon" aria-hidden="true" />
</summary>
<div class="sif-a">
<p>{item.answer}</p>
</div>
</details>
))
}
</div>
</div>
</section></>)}
<style>
.sif {
--sif-ink: var(--nv-ink, #08110f);
--sif-lime: var(--nv-lime, #c8ff38);
--sif-font: var(--nv-font, Manrope, ui-sans-serif, system-ui, sans-serif);
--sif-rule: rgb(8 17 15 / 0.12);
--sif-soft: rgb(8 17 15 / 0.74);
--sif-ease: cubic-bezier(0.22, 1, 0.36, 1);
container-type: inline-size;
box-sizing: border-box;
background: var(--sif-bg);
color: var(--sif-ink);
font-family: var(--sif-font);
}
.sif *,
.sif *::before,
.sif *::after {
box-sizing: border-box;
}
.sif-inner {
display: grid;
gap: 36px;
max-width: 1240px;
margin: 0 auto;
padding: 64px 20px;
}
.sif-intro-col,
.sif-list {
min-width: 0;
}
/* ---- intro ---- */
.sif-eyebrow {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 18px;
font: 700 14px/1.3 var(--sif-font);
color: var(--sif-ink);
}
.sif-dot {
flex: none;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--sif-lime);
box-shadow: 0 0 0 4px rgb(200 255 56 / 0.28);
}
.sif-heading {
max-width: 14ch;
margin: 0;
font: 700 clamp(34px, 8.6cqi, 60px) / 1 var(--sif-font);
letter-spacing: -0.045em;
text-wrap: balance;
overflow-wrap: anywhere;
}
.sif-intro {
max-width: 40ch;
margin: 18px 0 0;
font: 500 17px/1.6 var(--sif-font);
letter-spacing: -0.01em;
color: var(--sif-soft);
overflow-wrap: anywhere;
}
/* ---- questions ---- */
.sif-list {
border-bottom: 1px solid var(--sif-rule);
}
.sif-row {
border-top: 1px solid var(--sif-rule);
transition: border-color 0.2s ease;
}
/* The open row is marked by a heavier rule, not a tinted box. */
.sif-row[open] {
border-top-color: var(--sif-ink);
box-shadow: inset 0 1px 0 var(--sif-ink);
}
.sif-q {
display: flex;
align-items: center;
gap: 20px;
min-height: 76px;
padding: 18px 0;
cursor: pointer;
list-style: none;
}
.sif-q::-webkit-details-marker {
display: none;
}
.sif-q:focus-visible {
outline: 2px solid var(--sif-ink);
outline-offset: 4px;
border-radius: 4px;
}
.sif-q-text {
flex: 1 1 auto;
min-width: 0;
font: 700 clamp(17px, 3.2cqi, 20px) / 1.35 var(--sif-font);
letter-spacing: -0.015em;
overflow-wrap: anywhere;
}
/* A ring with a plus drawn from two bars; the vertical bar folds away when open. */
.sif-icon {
position: relative;
flex: none;
width: 34px;
height: 34px;
border: 1.5px solid var(--sif-ink);
border-radius: 50%;
transition: background-color 0.25s var(--sif-ease), border-color 0.25s var(--sif-ease);
}
.sif-icon::before,
.sif-icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 2px;
margin: -1px 0 0 -6px;
border-radius: 1px;
background: var(--sif-ink);
transition: transform 0.3s var(--sif-ease);
}
.sif-icon::after {
transform: rotate(90deg);
}
.sif-row[open] .sif-icon {
border-color: var(--sif-ink);
background: var(--sif-ink);
}
.sif-row[open] .sif-icon::before,
.sif-row[open] .sif-icon::after {
background: var(--sif-lime);
}
.sif-row[open] .sif-icon::after {
transform: rotate(0deg);
}
@media (hover: hover) {
.sif-row:not([open]) .sif-q:hover .sif-icon {
background: var(--sif-lime);
}
}
.sif-a {
padding: 0 54px 26px 0;
}
.sif-a p {
max-width: 62ch;
margin: 0;
font: 500 16px/1.65 var(--sif-font);
color: var(--sif-soft);
overflow-wrap: anywhere;
}
/* ---- tablet: heading and paragraph share a line ---- */
@container (min-width: 700px) {
.sif-inner {
padding: 88px 36px;
gap: 48px;
}
.sif-intro-stick {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
column-gap: 40px;
align-items: end;
}
.sif-eyebrow {
grid-column: 1 / -1;
}
.sif-heading {
max-width: 16ch;
font-size: clamp(36px, 6.2cqi, 52px);
}
.sif-intro {
margin: 0;
}
}
/* ---- desktop: the intro stands beside the list ---- */
@container (min-width: 1024px) {
.sif-inner {
padding: 112px 40px;
}
.sif-inner--split {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
column-gap: 72px;
align-items: start;
}
.sif-intro-stick {
position: sticky;
top: 96px;
display: block;
}
.sif-heading {
max-width: 14ch;
font-size: clamp(40px, 4.4cqi, 60px);
}
.sif-intro {
margin-top: 22px;
}
.sif-q {
min-height: 84px;
}
}
@media (prefers-reduced-motion: reduce) {
.sif-row,
.sif-icon,
.sif-icon::before,
.sif-icon::after {
transition: none;
}
}
@media (forced-colors: active) {
.sif-dot,
.sif-icon::before,
.sif-icon::after,
.sif-row[open] .sif-icon::before,
.sif-row[open] .sif-icon::after {
background: CanvasText;
}
.sif-row[open] .sif-icon {
background: Canvas;
}
.sif-icon {
border-color: CanvasText;
}
}
</style>
===== END src/components/SplitIntroFaq.astro =====
===== FILE (supporting): src/components/SplitIntroFaq.md =====
# Split intro FAQ
A text-only FAQ: an intro column — a small label with a lime dot, a big
heading and a short paragraph — and full-width question rows separated by
hairlines. From 1024px of its own width the intro stands beside the list and
stays in view while it scrolls; from 700px the heading and paragraph share a
line above it. Each row has a ring on the right whose plus becomes a minus
when it is open.
Catalog page: `/components/split-intro-faq`
## Files required
**`SplitIntroFaq.astro`** — the whole component. No imports, no packages, no
script, no images. `SplitIntroFaq.md` is this file, not needed to run.
## Basic usage
```astro
---
import SplitIntroFaq from "../components/SplitIntroFaq.astro";
---
<SplitIntroFaq
heading="Clear answers before your first load."
items={[
{ question: "Do you handle chilled cargo?", answer: "Yes. Reefer loads are logged continuously." },
]}
exclusive
/>
```
It is a full-bleed section: it paints its own surface and applies its own
gutters, so it goes straight into the page flow.
## Props
| Prop | Type | Default | What it does |
| :--- | :--- | :--- | :--- |
| `heading` | `string?` | `""` | Section heading. `""` drops it (the section then gets `aria-label="Frequently asked questions"`). |
| `headingLevel` | `"h2" \| "h3"?` | `"h2"` | Fits your page outline. |
| `intro` | `string?` | `""` | Paragraph under (or beside) the heading, capped at 40ch. `""` drops it. |
| `eyebrow` | `string?` | `""` | Small label above the heading, with the lime dot. `""` drops it. |
| `items` | `{ question: string; answer: string }[]?` | `[]` | The rows. A row missing its question or answer is dropped; with no rows the component renders nothing (not even the font `<link>`). |
| `initialOpen` | `number?` | `0` | Row served open, counting from 1. `0` opens none (the measured rest state). |
| `exclusive` | `boolean?` | `false` | One row open at a time, via native `<details name>`. |
| `background` | `string?` | `#ffffff` | Section surface. |
| `fontStylesheet` | `string?` | Manrope + Inter on Google Fonts | Rendered as a `<link>`. `""` skips it. |
| `class` | `string?` | — | Extra class on the root. |
| `id` | `string?` | — | Root id. Also seeds the heading id and the `exclusive` group name. |
Theming reads `--nv-ink`, `--nv-lime` and `--nv-font` from any ancestor, with
fallbacks. The component never sets them.
## Behaviour
- **Toggle:** native `<details>`/`<summary>`. Instant open and close. The
ring's vertical bar folds flat (plus → minus) and the ring fills ink.
- **Open row:** a heavier ink rule above it; the answer sits on the
question's own left edge in 16px text.
- **Hover:** the closed ring fills lime. Only on devices with real hover.
- **Appear:** none (none was measured for this section).
- **Reduced motion:** the ring and rule transitions are off.
## Accessibility
- Disclosure semantics, keyboard (Enter/Space) and the expanded state are the
browser's own, because it is `<details>`/`<summary>`.
- The ring is `aria-hidden`; the state is announced natively.
- Visible `:focus-visible` outline on each question, 4px off it.
- Rows are at least 76px tall — well over the 44px target.
- The section is labelled by its heading.
## Integration notes
- Gutters: 18px sides / 82px vertical on a phone, 30px / 100px from 810px,
30px / 120px from 1200px. Content capped at 1240px.
- `exclusive` relies on `<details name>`. Browsers without it ignore the
attribute and every row opens independently — nothing breaks.
- No script, so nothing to tear down under `<ClientRouter />`.
## Images and credits
None. The component uses no images.
## Approximations
- **Hover scale.** The reference reports `scale(1.1) translateX(4px)` on the
full-width question button, which in the capture pushes the question text
off the left edge. This build applies `translateX(4px) scale(1.02)` to the
question text only, and `scale(1.1)` to the 15px icon only, so nothing
clips or overflows.
- **Open panel spacing.** From the open screenshot only (no dump of the open
state): answer padding `4px 18px 28px`, `min-height: 96px`, 14px/1.6 text at
72% ink, wash `rgb(183 255 57 / .12)`, bottom radius 12px. The question keeps
its flush-left position when open, as in the reference.
- **Hairline colour** `rgb(8 17 15 / .08)` is read off the screenshot; the dump
records no border on the rows.
- **Question/icon gap** is 16px (the reference has 0 — the text box simply
stops at the icon), so wrapped questions on a phone break a few pixels
earlier than the reference.
- **Tablet (810–1199)** was not captured: heading 50px, 100px vertical padding,
interpolated.
- **Phone rows** use `min-height: 80px` with 14px vertical padding, which
reproduces the measured 80px rows for both one- and two-line questions.
===== END src/components/SplitIntroFaq.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.