Media Card

Preview

Aurora Downlight

8 products · 3 sub-families3 missing specs2h ago

Install

pnpm dlx shadcn@latest add @vegastack/media-card

Usage

import { MediaCard } from "@/components/ui/media-card";

<MediaCard
  href={`/families/${f.id}`}
  linkRender={<Link href="" />}
  image={f.imageUrl}
  fallback={<BrandMark />}
  title={f.name}
  meta="8 products · 3 sub-families"
  badge={
    <Badge variant="warning">
      <TriangleAlert aria-hidden />3 missing specs
    </Badge>
  }
  timestamp={<RelativeTime date={f.updatedAt} format="suffix" />}
  actions={<RowActionsMenu label={f.name} actions={actions} />}
/>;

MediaCard is one record in a card grid: a 48px Thumbnail on the left, the title, one meta line (meta, then the badge, then the timestamp), and the ⋯ menu on the right, top-aligned with the title's first line (never centred on the text block). With href the whole card is a link — the title is the link, stretched over the card — and it never underlines. DataList's grid view renders one per row.

PreviewCode

Aurora Downlight

8 products · 3 sub-families3 missing specs2h ago

Examples

Fallback image

A record with no image shows fallback — the app's brand mark.

Large

size="lg" puts a 16:9 image on top, for records whose picture matters.

PreviewCode

Cove Linear

12 products · 4 sub-families3 missing specs

Without an image

A card with neither image nor fallback has no image area, and surface={false} drops the card's own border for a host that owns the surface, such as a Board card.

API Reference

Accessibility

• The card is one link, named by its title; the meta line, badge and time are read after it.
• The ⋯ menu sits above the stretched link, so it is its own tab stop and never follows the link. It shows on hover and on keyboard focus, and always on a touch screen.
• The image is decorative (alt="") because the title names the record.

Do / Don't