shadcn.io is not affiliated with official shadcn/ui
Divided Three Column Card Features Block for Svelte
One rounded card split into three columns by hairlines, each ending in a different small drawing: question-type chips, an avatar stack and result bars.
Installation
Overview
A three-column features section for Svelte with Ark UI. A compact header sits above a single rounded card whose three columns share hairlines inside one outer radius. Each column is an icon tile, a title, one sentence and a different greyscale drawing at its foot: a set of question-type chips with one picked, a stack of avatars with a count, and three result bars with their percentages. From md the columns sit side by side; on a phone they stack, divided by hairlines. It's built from Avatar, Badge and Guides, with CSS transitions for the entrance. For products with a three-step flow where each step has something to show.
FAQ
How do I change the steps and drawings?
Edit STEPS: each has an icon, a title, a sentence and a drawing component. The three drawings are QuestionChips, AudienceStack and ResultBars. The bars read from ANSWERS, so changing a share changes the bar and its label.
What do assistive technologies read?
An ordered list of three steps with an h3 and a sentence each. The icons and drawings are decorative and hidden. Percentages are in bdi, so a right-to-left page keeps the sign beside the number.
Why one card instead of three?
Cells that share hairlines read cleaner than three bordered cards with gaps, which double every edge. The card has one outer radius and none inside it.
Does it follow my theme?
Yes. Everything uses theme tokens; the picked chip and the bars use the foreground colour, so the primary colour stays free for your buttons.