Tickster Styleguide

Appearance

QR Code ​

When to use it ​

The QR Code component is used to display scannable QR codes. It is commonly used for encoding URLs, voucher codes, or other information that can be easily scanned by a mobile device.

INFO

This component uses JS to generated the actual QR image using Kjua which is not bundled in framework-vendor.js since the way we work with QR codes differ so much (it's often imported directly within a Vue component). In the framework there is however a way to trigger a default look (see examples below) by only adding a data-qrcode attribute to an element, which then gets "filled" with the QR image.

Default init JS object
js
{
    text: "The text", // QR content
    render: "image",
    crisp: true,
    mode: "plain",
    minVersion: 2,
    rounded: 100, // roundend corners in pc: 0..100
    ecLevel: "L", // L, M, Q, H (error correction level)
    quiet: 2,
    fill: "#243846", // foreground color
    background: "#fff", // hex color (or null for transparent)
    size: 220 // in pixels
}

Variants ​

QR codes are always black on white and should never be overwritten by other text or background color, not even when in dark mode. The optional attribute data-qrcode-label appends a text label (with the class .c-qrcode__label) after the QR image. Use this whenever the text content is important to display in clear text (e.g., voucher codes).

What it looks like ​

Code examples ​

html
<div class="c-qrcode" data-qrcode="https://www.tickster.com/"></div>
html
<div class="c-qrcode" data-qrcode="https://download.tickster.com/Q12345678" data-qrcode-label="Q12345678"></div>

Accessitiblity notes ​

When using QR codes, ensure that there is a clear text alternative for users who cannot scan the code. This can be achieved by providing the same information in a readable format near the QR code. Additionally, make sure the QR code is large enough to be easily scanned and has sufficient contrast against its background. Also note that the color passed in via the init object does not need a dark mode version since it's always sitting on a white background no matter the theme.