shadcn.io is not affiliated with official shadcn/ui
Expandable Cards FAQ Block for Svelte
An FAQ of six separate cards for a candle subscription, each a collapsible with a topic tag and a round plus that fills in and becomes a minus; the open card lifts.
Installation
Overview
An expandable-cards FAQ for Svelte with Ark UI. A title at the start and one sentence at the end sit above six question cards in two columns, set apart by a generous gap. Each card is drawn by its own lines, which run a little past its corners with a + mark at the start, and each is a separate collapsible: its question sits beside a round plus, and opening it fills the circle and turns the plus into a minus, while the card lifts with a soft shadow and a ring. The cards sit in two independent columns of three, aligned to their tops, so opening one never moves the card beside it, only the cards under it in its own column. On a phone they stack in one column. The page's rails and top rule come from the Guides spine, so the block lines up with its neighbours in a stack. It's built from Collapsible, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For product pages and shops with a handful of questions that benefit from some air.
FAQ
How do I change the questions?
Edit QUESTIONS at the top of the file: each entry is an id, a topic for the tag, the question and its answer, one to three sentences. OPEN_QUESTION names the card that is open on load; set it to an id that doesn't exist to start with all of them closed. The first three entries fill the first column and the rest the second, so keep the count even to end the columns together. Each card opens and closes on its own, so any number can be open at once.
Are the closed answers in the page's markup?
Yes. A closed card's answer is hidden, not removed, so search engines and server rendering see all six.
How does it work with a keyboard and a screen reader?
Each question is a button inside its own h3 under the section's h2, so a screen reader's headings list shows all six. Tab moves from card to card, Enter or Space opens and closes one, and the button says whether it's expanded. The topic tags repeat the question's subject and are hidden from assistive technology, and the plus is decorative.
How does the open card lift?
The card's root has a has-aria-expanded rule, so it takes a shadow and a ring whenever its question button reports that it's expanded. It reads the same state the screen reader does, so it can't drift from it, and it works the same way on every library.
What moves, and what happens with reduced motion?
The header and the cards fade up once when the page loads, an answer eases open under its question, the circle fills and the plus turns into a minus, and the shadow fades in. With reduced motion every one of these happens at once, without a transition.