Kiosk preview

This component previews the Kiosk welcome screen.

Style

Accent color
Text color
Background image

Select… Clear

Elements

Line 1
Line 2
Button
QR code scanner
QR code
Blur the QR code
Delivery
Check-out
Languages

This browser is not supported to preview your kiosk.
However, all the changes made will be applied.

With device

The component can be wrapper in a device component for a more realistic preview.
(Note: due to aspect ratio, this only works with the iPad Air device)

This browser is not supported to preview your kiosk.
However, all the changes made will be applied.

Dev notes

To style the kiosk preview:

Set the brand and background color by setting a new value to the CSS variable --kiosk-preview-accent-color at the component level.
Set the text color by setting a new value to the CSS variable --kiosk-preview-text-color at the component level.
Set a background image by setting a background-image property to the component.

To enable the different features add the classes: has-qr-code, has-qr-code-scanner, has-delivery, has-check-out, and has-languages.

To blur the QR-code use the c-kiosk-preview--blur-qr-code variant.

To change the texts, simply replace the content of the elements.