Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Image Background Overlay Cards Features Block for Solid

A feature section for a roadmap planner that lays a frosted headline chip and three raised feature tiles over a wide greyscale roadmap drawing, with no photo: the product is the background.

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 media-forward feature section for Solid with Ark UI, built without a photo. A wide greyscale roadmap (six project lanes of bars on a twelve-week grid, with a "Now" marker) fills the band under the top rule and fades out at its foot. A frosted headline chip with backdrop-blur sits over its top start corner, and three raised feature tiles overlap the fade across the foot. Below md the tiles stack under the roadmap and don't overlap it. It's built from Guides and Lucide icons, with CSS masks and transitions and your theme's tokens for every colour. For planners, boards and any product that shows best as its own screen.

FAQ

How do I change the roadmap?

Edit LANES at the top of the file: each lane has a name and bars, and each bar a from and to week, a label and optionally selected. WEEKS sets the columns and NOW the week the marker sits on. The drawing is decoration, hidden from assistive technology, so keep the real claims in the tiles.

Is the headline readable over the drawing?

The chip has a bg-background fill at 85% under a blur, so the heading and sentence sit on a near-solid surface in every theme and the roadmap shows faintly through it. The tiles are solid bg-card with a ring and shadow.

How do the tiles overlap?

From md the tile row has a negative top margin, so it rides up over the roadmap's faded foot. The roadmap fades out with a mask, so the tiles never sit on busy lines. Below md the margin is gone and the tiles follow the drawing in normal flow.

Does it follow my theme?

Yes. The roadmap, the chip and the tiles use background, card, muted and foreground tokens, with no dark scope. The selected bar and the "Now" marker are foreground fills, so the section has no primary colour.

What moves, and what happens with reduced motion?

The headline chip, the roadmap and the tiles fade up once, one after the other, with a CSS transition. With reduced motion the transition is off and everything appears at once. Nothing else moves.

How does it fit on a phone?

The roadmap band gets shorter and is cropped at the end side (it's wider than a phone), the chip spans the width, and the three tiles stack one per row below it. Nothing scrolls sideways at 320 pixels.

All 170 features blocks