Note card

A note as a card in the grid of a record's notes tab. The whole card is a <button> that opens the note; it is at least 184px tall, the body clamps at five lines, and the footer carries the author and the date. CSS apps/web/src/ds/note-card.css; rendered inside apps/web/src/components/notes/NotesGrid.tsx.

Two details that are canon and easy to get wrong: the date in the footer is never set in tabular figures, and an empty title or body shows a muted placeholder rather than collapsing the card.

When to use

• The notes tab of a record, as a grid of cards.
• Anywhere notes are browsed rather than read in sequence.

When not to use

• A note inside a timeline or an activity feed — that is a row, not a card.
• The note's own detail — that is the note dialog.
• Any other content; the card's anatomy is the note's.

Anatomy

• Grid .note-grid: auto-fill from 272px, so the number of columns follows the container.
• Card .note-card: a <button>, min-height 184px, hairline plus shadow-xs, with its own focus ring.
• Title .note-title — one line; .muted when the note has none (Bez názvu).
• Body .note-body — five-line clamp; .muted when empty (Bez obsahu).
• Footer .note-foot: author .note-by (avatar + name, or a dash) and date .note-when (never tabular).
• Loading: .note-card--sk shares the grid so nothing jumps.

Best practices

Do

• Keep the card a single control — the whole card opens the note.
• Show the placeholders instead of hiding an empty note; a note with no title still exists.
• Let the clamp do the truncating; do not pre-cut the text.
• Keep the date in normal figures — tabular ones are for columns of numbers.

Don't

• Put actions on the card; they belong to the note's own screen or its menu.
• Let the card grow to fit the text.
• Replace the author with an icon; the name is the information.

Content

• Title as the user wrote it; the placeholder is Bez názvu.
• The body is the note's own text, cut by the clamp.
• The date follows the year convention (26. 8.).

Related

• item-list — notes as rows, in a feed.
• section-block — the heading above the grid.
• Stories: components--note-card--default, --variants, --states, --composition.