Deal card

The card of a deal on the kanban board: the mark, the name, the value, an optional subtitle, the products, the due date and the counts of tasks and notes. packages/ui/src/components/DealCard.tsx, CSS .acrm-dealcard in apps/web/src/ds.css. The hover lift belongs to the board slot around the card (.plpage .card-slot), not to the card itself.

When to use

  • A deal on the pipeline board.
  • A deal shown as a card elsewhere (a record's list of deals) where the same summary is wanted.

When not to use

  • A row in a listing — that is Item list or the segment table.
  • A record's fields — that is Record rail.
  • Any other entity: the card's anatomy is the deal's.

Anatomy

  • Card .acrm-dealcard: 264px, hairline plus shadow-xs.
  • Head .c-top: mark .c-av (square for a company, .round for a person), name .c-name, value .c-val.
  • Groups .c-grp keep the rhythm; a group with nothing in it is not rendered.
  • Subtitle .c-sub, due date .c-date (.over turns critical and adds the dot), products .c-tags.
  • Foot .c-bot: task count .c-task, note count .c-note, due .c-due (.warn / .over). A zero is drawn as a bare icon rather than hidden, so the row keeps its shape.
  • selected marks the deal whose drawer is open; dragging deliberately drops the elevation of the card left in place — the floating copy .acrm-drag-ghost carries --shadow-pop and the target shows the landing slot (see item-list usage, drag).

Best practices

Do

  • Keep the value in the head — it is the reason the card exists.
  • Let the tone live on the date, not on the card.
  • Hide the owner when the board is already filtered to one person.
  • Cap the product list and show the rest as +N.

Don't

  • Add a shadow while dragging; that doubles the browser's ghost.
  • Put actions on the card; the board's actions belong to the column and the drawer.
  • Render an empty group — the rhythm is the point.

Content

  • Name is the company or person the deal is with; the subtitle is what the deal is about.
  • The value is a formatted amount with its currency.
  • Dates follow the year convention (30. 9.).
  • item-list — the same deals as rows.
  • record-drawer — what a click on the card opens.
  • stat-tile — the numbers above the board.
  • Stories: components--deal-card--default, --variants, --states, --composition.

Source: docs/deal-card/deal-card.usage.md · GitLab