Entity Card

Recipe CSS

This is the exact CSS your kit ships for Entity Card — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.

/* === Entity card (SECTION tier) ==========================================
 * A card for "a thing with an identity + a few key facts": a logo/avatar + name
 * + kebab in a compact header, a FULL-BLEED divider, then label/value meta rows.
 * Reusable for clients, contacts, team members, repos, integrations. Anatomy:
 * .entity-card > .entity-card__head (mark slot · .entity-card__name · .entity-card__menu)
 * + .entity-card__meta (.entity-card__row × N: .entity-card__label / .entity-card__value).
 * Padding lives on the head/meta (not the card) so the header divider is full-bleed. */
.entity-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; background: var(--k-surface); border: 1px solid var(--k-border); border-radius: var(--k-radius-lg); box-shadow: var(--k-shadow-xs); }
.entity-card__head { display: flex; align-items: center; gap: var(--k-s-10); padding: var(--k-s-12) var(--k-s-14); border-bottom: var(--k-divider); }
.entity-card__name { font-weight: var(--k-weight-semibold); color: var(--k-fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entity-card__menu { margin-left: auto; flex: none; }
.entity-card__meta { display: flex; flex-direction: column; gap: var(--k-s-10); padding: var(--k-s-14); }
.entity-card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--k-s-8); }
.entity-card__label { color: var(--k-fg-muted); font-size: var(--k-type-small); }
.entity-card__value { font-weight: var(--k-weight-medium); color: var(--k-fg); }
/* --fill: a compact tinted header (less tall, slightly coloured, full-bleed
 * divider) — the head wears --k-surface-fill. */
.entity-card--fill .entity-card__head { background: var(--k-surface-fill); }