Entity

A row representing a thing — avatar, name, metadata, action.

Rows

buena mono

typeface · v1.216 · SIL OFL 1.1

mrkdwn

app · 6 platforms · in development

<ItemGroup>
  <Item>
    <ItemMedia variant="icon">bm</ItemMedia>
    <ItemContent>
      <ItemTitle>buena mono</ItemTitle>
      <ItemDescription>typeface · v1.216 · SIL OFL 1.1</ItemDescription>
    </ItemContent>
    <ItemActions>
      <Button variant="ghost" size="sm">Open</Button>
    </ItemActions>
  </Item>
</ItemGroup>

Variants & sizes

Outline

Bordered row — the default entity card.

Muted

Filled surface for grouped lists.

Small

Tighter padding via size="sm".

<Item variant="outline">…</Item>
<Item variant="muted">…</Item>
<Item variant="outline" size="sm">…</Item>

Media: avatar, image & skeleton

Avatar media

buena labs · owner

Image media

Specimen thumbnail via variant="image".

Header, link, selection & actions

Release 1.2

shipped

Whole row is a link — coding ligatures added.

mrkdwn

Selected for publishing.

buena mono

Not selected.

Geist Entity's fill maps to ItemContent, which stretches by default; a second ItemContent next to it collapses to flex-none. Geist's per-column leftClassName/rightClassName map to className on ItemMedia and ItemActions. The row dropdown opens a dots-menu.

Markdown for agents: /design/entity.md · spec: /design.md