Kiosk
Self-service kiosk components: attract screen, XL product cards, category pills, step indicator, inactivity timeout, and footer cart.
Attract Screen
Full-screen idle state inviting customers to start ordering
Touch to Order
Place your order in just a few taps
<div class="kiosk-attract">
<span class="material-symbols-outlined kiosk-attract-icon">touch_app</span>
<div class="kiosk-attract-title">Touch to Order</div>
<div class="kiosk-attract-subtitle">Place your order in just a few taps</div>
<button class="kiosk-attract-btn">Start Order</button>
</div>Product Cards (XL)
Large touch-friendly product tiles with optional allergen badges
Burger Classic
8.90€
Gluten
Dairy
Salade César
7.50€
Wrap Poulet
6.90€
Bowl Saumon
11.90€
<div class="kiosk-grid">
<div class="kiosk-product">
<img src="burger.jpg" alt="Burger Classic">
<div class="kiosk-product-name">Burger Classic</div>
<div class="kiosk-product-price">8.90€</div>
</div>
<div class="kiosk-product">
<img src="salade.jpg" alt="Salade César">
<div class="kiosk-allergens">
<span class="kiosk-allergen-badge">Gluten</span>
<span class="kiosk-allergen-badge">Dairy</span>
</div>
<div class="kiosk-product-name">Salade César</div>
<div class="kiosk-product-price">7.50€</div>
</div>
</div>Category Pills
XL scrollable category pills for kiosk touch targets
<div class="kiosk-categories">
<button class="kiosk-category active">Burgers</button>
<button class="kiosk-category">Salades</button>
<button class="kiosk-category">Wraps</button>
<button class="kiosk-category">Bowls</button>
<button class="kiosk-category">Desserts</button>
</div>Step Indicator
Ordering progress steps: done, active, upcoming
check
1. Choose
2
2. Customize
3
3. Pay
<div class="kiosk-steps">
<div class="kiosk-step done">
<span class="kiosk-step-number"><span class="material-symbols-outlined">check</span></span>
<span class="kiosk-step-label">1. Choose</span>
</div>
<div class="kiosk-step active">
<span class="kiosk-step-number">2</span>
<span class="kiosk-step-label">2. Customize</span>
</div>
<div class="kiosk-step">
<span class="kiosk-step-number">3</span>
<span class="kiosk-step-label">3. Pay</span>
</div>
</div>Inactivity Timeout
Overlay warning when the user is idle
<div class="kiosk-timeout-overlay">
<div class="kiosk-timeout-card">
<span class="material-symbols-outlined kiosk-timeout-icon">warning</span>
<div class="kiosk-timeout-title">Are you still there?</div>
<div class="kiosk-timeout-countdown">0:15</div>
<button class="kiosk-timeout-btn">Continue</button>
</div>
</div>