FaqBand

FAQ band: a LandingHeader over one or two Accordion columns.

DesktopPhone

View code

tsx

<FaqBand title="Questions" columns={2}>
	<Accordion>
		<Accordion.Item name="faq">
			<Accordion.Trigger>
				How often do checks run?
				<ChevronDownIcon data-slot="icon" aria-hidden="true" />
			</Accordion.Trigger>
			<Accordion.Content>
				<p>Every thirty seconds on paid plans, every five minutes on the free one.</p>
			</Accordion.Content>
		</Accordion.Item>
		<Accordion.Item name="faq">
			<Accordion.Trigger>
				Where do probes run from?
				<ChevronDownIcon data-slot="icon" aria-hidden="true" />
			</Accordion.Trigger>
			<Accordion.Content>
				<p>Six regions across North America, Europe and Asia.</p>
			</Accordion.Content>
		</Accordion.Item>
	</Accordion>
	<Accordion>
		<Accordion.Item name="faq">
			<Accordion.Trigger>
				Can I use my own domain?
				<ChevronDownIcon data-slot="icon" aria-hidden="true" />
			</Accordion.Trigger>
			<Accordion.Content>
				<p>Yes, point a CNAME at your status page and the certificate follows.</p>
			</Accordion.Content>
		</Accordion.Item>
		<Accordion.Item name="faq">
			<Accordion.Trigger>
				Is there a free plan?
				<ChevronDownIcon data-slot="icon" aria-hidden="true" />
			</Accordion.Trigger>
			<Accordion.Content>
				<p>Five monitors and one status page, with no card required.</p>
			</Accordion.Content>
		</Accordion.Item>
	</Accordion>
</FaqBand>

Demo landings

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Usage

typescript

import { FaqBand } from "@sdxc/ui/landing";

Renders a FAQ band with a chapter header and one or two accordion columns. The column host is the named sizing container; an inner wrapper holds the @container tracks so the query can restyle a descendant.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`columns`	`Columns`	No	Column count. Defaults to DEFAULT_COLUMNS.
`tone`	`Tone`	No	Band fill. Defaults to DEFAULT_TONE.
`eyebrow`	`RemixNode`	No	Optional eyebrow above the title.
`title`	`RemixNode`	Yes	Section title — required, always supplied by the page.
`description`	`RemixNode`	No	Supporting lead under the title.
`children`	`RemixNode`	Yes	Accordion column(s). Pass one Accordion for a single column, or two for a split FAQ — the band lays them in a responsive grid.
`parts`	`PartsProps`	No	Per-part styling for title, lead, and columns.

Also accepts everything in Omit< LandingSection.Props, "children" | "tone" | "title" | "parts" >.