Shadcn UI Faq Block
Faq20 is a two-column FAQ section with the heading and description on the left, and categorized accordion questions on the right. The left column contains a large heading and a short description with an inline contact link. The right column organizes questions into categories, each with a muted category title and border separator, followed by collapsible accordion items.
The visual style is clean and minimal with a constrained max-width container. Category titles use muted foreground color with a bottom border to create visual groupings. The accordion triggers and content follow shadcn defaults with the content in muted foreground color. The contact link has an underline with offset for subtle emphasis.
This FAQ pattern works well for the mainline design system with its organized, readable layout. The two-column split keeps the heading visible while users browse questions. Categories help users find relevant information quickly. The accordion pattern keeps the page compact while allowing detailed answers.
On mobile, the layout stacks vertically with the heading above the FAQ categories. The accordion functionality remains the same across all screen sizes.
Dependencies
| Package | Type |
|---|---|
accordion @shadcn | Registry |