container · Normal DOM only

Card

Themed surface — border, radius, optional light shadow. Three variants: surface, outlined, subtle.

Use Card for any reusable rectangular block — record summary, settings group, metric tile. It already encodes the canonical Twenty border + radius; never re-implement with a bare div.

Inside a Twenty front-component, prefer the bridge import

This Card is Radix-based and uses data-* selectors that the Twenty Remote DOM bridge strips. For panel content, import { Card } from @8maverik8/twenty-design/twenty-ui — re-exports the same primitive from twenty-sdk/ui, which Twenty has verified inside front-component'ов.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { Card, CardHeader } from '@8maverik8/twenty-design';

Examples

Three variants

Surface

Default

Body content.

Outlined

No shadow

Body content.

Subtle

Inside lists

Body content.

tsx
<Card>…</Card>
<Card variant="outlined">…</Card>
<Card variant="subtle">…</Card>

Variants

variant

surfacedefaultLight shadow + light border — default elevation.

outlinedStronger border, no shadow — for nested cards.

subtleSecondary background — fits inside lists.

Guidelines

✓

Use CardHeader for a title + actions row.Consistent typography and spacing across all cards.

Stack three cards inside each other.Nested elevation reads as bug; collapse the layout.