Context Card
An entity preview card (hover card) that appears when the cursor rests on a link or item. Distinct from Tooltip (/design/components/tooltip): a tooltip delivers a short text hint (.term/.tip), whereas a context card is a structured entity preview containing an avatar, name, metadata, description, stats, and an action.
Person & Organization Entities
Person card: initial avatar + name + affiliation + description + stats + profile link. Organization card: icon avatar + name + parent organization + description + stats + team link.
Kim JihyeonView Profile
Kim Jihyeon
Handles social enterprise consulting and financial support.
42Projects
3.2 yrsTenure
Social Finance TeamView Team Page
Social Finance Team
Social finance support for vulnerable groups and social enterprise consulting.
8Members
12Active Projects
Rules
- Distinct from Tooltip — a tooltip (
.term/.tip) surfaces a 1–2 line hint for unfamiliar terms. A context card is a structured entity preview (person · organization · document) containing an avatar, stats, and an action. - Panel radius
--r-lg(12px), shadow--sh-full, width 288px. - Avatar: circular (
--r-pill) + solid primary background (initials) or icon variant (primary 12% tint). Solid primary backgrounds use literal#ffftext — preserves contrast in dark mode. - Meta link:
--c-primary(dark:--c-sky). No underline when context makes the link affordance clear. - Action button: primary 10% tint background + primary text. Dark: sky 12% tint + sky text. A solid primary button is too heavy inside a card — use the tint variant.
- Triggers must communicate interactivity — use a link style or underline to signal that clicking or hovering is possible. Surface the information inline as well (mobile and screen-reader accessibility).