# Kiosk
A full screen for a tablet that stays on at a door: a name on top, big language buttons, a huge clock while it waits, one round state and one or two huge actions - read from across a room and pressed with a glove.
## Example
`kiosk` fills the window with a column: `kiosk-head`, `kiosk-langs`, `kiosk-main` in the middle - the page's `main` - and `kiosk-foot`. It is not selectable and answers a tap at once, without waiting for a double tap. A kiosk is dark: `data-theme="dark"` on its `html`, or on the `kiosk` itself.
```html
Riverside tower
Wednesday, November 4
07:42
Tap your card
Hold it to the reader under the screen
REDZ ERP · Site entrance
```
### The states
`kiosk-state` on an [icon tile](icon-tile.md) is the round state, in the tile's tones: `kiosk-state-idle` is smaller and breathes while the screen waits (still when motion is reduced), `aria-busy="true"` turns a ring round it while a tap is checked. `kiosk-title` and `kiosk-line` say what happened; a `btn-xl` in `kiosk-main` grows to a kiosk's size. `kiosk-corner` holds a camera's preview, mirrored, at the bottom end.
```html
Sid Sample
Last in at 07:02
```
A kiosk that reads badges through a keyboard-wedge reader takes what it types in a field kept focused [`offscreen`](utilities.md#utilities-offscreen), with `inputmode="none"` so no keyboard opens.
## Accessibility
- The words carry the state; the tone and the icon repeat them. Say a new state in a polite live region the page keeps - the title is a good one.
- The language buttons are a named group of `btn btn-xl` toggles, each with its `lang` and `aria-pressed`; the pressed one turns light on dark.
- The type grows with the screen; nothing is smaller than 14 px, and every button is at least 56 px tall.
## Tokens
From [`css/components/kiosk.css`](https://github.com/redz-tech/REDZ.UI/blob/main/css/components/kiosk.css). It declares `--redz-btn-hover`, `--redz-btn-hover-fg` on its root, never on rows or items.
It reads the theme's `--redz-space-16`, `--redz-space-20`, `--redz-bg-page`, `--redz-text`, `--redz-space-32`, `--redz-space-12`, `--redz-bg`, `--redz-text-muted`, `--redz-tile-fg`, `--redz-fs-20`, `--redz-radius-16`, `--redz-fs-14`.