Amenity Card
One amenity: its roundel and a short label. Use the master roundels as they are, or the UI weight on a landscape colour.
Preview
The roundels, in an AmenityGrid
UI weight on a landscape colour
Wi-Fi
Café
Lockers
Usage
tsx
import { AmenityCard, AmenityGrid, WifiIcon, LockersIcon } from "zostel-ui";
<AmenityGrid columns={4}>
<AmenityCard icon={<WifiIcon size={48} />} label="Wi-Fi" />
<AmenityCard icon={<LockersIcon size={48} />} label="Lockers" />
</AmenityGrid>
{/* a one-colour icon on a disc */}
<AmenityCard icon={<WifiIcon variant="ui" color="#FFFFFF" />} label="Wi-Fi" backgroundColor="#AA5EA5" />AmenityCard
| Prop | Type | Default | Description |
|---|---|---|---|
icon | ReactNode | — | A roundel (<WifiIcon />, brings its own disc) or a one-colour icon. |
label | string | — | Short, in capitals by style. |
backgroundColor | string | — | A disc behind a one-colour icon — a landscape colour. Leave unset for roundels. |
className | string | — | More classes, merged with the component’s own (tailwind-merge). |
iconType:
ReactNodeDefault: —
A roundel (<WifiIcon />, brings its own disc) or a one-colour icon.
labelType:
stringDefault: —
Short, in capitals by style.
backgroundColorType:
stringDefault: —
A disc behind a one-colour icon — a landscape colour. Leave unset for roundels.
classNameType:
stringDefault: —
More classes, merged with the component’s own (tailwind-merge).
AmenityGrid
| Prop | Type | Default | Description |
|---|---|---|---|
columns | 3 | 4 | 5 | 6 | 4 | Columns from sm up. A phone always shows three a row, so the labels never crowd. |
className | string | — | More classes, merged with the component’s own (tailwind-merge). |
columnsType:
3 | 4 | 5 | 6Default:
4Columns from sm up. A phone always shows three a row, so the labels never crowd.
classNameType:
stringDefault: —
More classes, merged with the component’s own (tailwind-merge).
The roundel rule
On a light disc (Marigold, Sunshine, Sky, Mustard Leaf, Paddy Green, Apricot, Blush) the glyph is Steel Grey; on the rest, white.