Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Framed Preview Card Trio Features Block for Vue

Three tall cells, each opening with a framed greyscale drawing: a photo contact sheet, a shoot timeline and a comment thread.

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-preview features section for Vue with Ark UI. A header sits above three tall cells whose hairlines overshoot their corners. Each opens with a framed figure (hairlines and + marks on its corners) holding a different greyscale drawing, then an h3 and a sentence: a contact sheet with picked and rejected frames, a timeline with three tracks and a playhead, and a comment thread pinned to a frame. Three across from lg; one column below with shorter figures. It's built from Avatar, Badge and Guides, with CSS transitions for the entrance. For creative and review tools where each feature has a screen worth showing.

FAQ

How do I change a drawing?

Each figure is its own component: ContactSheet, ShootTimeline and CommentThread. The sheet reads TILES, the timeline reads TRACKS and PLAYHEAD, so editing the data redraws them. They are built from tokens, so no images are needed.

Are the drawings accessible?

They are decoration, hidden from assistive technology. Each card's title and sentence say what the drawing shows, and those are what a screen reader reads.

Does the timeline mirror in right-to-left pages?

No: time runs one way, so the timeline keeps dir="ltr". The rest of the card mirrors as usual.

Why two sets of lines?

The cell's lines (with a mark on its top-start corner) hold the card; the figure's own frame, with marks on all four corners, holds the drawing. They are 24 pixels apart so they never touch.

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 cells stack in one column and the figures drop to 176 pixels tall, so the drawing, title and sentence of each card read together. Nothing scrolls sideways at 320 pixels.

All 170 features blocks