Ecommerce — Component Gallery

Category-filter

DSL Reference →

Category Filter

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

Filter Products

Category

Category ACategory BCategory C

Price Range

Rating

4 stars & up3 stars & up

ApplyClear

View DSL Source

card(elevated=true)
  stack(gap="lg")
    heading(level="2") Filter Products
    stack(gap="md")
      stack(gap="sm")
        text(weight="bold") Category
        stack(gap="xs")
          checkbox Category A
          checkbox Category B
          checkbox Category C
      divider
      stack(gap="sm")
        text(weight="bold") Price Range
        row(gap="sm")
          input(label="Min" placeholder="$0" type="number")
          input(label="Max" placeholder="$500" type="number")
      divider
      stack(gap="sm")
        text(weight="bold") Rating
        stack(gap="xs")
          checkbox 4 stars & up
          checkbox 3 stars & up
    row(gap="sm")
      button(variant="primary" width="full") Apply
      button(variant="ghost" width="full") Clear

Category-preview

DSL Reference →

Category Preview

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

Shop by Category

Furniture

Lighting

Textiles

Outdoor

View DSL Source

stack(gap="md")
  heading(level="2") Shop by Category
  grid(cols="4" gap="md")
    card(elevated=true)
      stack(gap="sm" align="center")
        placeholder(type="image" label="Category" ratio="1:1")
        text(weight="bold") Furniture
    card(elevated=true)
      stack(gap="sm" align="center")
        placeholder(type="image" label="Category" ratio="1:1")
        text(weight="bold") Lighting
    card(elevated=true)
      stack(gap="sm" align="center")
        placeholder(type="image" label="Category" ratio="1:1")
        text(weight="bold") Textiles
    card(elevated=true)
      stack(gap="sm" align="center")
        placeholder(type="image" label="Category" ratio="1:1")
        text(weight="bold") Outdoor

Checkout-form

DSL Reference →

Checkout Form

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

Contact

2

Shipping

3

Payment

Shipping Address

BackContinue to Payment

View DSL Source

stack(gap="lg")
  stepper
    step(label="Contact" status="completed")
    step(label="Shipping" status="active")
    step(label="Payment")
  card(elevated=true)
    stack(gap="lg")
      heading(level="2") Shipping Address
      grid(cols="2" gap="md")
        input(label="First name" required)
        input(label="Last name" required)
      input(label="Address" placeholder="Street and number" required)
      grid(cols="2" gap="md")
        input(label="City" required)
        input(label="Postal code" required)
      input(label="Country" required)
      row(justify="between")
        button(variant="ghost") Back
        button(variant="primary") Continue to Payment

Order-history

DSL Reference →

Order History

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

Your Orders

Order #10482

Apr 28, 2026 · $149.00

DeliveredView

Order #10390

Apr 12, 2026 · $89.00

In TransitTrack

Order #10201

Mar 31, 2026 · $212.00

ReturnedView

View DSL Source

stack(gap="md")
  heading(level="2") Your Orders
  stack(gap="sm")
    card(elevated=true)
      row(justify="between" align="center")
        stack(gap="xs")
          text(weight="bold") Order #10482
          text(color="muted") Apr 28, 2026 · $149.00
        row(gap="sm" align="center")
          badge(variant="success") Delivered
          button(variant="ghost") View
    card(elevated=true)
      row(justify="between" align="center")
        stack(gap="xs")
          text(weight="bold") Order #10390
          text(color="muted") Apr 12, 2026 · $89.00
        row(gap="sm" align="center")
          badge(variant="warning") In Transit
          button(variant="ghost") Track
    card(elevated=true)
      row(justify="between" align="center")
        stack(gap="xs")
          text(weight="bold") Order #10201
          text(color="muted") Mar 31, 2026 · $212.00
        row(gap="sm" align="center")
          badge(variant="neutral") Returned
          button(variant="ghost") View

Order-summary

DSL Reference →

Order Summary

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

Order Summary

Lounge Chair × 1

$299.00

Side Table × 2

$98.00

Subtotal

$397.00

Shipping

Free

Discount

−$30.00

Total

$367.00

Proceed to Checkout

View DSL Source

card(elevated=true)
  stack(gap="md")
    heading(level="2") Order Summary
    stack(gap="sm")
      row(justify="between")
        text Lounge Chair × 1
        text $299.00
      row(justify="between")
        text Side Table × 2
        text $98.00
      divider
      row(justify="between")
        text Subtotal
        text $397.00
      row(justify="between")
        text Shipping
        text(color="muted") Free
      row(justify="between")
        text Discount
        text(color="muted") −$30.00
      divider
      row(justify="between")
        text(weight="bold") Total
        text(weight="bold") $367.00
    input(label="Promo code" placeholder="Enter code")
    button(variant="primary" width="full") Proceed to Checkout

Product-overview

DSL Reference →

Product Overview

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

In Stock

Lounge Chair

Premium comfort for any living space

$299.00

Colour

CreamSageCharcoal

