Stays Stay Facts

Stay Facts

Know before you go: age, group size, check-in and check-out, the walk up, visitors. A glyph, a label and the answer for each.

Preview

Know before you go

Age: 18 and over
Group size: Up to 8
Check-in: 1 PM
Check-out: 10 AM
The walk up: 200 m from the road
Visitors: Ask at the front desk

The facts are samples: every Zostel lists its own.

Usage

tsx

import { StayFacts, ZostelIcon } from "zostel-ui";

const glyph = (name) => <ZostelIcon set="zostel-ui" name={name} size={20} color="currentColor" />;

<StayFacts
  facts={[
    { icon: glyph("sunrise"), label: "Check-in", value: checkIn },
    { icon: glyph("sunset"), label: "Check-out", value: checkOut },
    { icon: glyph("community"), label: "Group size", value: groupSize },
  ]}
/>

StayFacts

Prop	Type	Default	Description
`facts`	`{ icon?: ReactNode; label: string; value: ReactNode }[]`	—	The facts. A glyph from the zostel-ui set in currentColor reads by day and at night.
`columns`	`2 \| 3 \| 4`	`2`	Columns from sm up; a phone shows two.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

facts

Type: { icon?: ReactNode; label: string; value: ReactNode }[]

Default: —

The facts. A glyph from the zostel-ui set in currentColor reads by day and at night.

columns

Type: 2 | 3 | 4

Default: 2

Columns from sm up; a phone shows two.

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).

On zostel.com

Every stay’s page lists these before its rooms. Here they are a description list, so a screen reader reads each label with its answer, and the glyphs come from the brand’s own UI icons rather than emoji.