Tables · Genus Examples

The default for tabular DATA — lists of records — is a lister with card rows (the data-list page), even when the list is small and has no search or paging yet. A plain .table is the EXCEPTION, used rarely: small summary tables (settings, totals), a handful of rows inside a card or in running text.
The house look (small uppercase muted headers, theme-aware separators, cell alignment) applies to every .table automatically — no extra classes for the look.
WHEN a table is warranted, its default placement is full-bleed in a card: the table sits directly in the card (NOT in .card-body) wrapped in .table-responsive, with .mb-0 — columns align with the card padding, the last row drops its border.
Add .align-middle whenever rows carry avatars or buttons; .table-hover whenever rows have actions; .text-end on numeric/date columns (th AND td).
Columns that matter less hide on mobile with .d-none .d-md-table-cell — and every table gets .table-responsive regardless.
No visual variants beyond these: .table-sm .table-striped for long compact listings; .table-bordered is not used.

Member	Role	City	Status
AP Ana Popescu ana@example.com	Design lead	Bucharest	Active
BI Bogdan Ionescu bogdan@example.com	Backend	Cluj-Napoca	On leave
CG Carmen Georgescu carmen@example.com	QA	Timisoara	Inactive

Invoice	Client	Amount	Date
#2041	Genus SRL	€1,250.00	03.07.2026
#2040	Paces Studio	€860.00	28.06.2026
#2039	Northwind	€2,300.00	21.06.2026
#2038	Acme Corp	€415.00	14.06.2026

The person cell is a fixed pattern: .d-flex.align-items-center.gap-2 with an .avatar.avatar-sm (initials, or bg-*-subtle text-*-emphasis for color) + a name/email stack (.fw-semibold / .text-body-secondary.small).
Status cells are badges on the subtle/emphasis pair (the color map).
Action cells sit right and follow the SAME shapes as lister rows (the data-list page): the inline .btn-group of .btn-sm icon buttons (shown here — .btn-secondary edit, .btn-danger delete, each with a title; only SOLID buttons in a .btn-group, never outline), or, when actions are many, the actions-only dropdown — one .btn-contrast kebab button opening the menu. One shape per table, consistently.
A small summary table may live inside .card-body (it keeps the body padding); it still takes .mb-0 and gets a discreet frame — hairline border + radius — automatically.