Entity

A component that represents a single resource — person, team, or file — as an inline compact row. Each row is composed of an avatar or icon, a primary label, secondary metadata, and an optional trailing status badge or action. Distinct from Context Card (/design/components/context-card) the Context Card is a hover-triggered preview panel; Entity is a single row that lives inside a list.

Person Entity Row

Initial avatar + name + role metadata + trailing status badge + view link. Use literal #fff text on primary solid-fill avatars to preserve contrast across dark-mode transitions.

Person Entity Row

Jihyeon KimSocial Finance Team · Team Lead
ActiveView
Seongbin LeeDigital Innovation Team · Senior
ActiveView
Mirae ParkOperations Support Team · Associate
On SecondmentView

Org · File Entity Row

Org rows use an icon avatar on a primary-tint background; file rows use a file-specific icon on a positive-tint background. Place icon buttons or external links in the trailing slot.

Org · File Entity Row

Social Finance TeamSocial Solidarity Bank · 8 members
Digital Innovation TeamSocial Solidarity Bank · 5 members
Private
2026_business-plan.pdf2026-06-10 · 2.4 MB

Rules

  • Distinct from Context Card — Entity is a single row inside a list: no description, no stats, no separate panel. Context Card is a structured hover-triggered preview panel.
  • Minimum row height 52px. Avatar 36px circle (--r-pill); file icon uses 8px radius (--r-ctl).
  • Primary solid-fill avatars use literal #fff text; sky-fill avatars use literal #0A1E33 — prevents color flip in dark mode.
  • Icon avatar: primary 12% tint (dark: sky 14% tint). File icon: positive 12% tint.
  • Status badges: no solid fill — use 12–14% color tint background with the matching foreground color.
  • Trailing links and icon buttons always live in the trailing slot, clearly separated from the row click target. In dark mode, links use --c-sky.