patterns

EntityCard

Clickable tile with a preview slot. Same chrome as ProjectCard plus a required visual area on top — for furniture, spaces, presets, templates, anything identified by image rather than by name alone.

The preview frame uses a CSS `aspect-ratio` so cards align in a grid regardless of preview content. Default ratio is `16/9`; pass `previewAspect="1/1"` for square thumbnails or `"4/3"` for architectural drawings. Kebab sits in the corner on top of the preview with a subtle backdrop blur so it remains legible on any background.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/entity-card.json

Or import from the workspace package:

import { EntityCard } from "@8maverik8/design";

Examples

Furniture entity (3D thumbnail placeholder)

<EntityCard
  preview={<span className="text-xs">Превью 3D</span>}
  previewAspect="1/1"
  title="Шкаф 800 × 2000 × 450"
  subtitle="фанера 18мм, минификс"
  footer={<><span className="text-foreground">v3</span><span className="mx-1 text-muted-foreground/50">·</span><span>2 ч назад</span></>}
  menu={
    <>
      <DropdownMenuItem><Pencil /> Переименовать</DropdownMenuItem>
      <DropdownMenuSeparator />
      <DropdownMenuItem variant="destructive"><Trash2 /> Удалить</DropdownMenuItem>
    </>
  }
/>

Anatomy

PreviewAspect-ratio frame on top. Empty fallback uses `bg-muted/40`.
Body`p-4` block with title + subtitle + footer.
TitleBold, truncated. Reserves `pr-8` for the kebab.
Footer (optional)Mono / tabular-nums slot — version pill, last-edited timestamp.
Kebab (optional)Floating top-right with `bg-background/80 backdrop-blur-sm` so it stays visible on any preview.

Guidelines

Use EntityCard when the entity has meaningful visual content (3D thumbnail, rendering, swatch).If you'd display only a name + counts, ProjectCard is the right tile.
Pick a single `previewAspect` for the whole grid.Mixed aspect ratios in one grid look broken even when each individual tile is fine.
Stretch a non-fitting preview to fill the frame.Keep the original aspect with `object-contain` on the inner img; let the frame's bg show through. Distorting the thumbnail is worse than letterboxing.
Render a versioned entity's current snapshot in the preview, not a live editor frame.Live editor renders are expensive and flicker; previews are saved with each version snapshot.