Cards & Expandables

A stack of independent cards where opening one smoothly expands its detail and closes any other open card, while every card's summary stays legible whether open or closed. Height animates off the panel's real measured content, so there's never a layout jump.

React

The loading shape for a grid of cards — media block, title line, sub line, sized to match real card dimensions so the grid doesn't shift when data arrives. Ships media, list and stat variants; static (not faster) under reduced motion and hidden from screen readers.

React

Two options side by side for an A-vs-B decision point — plan tiers, old-vs-new, build-vs-buy — stacking on mobile, with one card raised and badged as the recommended pick.

Astro

A directory entry — avatar, name, role, a short list of real tel/email/location contact methods, and one primary action. Built for a staff directory or "your account manager" block, not a hover-reveal bio tile.

React

A learning-dashboard tile showing course title, lesson completion as both a bar and a written count, time remaining, and a resume action — built for a "continue where you left off" rail.

Astro

A content-offer tile for a resource library or lead-magnet grid — file type badge, title, short description, locale-formatted size, and a download action. Built for a standalone promotional grid, not a stacked attachment list.

Astro

A listing row for a meetup, webinar or conference session — a prominent day/month date block, title, location and time, with a one-click add-to-calendar download that generates a real .ics file by hand. No calendar SDK, works even with JS disabled.

Astro

Card that expands into a focused overlay on desktop and a draggable bottom sheet on mobile, with three snap points. Portal-rendered, focus-trapped, scroll-locked and reduced-motion aware.

React

The standard feature-grid tile — icon, title and one line of copy that lifts and shadows on hover and focus, so a row of them reads as tactile instead of flat text in boxes.

Astro

A row for an upload list or attachment drawer — type icon, filename, locale-formatted file size, and download/remove actions. Built for stacking one per uploaded file, with the remove action firing a hook event so you can wire real deletion.

Astro

Full-bleed photo card with title and copy sat over a bottom scrim, tuned so white text stays readable against a bright sky shot exactly as reliably as a dark one — no manual contrast tweaking per image.

React

A full inbox or notification-centre card — sender avatar, subject, clamped preview, timestamp, unread state and optional mark-read/archive actions — for feeds that need a proper card, not a dense list row.

Astro

The tile an integrations or connected-apps settings page is built from — service mark, description, and a clearly-labelled connected/disconnected state with its connect or disconnect action. Shows the linked account and last-synced time once connected.

React

The shared-link unfurl people already expect from iMessage, Slack and Notion — thumbnail, favicon, source and description in one clickable card, dropped into any feed or share surface.

React

A store/branch listing tile — address, today's hours, distance and a Get Directions action that deep-links to Google Maps by default. Drop in any static map image (Mapbox/Google Static Maps API or a screenshot) via a plain prop; no map SDK, no API key required to render the card itself.

Astro

Image or video cover card locked to a fixed aspect ratio with a skeleton placeholder, so the cover never shifts the title or meta row as it loads — the fix for cover-card CLS in blog grids, galleries and video libraries.

React

Pricing tier card that expands in place into a full feature-by-feature comparison table, so shoppers can go deep on one plan without leaving the card or jumping to a separate comparison page.

React

A compact product tile built for a side-by-side comparison row — image, title, price with an optional strike-through, and a short spec list that stays readable at small widths. Lighter than a full product-detail panel, denser than a storefront grid card.

Astro

A testimonial tile sized to sit three-up in a plain grid — quote, name, role, avatar and an optional star rating that's labelled for screen readers, not colour- or icon-only. A generic card primitive rather than a section-owning marketing block.

React

A compact, star-first review tile for a review-wall grid or product page — rating, review text, reviewer identity and a verified-buyer marker. A single-review primitive (not a section), distinct from Marketing & Social Proof's aggregate review-card and quote-led testimonial-card.

React

A single-metric KPI tile for a dashboard grid — big number, an auto-coloured up/down delta pill, and an optional inline sparkline so the direction reads at a glance. No chart library, pure inline SVG.

Astro

The card shape a support queue, issue board or ops tracker is built from — status pill, title, meta row with ID/priority/updated-at, and an assignee chip with avatar fallback. Status is always labelled, never colour-only.

React

Compact team tile that reveals a bio and social links on hover, with the exact same reveal on keyboard focus, so the richer detail isn't mouse-only and the grid never reflows while it opens.

React

A single dated entry for a vertical timeline — changelog, case history, roadmap or company milestones — with a connector node and line sized to chain into a list, a status flag (complete / current / upcoming) that's never colour-only, and a slot for the body copy.

Astro

The tile a video library, course list or media grid is built from — poster frame, duration badge, play affordance and an optional watched-progress bar. Links out to your own player route rather than embedding one, so a grid of these stays light.

React