Card
A surface for one thing.
Brand
Harbour rebrand
Identity, site and launch kit for the harbour trust.
Product
Tideline mobile
Offline tasks and a quiet inbox for the crew.
Research
Crew interviews
Twelve calls, one clear pattern.
No projects yet
Start with a template.
Quarterly crew wellbeing and rota review for the northern depots
Harbour rebrand
Wayfinding for the three northern depots.
First Reading — Ephesians 1:15-23
In context
Open tasks
42↓ 6 this week
Due soon
73 today
Shipped
18↑ 4 vs last month
Mobile additions
First reading, Gospel and a short reflection. About six minutes.
Your last Mass was 19 October.
Four short readings from the Fathers of the Church on the Mother of God.
Read ›Upgrade for 2,000,000 a month.
Your Account
Plan and billing
Upgrade for 2,000,000 a month.
First reading, Gospel and a short reflection.
Your last Mass was 19 October.
From the Library
Four short readings from the Fathers of the Church on the Mother of God.
Read ›Props
| Prop | Type | Required | Default |
|---|---|---|---|
cover | ReactNode | No | — |
avatar | ReactNode | No | — |
title | ReactNode | No | — |
titleLines | number | undefined | No | — |
subtitle | ReactNode | No | — |
labels | { label: ReactNode; tone?: TagTone | undefined; }[] | undefined | No | — |
extra | ReactNode | No | — |
cornerBadge | ReactNode | No | — |
footer | ReactNode | No | — |
actions | ReactNode[] | undefined | No | — |
editable | boolean | undefined | No | — |
onTitleChange | ((value: string) => void) | undefined | No | — |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
activeBorder | boolean | undefined | No | — |
watermark | string | undefined | No | — |
tone | "default" | 1 | 2 | 3 | 4 | undefined | No | default |
href | string | undefined | No | — |
target | string | undefined | No | — |
rel | string | undefined | No | — |
renderLink | RenderLink | undefined | No | — |
orientation | "vertical" | "row" | "tile" | undefined | No | vertical |
eyebrow | ReactNode | No | — |
promo | boolean | undefined | No | — |
onDismiss | (() => void) | undefined | No | — |
Accessibility
A plain <div>: a visual grouping, not an interactive or landmark role. aria-* and data-* props pass through to the root, so add role="article" (or whatever the context calls for) yourself.
data-rebar-* attributes
data-rebar-component="card" on the root; data-rebar-part is "corner-badge", "cover", "header", "avatar", "title", "subtitle", "extra", "labels", "body", "footer", "actions" or "action" (per item). Only the parts in use render.
Migrating to Ant Design
cover, title, extra and actions match AntD's Card props directly. avatar moves inside Card.Meta. labels, footer and titleLines have no AntD equivalent (recompose by hand; a CSS line-clamp for the title). cornerBadge maps to Badge.Ribbon wrapping the card.