crispmeasured from Attio

EntityCard

The note / entity card from Attio's Notes grid.

Attio's Notes grid card: a bordered white card with an author row (avatar + name), a title, a clamped 3-line excerpt, and a footer row (avatar + name … right-aligned date). The whole card is a button, so it's clickable and keyboard-focusable. Drop it in a CSS grid for the gallery layout.

Preview

Usage

import { EntityCard } from "crisp";

<EntityCard
  author={<><Avatar name="Moon" size="sm" /> moon</>}
  title="Kickoff notes"
  excerpt="Discussed the Q3 roadmap and pricing changes…"
  footer={<><Avatar name="Moon Moon" size="sm" /> moon moon</>}
  date="Aug 27, 2026"
  onClick={() => open(id)}
/>;

API

PropTypeDescription
authorReactNodeTop author row (e.g. avatar + name).
titleReactNodeCard title (single line, truncates).
excerptReactNodePreview text, clamped to 3 lines.
footerReactNodeFooter content (e.g. avatar + name).
dateReactNodeRight-aligned date in the footer.
onClick() => voidFired when the card is clicked.

On this page