shadcn.io is not affiliated with official shadcn/ui
Q and A Interview Blog Block for Svelte
An interview told in four question-and-answer bands: the host's question at the start, the guest's answer at the end, both speakers' initials avatars in the header, and one phrase marked with a highlighter.
Installation
Overview
A conversation block for Svelte with Ark UI, written for Lintelwick, the journal of an architecture podcast. The header reads "In conversation: Ingrid Solheim and Mateo Duarte" and shows both speakers as initials avatars. Under it, four bands each hold one exchange: the host's question at the start, set as a heading, and the guest's answer at the end, with the speaker's avatar and name above every line. One phrase of one answer is marked with a highlighter that draws across it once. A foot band says how much of the interview is shown and carries the "Read the full interview" link. It's built from Avatar, Highlight Text, Button and Guides, with CSS for the entrance. For podcast write-ups, expert Q&As and founder interviews, anywhere a conversation reads better as turns than as prose.
FAQ
How do I add my own interview?
Edit TURNS at the top of the file. Each turn has a question, an answer in three parts (before, mark, after) and an id. Leave mark empty for no highlight, or put the phrase to emphasise in it and keep the text on either side in before and after. The two speakers are HOST and GUEST; their initials come from the names.
What does the highlighter do, and does it respect reduced motion?
The marked phrase is drawn with the catalog's Highlight Text: a neutral marker (the foreground colour at 12%) that sweeps across the words once, a moment after the page loads. With reduced motion it is simply there. The phrase stays ordinary text in the sentence, so a screen reader reads the answer unbroken.
How does a screen reader tell the speakers apart?
Each question is a level-three heading and the answer follows it, so the headings list every question. Above each line the speaker's name is visible, and a hidden "asks" or "answers" follows it, so the reader hears "Ingrid Solheim asks" and "Mateo Duarte answers". The initials avatars are decoration and are hidden from assistive technology.
How does it fit on a phone?
Each band stacks into one column: the question, then the answer, with the speaker's name above each. The two header avatars drop out below sm to keep the title and the first question on the first screen. Nothing scrolls sideways at 320 pixels.