Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Divided Three Column Card Features Block for Solid

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A three-column features section for Solid 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.

What moves, and what happens with reduced motion?

The block fades up once when the page loads, with a CSS transition. With reduced motion the transition is off and the section simply appears.

How does it fit a phone?

The columns stack in one column with hairlines between them. Chips wrap, the avatar row stays on one line and nothing scrolls sideways at 320 pixels.

All 170 features blocks