docs / patterns / entity-card

EntityCard

a card you assemble from parts: media, meta, title, body and actions, in any order. the same parts render a project tile, a list row or a showcase card, depending on the variant.

intensity · structuresrsc · server

provenance

shaped from sisu-plus

layer

core / patterns

intensity

structures · organizes a region, stays out of the content

composition

stack for tiles in a grid, row for compact lists, showcase for the numbered selected-work cardinteractive on the root puts the arrow on the title and the lift on hovernever an EntityCard inside another cardan interactive card gets one destination, not a pile of competing buttons

a11y

EntityTitle renders an h3 · the hover arrow is decorative · media scaling stops under motion-reducejest-axe

dependencies

Card from the same package
live demo · try it out
Project

Aurora tokens

A layered token pipeline that emits Tailwind v4 and DTCG.

customize
variantstack tile, row list, showcase card
interactivehover lift and title arrow
mediathe cover panel
actionsthe button row
titlethe h3 heading
bodythe description
usagecopy
<EntityCard>
  <EntityMedia>
    <div className="h-full w-full [background:linear-gradient(135deg,color-mix(in_srgb,var(--color-accent)_30%,transparent),transparent)]" />
  </EntityMedia>
  <EntityMeta>
    <Badge tone="accent">Project</Badge>
  </EntityMeta>
  <EntityTitle>Aurora tokens</EntityTitle>
  <EntityBody>A layered token pipeline that emits Tailwind v4 and DTCG.</EntityBody>
  <EntityActions>
    <Button size="sm">Open</Button>
  </EntityActions>
</EntityCard>

props

proptypedefaultnotes
variant"stack" | "row" | "showcase""stack"layout: stack is media on top, row puts the media beside the content, showcase is the big numbered work card. row and showcase need EntityContent around the text parts.
classNamestring—merged onto the root Card, which adds a 2xl radius, overflow-hidden, and a flex column.
...Card propsCardProps—EntityCard extends the Card primitive, so every Card prop is forwarded.

get it

bun add @usva-ui/reactcopy
usagecopy
import { EntityActions, EntityBody, EntityCard, EntityMedia, EntityMeta, EntityTitle } from "@usva-ui/react/patterns/entity-card";
import { Badge } from "@usva-ui/react/primitives/badge";
import { Button } from "@usva-ui/react/primitives/button";

<EntityCard>
  <EntityMedia>
    <img src="/cover.jpg" alt="" />
  </EntityMedia>
  <EntityMeta>
    <Badge tone="accent">Design</Badge>
  </EntityMeta>
  <EntityTitle>Aurora tokens</EntityTitle>
  <EntityBody>A layered token pipeline for the kajo theme.</EntityBody>
  <EntityActions>
    <Button size="sm">Open</Button>
  </EntityActions>
</EntityCard>