Material

Add to CartSave to Wishlist

High-density foam cushion with solid oak legs.

Free delivery on orders over $50. 30-day returns.

View DSL Source

grid(cols="2" gap="xl")
  stack(gap="md")
    placeholder(type="image" label="Product photo" ratio="4:3")
    grid(cols="4" gap="sm")
      placeholder(type="image" label="Thumb" ratio="1:1")
      placeholder(type="image" label="Thumb" ratio="1:1")
      placeholder(type="image" label="Thumb" ratio="1:1")
      placeholder(type="image" label="Thumb" ratio="1:1")
  stack(gap="lg")
    stack(gap="xs")
      badge(variant="success") In Stock
      heading(level="1") Lounge Chair
      text(color="muted") Premium comfort for any living space
    heading(level="2") $299.00
    stack(gap="sm")
      text(weight="bold") Colour
      row(gap="sm")
        button(variant="secondary") Cream
        button(variant="ghost") Sage
        button(variant="ghost") Charcoal
    stack(gap="sm")
      text(weight="bold") Material
      select(label="" placeholder="Select material")
    stack(gap="sm")
      button(variant="primary" width="full") Add to Cart
      button(variant="secondary" width="full") Save to Wishlist
    panel(label="Product Details")
      text High-density foam cushion with solid oak legs.
    panel(label="Shipping & Returns")
      text Free delivery on orders over $50. 30-day returns.

Product-preview

DSL Reference →

Product Preview

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

New Arrival

Lounge Chair

$299.00

Colour

CreamSage

Add to CartView Full Details

View DSL Source

card(elevated=true)
  grid(cols="2" gap="lg")
    placeholder(type="image" label="Product" ratio="1:1")
    stack(gap="md")
      stack(gap="xs")
        badge(variant="neutral") New Arrival
        heading(level="2") Lounge Chair
        text $299.00
      stack(gap="sm")
        text(weight="bold") Colour
        row(gap="sm")
          button(variant="secondary") Cream
          button(variant="ghost") Sage
      button(variant="primary" width="full") Add to Cart
      button(variant="ghost" width="full") View Full Details

Product-reviews

DSL Reference →

Product Reviews

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

Customer Reviews

Write a Review

4.6

128 reviews

5 stars

4 stars

3 stars

Priya S.

Apr 20, 2026

"Incredibly comfortable. Assembly was easy and it looks stunning."

Marco L.

Apr 14, 2026

"Great quality for the price. Arrived well-packaged."

View DSL Source

card(elevated=true)
  stack(gap="lg")
    row(justify="between" align="center")
      heading(level="2") Customer Reviews
      button(variant="primary") Write a Review
    row(gap="lg" align="start")
      stack(gap="xs" align="center")
        heading(level="1") 4.6
        rating(label="Average rating" value=4.5 precision=0.5 readonly)
        text(color="muted") 128 reviews
      stack(gap="xs")
        row(justify="between" align="center")
          text 5 stars
          progress(value=78 max=100 label="")
        row(justify="between" align="center")
          text 4 stars
          progress(value=14 max=100 label="")
        row(justify="between" align="center")
          text 3 stars
          progress(value=5 max=100 label="")
    stack(gap="md")
      card
        stack(gap="xs")
          row(justify="between")
            text(weight="bold") Priya S.
            text(color="muted") Apr 20, 2026
          rating(label="Priya's rating" value=5 readonly size="small")
          text "Incredibly comfortable. Assembly was easy and it looks stunning."
      card
        stack(gap="xs")
          row(justify="between")
            text(weight="bold") Marco L.
            text(color="muted") Apr 14, 2026
          rating(label="Marco's rating" value=4 readonly size="small")
          text "Great quality for the price. Arrived well-packaged."

Shopping-cart

DSL Reference →

Shopping Cart

AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px) Copy

Your Cart (3 items)

Lounge Chair

Cream · Qty 1

$299.00

Floor Lamp

White · Qty 2

$178.00

Total

$477.00

Checkout

View DSL Source

card(elevated=true)
  stack(gap="lg")
    heading(level="2") Your Cart (3 items)
    stack(gap="md")
      card
        row(justify="between" align="center")
          row(gap="md" align="center")
            placeholder(type="image" label="Thumb" width="60px" height="60px")
            stack(gap="xs")
              text(weight="bold") Lounge Chair
              text(color="muted") Cream · Qty 1
          row(gap="md" align="center")
            text $299.00
            button(variant="ghost" icon="trash")
      card
        row(justify="between" align="center")
          row(gap="md" align="center")
            placeholder(type="image" label="Thumb" width="60px" height="60px")
            stack(gap="xs")
              text(weight="bold") Floor Lamp
              text(color="muted") White · Qty 2
          row(gap="md" align="center")
            text $178.00
            button(variant="ghost" icon="trash")
    row(justify="between")
      text(weight="bold") Total
      text(weight="bold") $477.00
    button(variant="primary" width="full") Checkout

DSL Reference ✕