QR Card v0.1.1 · @behivetech

Examples of v0.1.1 are shown as code; only the latest version runs live. Open the live examples →

An instruction page card: title, blurb, code, printed address and a footer.

Basic Qr Card

1const BasicQrCard = () => (
2  <QrCard
3    title="Wi-Fi and the router"
4    description="Join the network, then scan to see the full steps and the password."
5    url="https://the-behive.com/q/K7M2QX9P"
6    footer="The Behive"
7  />
8);
9
10render(<BasicQrCard />);

An artwork card with no footer.

Artwork Qr Card

1const ArtworkQrCard = () => (
2  <QrCard
3    title="Blue hour on the porch"
4    description="Oil on canvas by Lena Park. Scan to read about the piece or to buy it."
5    url="https://the-behive.com/q/R4TW8NHC"
6  />
7);
8
9render(<ArtworkQrCard />);

With neither description nor footer the code and its address sit in the middle.

Minimal Qr Card

1const MinimalQrCard = () => (
2  <QrCard title="Check-out" url="https://the-behive.com/q/R4TW8NHC" />
3);
4
5render(<MinimalQrCard />);

A long title and blurb clamp at two and three lines; the address is never cut.

Clamped Qr Card

1const ClampedQrCard = () => (
2  <QrCard
3    title="Hive study no. 3, the garden at dusk, with an unusually long title that wraps"
4    description="Oil on canvas by Lena Park, painted over a single week in the autumn of the year the porch was rebuilt. Scan to read about the piece, its materials and how to buy it."
5    url="https://the-behive.com/q/R4TW8NHC"
6    footer="The Behive"
7  />
8);
9
10render(<ClampedQrCard />);

A value that cannot be encoded shows the dashed invalid box, still named for screen readers.

Invalid Qr Card

1const InvalidQrCard = () => (
2  <QrCard title="Check-out" url="" label="QR code unavailable for this card" />
3);
4
5render(<InvalidQrCard />);