shadcn.io is not affiliated with official shadcn/ui
Shadow Lift Card Grid Features Block for React
Six whole-card links for an edge-hosting platform in two columns, each with a sentence, a mirroring arrow and a metric row with a sparkline, that lift under a deeper shadow on hover, focus and press.
Installation
Overview
A grid of link cards for React with Base UI. Six cards stand apart in two columns (one on a phone) under a start-aligned header, each a bordered box with + marks on its corners. A card's whole face is its link, through a link overlay on the title, so the click target is the card and the link has one name. Under the title and a sentence, a metric row shows the figure that backs the claim (38 ms, 96.4%, 2.1 s) with a sparkline of the week behind it. Hovering, focusing the link by keyboard or pressing a card lifts it a few pixels under a deeper shadow and a faint ring, and the arrow nudges toward the link's direction. With reduced motion the card keeps the shadow and the ring and stays put. It's built from Guides and the link overlay, with SVG for the sparklines and your theme's tokens for every colour. For a hosting, infrastructure or analytics product whose features each deserve a page.
FAQ
Where do the links go?
Each card has one link, LinkOverlay on its title, pointing at # for now: change href per feature. The overlay stretches over the whole card, so the card is clickable and keyboard users get a single stop with a name like "A network that is near everyone". There is no second "Learn more" link to repeat.
What does the lift do, and how is it kept accessible?
The card translates up four pixels and gains a shadow and a ring, with a 200 ms transition. It runs on pointer hover, on keyboard focus (when the card contains a focus-visible link) and while the card is pressed, so touch and keyboard see it too. With reduced motion the translate is off and only the shadow and ring change.
How do I change the figures and sparklines?
Edit FEATURES: each has a value, a measure (what it counts) and a trend of eight numbers, oldest first. The sparkline is drawn from the trend by a small pure function, scaled so the lowest value sits at the foot and the highest at the top; the dot marks the latest. The sparkline is decoration and hidden from assistive technology, while the value and its measure are real text.
Does the arrow mirror in right-to-left?
Yes: the arrow flips with rtl:-scale-x-100, and its nudge on hover goes the other way. The figures are in bdi, and the sparkline is dir="ltr" because a week runs in one direction in every language.
Related
- Pro
Badge Counter Wall Features
Metrics and chartsA wall of eight channel counters for a unified inbox, with a two-button toggle that switches between every channel and only those with unread messages.
- Pro
Spotlight Hover Mask Grid Features
Card gridsSix funnel-analytics features on shared hairlines in a framed figure, each with a key figure and a sparkline, where a light follows the pointer and keyboard focus and dims the rest of the grid.
- Pro
Tilt Parallax Card Grid Features
Card gridsSix IDE-tool cards on a tinted panel beside a sticky header: each card's drawing is three layers at different depths that tilt in 3D toward the pointer and drift apart, flat on touch screens and with reduced motion.
- 010203Pro
Minimal Outline Card Trio Features
Card gridsThree outline cells with oversized step numerals and an outcome badge at each foot, under a start-aligned header, for an event-planning tool.
- Pro
Inset Border Card Grid Features
Live controlsSix ring-inset preference cells for a team-settings app, each holding one working control: a switch, a slider, a toggle group, a select, a checkbox and a segmented control.
- Pro
Animated Icons Features
Card gridsA three-by-three grid of hand-drawn SVG icons that each play their own animation on hover, keyboard focus or tap: a bell rings, a check draws, an arrow uploads.