shadcn.io is not affiliated with official shadcn/ui
Side by Side FAQ Block for Solid
An always-open FAQ for a freight carrier: eight questions with their answers side by side in hairline rows, the question and topic at the start and the answer at the end.
Installation
Overview
A side-by-side FAQ for Solid with Ark UI. Under a compact header, eight rows run from rail to rail between hairlines; each row puts the question and a topic badge at the start and its answer at the end, so every answer is on the page and nothing has to be opened. A quiet link under the last row goes to the support desk. On a phone each answer sits under its question and the list shows four, with a button for the rest. It is built from Badge, Button and Guides, with CSS for the entrance and your theme's tokens for every colour. For shipping, onboarding and policy pages where people compare several answers at a glance.
FAQ
How do I change the questions?
Edit PAIRS at the top of the file: each entry has an id, a topic (the badge), the question and its answer. PHONE_COUNT sets how many rows a phone shows before the button. Eight rows is about the limit before the page gets long; if you have more, group them or use an accordion.
Are all the answers in the page's markup?
Yes, all of them, on every target. The rows are a description list (dl, with the question in dt and the answer in dd), and the rows a phone doesn't show are only hidden with CSS below the md breakpoint, so search engines and screen readers on a desktop see every answer.
What does the button do on a phone?
Below md the list shows the first four rows and a ghost button, "All 8 answers", with aria-expanded and aria-controls; pressing it shows the other four and turns its chevron. The label stays the same and focus stays on the button. From md up every row shows and the button is hidden.