Elements
Every component on a page is one of 24 element types. Each element has its own properties, behaviors, and use cases.
Quick Reference
| Element | Type Key | Category | Description |
|---|---|---|---|
| Stack | stack | Container | Flex container. Vertical/horizontal layout, scroll modes. |
| Grid | grid | Container | CSS Grid container. Row/column configuration. |
| Text | text | Content | Rich text with Liquid template support. |
| Image | image | Content | Image with object-fit and aspect ratio. |
| Video | video | Content | Video player with playback controls. |
| Icon | icon | Content | Lucide icon library. |
| Lottie | lottie | Content | Lottie animation player. |
| HTML Block | htmlblock | Content | Raw HTML injection with Liquid support. |
| Input | input | Interactive | Text/email/date input bound to a variable. |
| Switch | switch | Interactive | Boolean toggle bound to a variable. |
| Single Select | single-select | Interactive | Radio-button group. Stores selected value. |
| Multi Select | multi-select | Interactive | Checkbox group. Stores array of values. |
| Option | option | Interactive | Clickable child of Single/Multi Select. |
| CountUp | countup | Progress | Animated number counter. |
| Progress Bar | progress-bar | Progress | Linear progress animation. |
| Progress Circle | progress-circle | Progress | Circular SVG progress animation. |
| Spinner Wheel | spinner-wheel | Progress | Prize/discount wheel with segments. |
| Loading | loading | Progress | Simple spinning loader. |
| Dialog | dialog | Overlay | Modal popup. |
| Drawer | drawer | Overlay | Slide-out panel from any edge. |
| Payment Element | paymentElement | Payment | Stripe card form and wallets. |
| Embedded Checkout | embeddedCheckout | Payment | Stripe-hosted checkout in iframe. |
| Paddle Checkout | paddleCheckout | Payment | Paddle checkout (alpha). |
| Linked | linked | Reusable | Live reference to a component from another page. |
Last updated on