shadcn.io is not affiliated with official shadcn/ui
Two-Sided FAQ Block for Solid
A FAQ for a handmade-goods marketplace in one definition list: each question has a buyer's answer and a seller's answer side by side on aligned columns, under a Buyers and Sellers header band.
Installation
Overview
A two-sided FAQ for Solid with Ark UI. A compact header sits over a band whose first row names the two sides, Buyers and Sellers, with + marks where its lines meet the rails. Under it, five questions each get one row of a definition list: the question at the start, the buyer's answer in the middle column and the seller's answer in the end column, aligned across every row, so both sides read the same question at a glance. Every answer shows at once: there is nothing to open. On a phone each question stacks its buyer answer over its seller answer, each under a small label. The rails and top rule come from the Guides spine, so the block lines up with its neighbours. It's built from Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour, and it needs no client script. For marketplaces, platforms and anywhere two kinds of user ask the same question and need different answers.
FAQ
How do I change the questions and the two sides?
Edit TOPICS at the top of the file: each topic has an id, a question, a buyer answer and a seller answer, each one or two sentences. Keep it to about five: each question takes two answers' worth of space, and on a phone they stack. To rename the sides, change the two header cells and the two labels in the rows.
Is it a list of definitions or a table?
A definition list: each row is a group holding the question as its term and the two answers as its definitions. A table would suggest data to compare; this is two answers to one question. The header band is decorative and hidden from assistive technology; each answer carries its side's name as visually hidden text on wide screens, so "Buyers" and "Sellers" are still read.
How are the columns kept aligned?
The header band and every row share one grid: a 13 rem question column and two equal answer columns from the md breakpoint up. The vertical lines are each answer's own start border, so they run unbroken from the band to the block's end.
How does it read on a phone?
Below md the header band hides and every row becomes a stack: the question, then the buyer's answer under a "Buyers" label, then the seller's answer under a "Sellers" label. Rows are separated by hairlines from rail to rail. Nothing scrolls sideways at 320 pixels.
How does it work with a keyboard and a screen reader?
There is no control in this block, so there's nothing to tab to; a screen reader's list-of-definitions navigation, or its headings list ("Buying and selling on Barnwood"), reaches it. It's a server component with no state, so it also prints and reads without scripts.