FAQ variants

Internal verification page for backgrounds, default props, open states, disclosure behavior, and rich text answers.

FAQ / Natural

Natural FAQ with rich answers

Open FAQ item with list content
  • Open item list content
  • Link styling inside an FAQ answer
  • List item line-height and wrapping
Closed FAQ item with paragraphs

This answer starts closed and contains a normal paragraph.

Heading inside an answer

Content under this heading should use normal adjacent spacing.

Third item for disclosure behavior

Opening this item should leave other open items unchanged, and each item can be closed independently.

FAQ / Linen

Linen FAQ state

Initially closed first item

The component should preserve source open states and leave this item closed until selected.

Second linen item

This answer checks repeated item spacing and section surface contrast on linen.

FAQ / Sand

Sand FAQ with second item open

First sand item

This item begins closed in source content.

Second sand item starts open

This checks that an explicitly open item is respected during initialization.

Questions

Common details before launch

Default heading props on shoreline

This FAQ omits eyebrow, heading, and accent text to check component defaults against the shoreline background.

Long summary text that should wrap cleanly on mobile without colliding with answer content

This answer verifies summary line wrapping and answer spacing below a longer question.

FAQ / Dark

Dark FAQ state

FAQ on dark background

This checks FAQ borders, surfaces, link color, and RichText colors on a dark section.

Visit the main kitchen sink for the broader page context.

Second dark FAQ item

A second item confirms repeated spacing and disclosure behavior on the dark section treatment.