QR Card
v0.1.1DraftA printable card with a title, blurb, QR code, the printed address and a footer: it fills its container on screen and prints at exactly 4 x 6 in.
A printable card with a title, blurb, QR code, the printed address and a footer: it fills its container on screen and prints at exactly 4 x 6 in.
Usage
The ```jsx block above runs live on the docs site. Imports are stripped and every registry export is in scope, so you can compose with other components too.
Screen and print
On screen the card follows the theme and fills its container up to 24rem at a 2:3 ratio. Printed, it is exactly 4 x 6 in, forced to light colours with no background and no shadow, keeps a 1px cut line, and is never split across pages. The QR code is black on a white plate in every case.
Accessibility
The title is the card's heading (h3 by default; set headingLevel to fit the page outline). The code's accessible name is the label prop when given, else the address it encodes, else a plain-text title, else "QR code". If url can be empty or unencodable, pass a translated label so the dashed invalid box is named in your language. The card is not interactive: the code is for a phone camera, so there is no link or focus stop.
Examples
Open all 5 →Properties
QrCard props
| Prop | Type | Default | Description |
|---|---|---|---|
title* | ReactNode | — | Card title, clamped at two lines. It is the card's heading. |
url* | string | — | The address the QR code encodes, in full. It is also the code's accessible name, and it is printed under the code without its `https://`. |
className | string | — | Additional class names to merge with the component root element |
description | ReactNode | — | Optional blurb under the title, clamped at three lines |
footer | ReactNode | — | Optional line at the card's foot over a rule, such as the house name or a Wi-Fi hint |
headingLevel | 1 | 2 | 3 | 4 | 5 | 6 | 3 | Which heading tag (`h1`-`h6`) wraps the title. Defaults to `3`. |
label | string | — | The code's accessible name. Defaults to `url`, then a plain-text `title`, then "QR code". Pass your translated text when `url` can be empty or unencodable, so the invalid-value box has a name in your language. |
size | number | 15 | Width and height of the QR code in rem, capped at the card's body width. Defaults to `15` (2.5 in). |
Also accepts the native attributes of its root element (className, aria-*, event handlers, …).