Kage Design logo kage
trycase.dev
TryCase faq component

Design analysis

The FAQ uses a strong left-side introduction and a long, orderly accordion list on the right. Thin dividers and plus controls keep many questions legible without visual clutter.

Prompt preview
## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/trycase/bc7fc0fa-2eda-4dd0-a163-94201d1f5c68-1789452163-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/trycase/bc7fc0fa-2eda-4dd0-a163-94201d1f5c68-1789452104312-full.webp
- Component on Kage: https://kage.design/component/trycase-faq

## Before you start
Ask the user which objections, setup questions, pricing concerns, and security questions matter most for their product. Then build an original FAQ using the rules below.

Create a dark two-column FAQ section with an introductory block and an accordion list.

- Use a near-black background around `#111111`, with generous top and bottom padding and a faint section border.
- Align the section to a centered max-width container. On desktop, give the intro roughly 35–40% width and the question list the remaining width; stack them on mobile.
- Use a large 44–56px heading with a short muted summary below, followed by a few small related links if useful.
- Render each question as a full-width row with 14–16px text, 18–24px vertical padding, and a 1px divider around `#292929`.
- Place a small plus/minus control at the far right in muted gray. On open state, reveal the answer with a smooth but restrained height transition and change the icon to indicate state.
- Use white or `#e8e8e8` for questions, `#8d8d8d` for answers, and a subtle accent such as `#e34867` only for focus or active state.
- Ensure accordion buttons are semantic, keyboard accessible, and support only one or multiple open items according to the product's content needs.

### Never
- Never copy the reference questions, links, product name, or exact copy.
- Never hide essential pricing, privacy, or security information only inside the accordion.
- Never use oversized icons, cards, or decorative illustrations that compete with the questions.

More components