Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

FAQ blocks

Pro

Certificate Preview FAQ Block for Svelte

A side-header FAQ for online short courses whose first answer previews what you receive: tabs for a certificate, a transcript and a badge, each a greyscale drawing in a framed figure.

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 FAQ for Svelte with Ark UI. A side header, the title, a sentence and an adviser prompt at its foot, sits beside seven questions in hairline rows, behind a split divider that runs from the page's top rule to the block's end. The first question, "What do I get when I finish?", is open on load and answers with a preview: three tabs, Certificate, Transcript and Badge, each a greyscale drawing of the document in a framed figure with one line of text under it. Every row opens with a chevron at its start, and on a phone the header stacks above the rows. It's built from Accordion, Tabs, Button and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For course platforms, schools and training providers whose learners want to know what they leave with.

FAQ

How do I change the documents and the questions?

Edit SHEETS for the tabs (an id, a label and the caption under the drawing), RESULTS for the transcript's rows, and QUESTIONS for the rows. The transcript's total is added up from RESULTS. Each drawing is a small component built from the theme's tokens: replace one with a screenshot of your real document if you prefer, and keep the caption as its text alternative.

Are the drawings images?

No, they're built from our parts: a bordered sheet, bars standing for lines of text, a ring and an icon. They are decorative, hidden from assistive technology and not focusable, and the caption under each says in words what the document holds. They follow the theme, so they read in dark mode too.

How do the tabs work?

They're a real tab list named "What you receive": the arrow keys move between them (mirrored in a right-to-left layout), Home and End jump to the first and last, and Tab moves on to the open panel. All three panels share one height, so switching never moves the questions below.

Are the closed answers and the other tabs in the page's markup?

Yes. The Accordion and the Tabs take lazyMount={false} and unmountOnExit={false}, so every answer and every tab panel renders from the start, hidden until it's shown.

Can I move between questions with the keyboard?

Tab moves through the questions, into the open answer's tabs and on to the adviser link; Enter or Space opens a question. The Up and Down arrows also move between questions, and Home and End jump to the first and last.

All 100 faq blocks