imitationnew
FloatCard
A small raised card for a floating fragment of interface.
Floating fragmentsDefault and accent tones
Next up
Harbour launch, 24 Oct, 09:00
Jonas Weber
Two things. Offline sync is in review and the crew-interview notes are late.
Mobile design review, 22 Oct
Crew interviews
Twelve calls done, and one clear pattern: handover is where things slip.
84% done
In context
Home screenFloating cards over the project screen
Tideline
Next up
Harbour launch, 09:00
Review
Mobile design review, 22 Oct
MC
Maya is on the harbour homepage.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
label | string | undefined | No | — |
tone | "default" | "accent" | undefined | No | default |
Theming
Colour comes from --rebar-color-bg-primary, --rebar-color-text-primary and --rebar-color-border; the accent tone uses --rebar-color-primary. --rebar-shadow-float sets elevation and --rebar-float-card-radius the rounding.
Accessibility
A plain <div> of ordinary content, read in place and not aria-hidden. Add your own role="group" and aria-label to announce a set as a unit.
data-rebar-* attributes
data-rebar-component="float-card" and data-rebar-tone (default or accent) on the root; data-rebar-part values label and body.
Migrating to Ant Design
Not codemod-covered. The nearest Ant Design shape is a small Card with a box shadow.