syntheticnew

BentoCard

One tile of a BentoGrid: a title, optional body and media, on a neutral or tinted surface.

Tideline mobileTwo half tiles and a wide one, each on its own tint

Tasks that work offline

Check things off on the quay, sync when you are back.

Projects

Harbour rebrand

On track, due 24 Oct

Tideline mobile

Review, due 7 Nov

Crew interviews

Late, due 17 Oct

A calendar for the crew

Reviews, launches and payroll cut-offs.

Calendar

Harbour launch

24 Oct, 09:00

Mobile design review

22 Oct, 14:00

Crew interview 11

21 Oct, 11:30

A quiet inbox

Only what is yours, with the Harbour launch on 24 Oct pinned to the top.

Projects

Harbour rebrand

On track, due 24 Oct

Tideline mobile

Review, due 7 Nov

Crew interviews

Late, due 17 Oct

Default tone

Offline tasks

Check things off on the quay.

tint-1

Offline tasks

Check things off on the quay.

tint-2

Quiet inbox

Only what is yours.

tint-4

Crew calendar

Shifts and reviews.

In context

Project landingText-only tiles summarising a project

Harbour rebrand

Identity, site and launch kit for the harbour trust.

84% complete

Due 24 Oct, owned by Maya Chen.

Launch is on 24 Oct

Crew briefing at 09:00, then the site goes live.

Props

Prop	Type	Required	Default
`title`	`ReactNode`	Yes	—
`body`	`ReactNode`	No	—
`media`	`ReactNode`	No	—
`span`	`2 \| 3 \| 6 \| undefined`	No	2
`tone`	`"default" \| "tint-1" \| "tint-2" \| "tint-3" \| "tint-4" \| undefined`	No	default
`mediaPosition`	`"below" \| "end" \| undefined`	No	below
`headingLevel`	`2 \| 3 \| undefined`	No	3

Sizing and media

A card sizes to its content: media is a whole DeviceFrame and is never cropped. mediaPosition="below" puts the media under the text; "end" puts it beside the text on the wide grid (use with span 3 or 6). Tints use --rebar-color-tint-1 to -4.

Accessibility

The title is a real heading (headingLevel 3 by default, or 2) and the media keeps its own alt text. DOM order is text, then media.

data-rebar-* attributes

data-rebar-component="bento-card", data-rebar-span, data-rebar-tone and data-rebar-media-position on the root; data-rebar-part values text, title, body and media.

Migrating to Ant Design

Not codemod-covered. The nearest Ant Design shape is a Card inside a Col.