Web Components · Playgrounds
Playgrounds
Interactive demos for each custom element. Open a component, edit the HTML markup, then click Apply (or press Cmd/Ctrl+Enter) to refresh the live preview.
Feedback
Status messages, alerts, and confirmation screens
Layout
Headers, section shells, and confirmation blocks
-
Info Screen Header
Info screen header with blue background and decorative stripes
-
Section Block
Section block component with header, description and slotted children
-
Confirm Section
Confirm section component with title, description and confirm button
-
Edit Card Info
Team info card. Name, role, level and edit button are attributes; indicators, notes and status are children.
Overlays
Modals and layered dialogs
Media
Carousels and embedded video
Marketing
Banners, promo blocks, and consent surfaces
Controls
Interactive utilities and demo components