QR Code

A code consisting of an array of black and white squares that is typically used to store URLs or other information for the camera on a smartphone to read. These qr codes can be easily customised using different attributes.

Basic use

To use the QR component, include it in HTML with the required attributes. In HTML, kebab-case attributes are recommended (foreground-alpha, background-alpha), but camelCase aliases are also supported (foregroundAlpha, backgroundAlpha).

Supported attributes

• value: value encoded into the QR code.
• size: output QR size in px.
• padding: inner padding in px.
• foreground: foreground color.
• foreground-alpha (alias foregroundAlpha): foreground opacity in range 0-1.
• background: background color.
• background-alpha (alias backgroundAlpha): background opacity in range 0-1.
• level: error correction level (L, M, Q, H).

Slots:

• top: content rendered above the QR code.
• bottom: content rendered below the QR code.

When to use

Use wje-qr-code to improve readability, scannability, and contextual understanding of content.

When not to use

Do not replace structured interactive data with media-only presentation when precision is needed.

Accessibility

Provide alt text, maintain readable contrast, and include text equivalents for icon-only controls.

Best Practices

• Compress media and use lazy loading in larger collections.
• Keep information priority consistent across cards/lists.
• Avoid duplicating the same meaning in icon and text without added value.

Attributes and Properties

level

Description	Error correction level. Accepted values: L, M, Q, H.
Attribute	level
Type	string｜null
Default	-

Events

No events available for this component.

Methods

getAttributeFromAliases

Description	Returns first defined attribute value from alias list.
Signature	(aliases: string[]) => string｜null

setAliasedAttribute

Description	Writes value to the canonical attribute and clears alternate aliases.
Signature	(optionName: string, value: string｜number｜null｜undefined) => void

CSS Shadow Parts

Name	Description
native	The native part of the QR code.

CSS Custom Properties

No CSS custom properties available for this component.

Slots

Name	Description
top	The slot for the top content of the QR code.
bottom	The slot for the bottom content of the QR code.