Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

FAQ blocks

Pro

Avatars FAQ Block for Solid

An FAQ where every answer is signed: a stack of four initials avatars under the header and a named answerer at the foot of each answer.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An avatars FAQ for Solid with Ark UI. A header carries a stack of four initials avatars and the first names of the team, at its end on a wide screen and under the title on a phone; seven questions run rail to rail below a rule with + marks, each opened by a ringed chevron, and every answer ends with a small avatar and a line that says who answered it, with their role. The people are the platform's own staff, not customers, and they're drawn as initials, so there are no photos to host or credit. It's built from Accordion, Avatar and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For product and service pages where a named person behind each answer builds trust.

FAQ

How do I change who answers?

Edit TEAM (an id, a first name, the initials, the full name and a role) and set each question's by to a person's id. The stack in the header, the names under it and the signatures are all built from the same list. To use a photo, add an AvatarImage before the fallback: the initials show until it loads, and if it fails.

How do I change the questions?

Edit QUESTIONS: each entry is an id, the question, its answer and by. OPEN_QUESTION names the one that's open on load; set it to an id that doesn't exist to start with all of them closed. One answer is open at a time. Add multiple to the Accordion to let several stay open.

Are the closed answers in the page's markup?

Yes. The Accordion takes lazyMount={false} and unmountOnExit={false}, so every answer renders from the start, hidden until its question opens. Search engines and server rendering see all seven, and closing an answer doesn't remove it.

Are the avatars read out?

No. The stack in the header is hidden from assistive technology, because the line beside it names everyone in words. In each answer the signature reads "Answered by" and the person's name and role as text, and its small avatar is decoration.

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 them all. Tab moves from question to question, Enter or Space opens and closes one, and the button says whether it's expanded. The open answer is labelled by its question. The Up and Down arrows also move between questions, and Home and End jump to the first and last.

How does it fit on a phone?

The stack and the names sit on one row under the title, the avatars stay at 40 pixels, the rows run from rail to rail, and a long question wraps with its chevron beside the first line. Nothing scrolls sideways at 320 pixels.

All 100 faq blocks