Layouts — Component Gallery

Checkout

Checkout Layout

Shipping Address

Back

Continue to Payment

Order Summary

Lounge Chair × 1

$299.00

Floor Lamp × 1

$89.00

Subtotal

$388.00

Shipping

Free

Total

$388.00

Free shipping

Easy returns

Secure checkout

View DSL Source

section
  grid(cols="2" gap="xl")
    stack(gap="lg")
      stepper
        step(label="Cart" status="completed")
        step(label="Shipping" status="active")
        step(label="Payment")
      card(elevated=true)
        stack(gap="md")
          heading(level="2") Shipping Address
          grid(cols="2" gap="md")
            input(label="First name" required)
            input(label="Last name" required)
          input(label="Street address" required)
          grid(cols="2" gap="md")
            input(label="City" required)
            input(label="Postal code" required)
          row(justify="between")
            button(variant="ghost") Back
            button(variant="primary") Continue to Payment
    stack(gap="lg")
      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 Floor Lamp × 1
              text $89.00
            divider
            row(justify="between")
              text Subtotal
              text $388.00
            row(justify="between")
              text Shipping
              text Free
            divider
            row(justify="between")
              text(weight="bold") Total
              text(weight="bold") $388.00
      card
        grid(cols="3" gap="md")
          row(gap="sm" align="center")
            icon(name="check")
            text Free shipping
          row(gap="sm" align="center")
            icon(name="info")
            text Easy returns
          row(gap="sm" align="center")
            icon(name="user")
            text Secure checkout

Dashboard

Dashboard Layout

Dashboard

Welcome back, Jana

Export

New Report

Revenue

$84,200

↑ +12%

Orders

1,430

↑ +8%

Customers

9,210

↑ +3%

Refunds

2.1%

↓ -0.4%

Revenue Trend

Last 30 days

Orders by Category

This month

Recent Orders

View All

Order	Customer	Amount	Status

View DSL Source

section
  stack(gap="lg")
    row(justify="between" align="center")
      stack(gap="xs")
        heading(level="1") Dashboard
        text(color="muted") Welcome back, Jana
      row(gap="sm")
        button(variant="secondary" icon="download") Export
        button(variant="primary" icon="plus") New Report
    grid(cols="4" gap="md")
      stat-card(label="Revenue" value="$84,200" trend="+12%" direction="up")
      stat-card(label="Orders" value="1,430" trend="+8%" direction="up")
      stat-card(label="Customers" value="9,210" trend="+3%" direction="up")
      stat-card(label="Refunds" value="2.1%" trend="-0.4%" direction="down")
    grid(cols="2" gap="md")
      card(elevated=true)
        stack(gap="sm")
          heading(level="2") Revenue Trend
          chart(type="area" label="Last 30 days")
      card(elevated=true)
        stack(gap="sm")
          heading(level="2") Orders by Category
          chart(type="bar" label="This month")
    card(elevated=true)
      stack(gap="sm")
        row(justify="between" align="center")
          heading(level="2") Recent Orders
          button(variant="ghost") View All
        table(rows="5" striped=true)
          column(label="Order")
          column(label="Customer" width="25%")
          column(label="Amount" width="15%" align="right")
          column(label="Status" width="20%" align="center")

Listing

Blog Listing Layout

The Blog

Design, code, and product thinking from our team.

All

Tutorial

News

Case Study

Featured

Building a Design System in 2026

Apr 28 · 10 min read

A deep dive into how we unified 4 product teams around a single component library.

Read Article

Tutorial

CSS Grid for Real Layouts

Apr 24 · 6 min

News

Web Components Are Back

Apr 20 · 4 min

Case Study

30-Day Redesign Challenge

Apr 15 · 8 min

View DSL Source

section
  stack(gap="lg")
    stack(gap="xs")
      heading(level="1") The Blog
      text(color="muted") Design, code, and product thinking from our team.
    row(gap="sm")
      button(variant="secondary") All
      button(variant="ghost") Tutorial
      button(variant="ghost") News
      button(variant="ghost") Case Study
    card(elevated=true)
      grid(cols="2" gap="lg")
        placeholder(type="image" label="Featured image" ratio="16:9")
        stack(gap="md")
          badge(variant="success") Featured
          heading(level="1") Building a Design System in 2026
          text(color="muted") Apr 28 · 10 min read
          text A deep dive into how we unified 4 product teams around a single component library.
          button(variant="primary") Read Article
    grid(cols="3" gap="md")
      card(elevated=true)
        stack(gap="sm")
          placeholder(type="image" label="Thumb" ratio="16:9")
          badge(variant="neutral") Tutorial
          text(weight="bold") CSS Grid for Real Layouts
          text(color="muted") Apr 24 · 6 min
      card(elevated=true)
        stack(gap="sm")
          placeholder(type="image" label="Thumb" ratio="16:9")
          badge(variant="neutral") News
          text(weight="bold") Web Components Are Back
          text(color="muted") Apr 20 · 4 min
      card(elevated=true)
        stack(gap="sm")
          placeholder(type="image" label="Thumb" ratio="16:9")
          badge(variant="neutral") Case Study
          text(weight="bold") 30-Day Redesign Challenge
          text(color="muted") Apr 15 · 8 min
    row(justify="center")
      button(variant="secondary") Load More

Personal-details

Personal Details Layout

Account

Profile

Security

Sessions

Connected Apps

Profile

Save Changes

Passkeys & Password

Password

Last changed 30 days ago

Change

Passkey

No passkeys added

Add Passkey

Active Sessions

Sign Out All

Device	Location	Last Active

View DSL Source

section
  grid(cols="4" gap="lg")
    stack(gap="sm")
      heading(level="2") Account
      stack(gap="xs")
        button(variant="primary" width="full") Profile
        button(variant="ghost" width="full") Security
        button(variant="ghost" width="full") Sessions
        button(variant="ghost" width="full") Connected Apps
    stack(gap="xl")
      card(elevated=true)
        stack(gap="lg")
          heading(level="2") Profile
          grid(cols="2" gap="md")
            input(label="First name" value="Jana")
            input(label="Last name" value="Müller")
          input(label="Email" value="jana@example.com" required)
          input(label="Username" value="jana_m")
          button(variant="primary") Save Changes
      card(elevated=true)
        stack(gap="md")
          heading(level="2") Passkeys & Password
          row(justify="between" align="center")
            stack(gap="xs")
              text(weight="bold") Password
              text(color="muted") Last changed 30 days ago
            button(variant="secondary") Change
          row(justify="between" align="center")
            stack(gap="xs")
              text(weight="bold") Passkey
              text(color="muted") No passkeys added
            button(variant="secondary") Add Passkey
      card(elevated=true)
        stack(gap="md")
          row(justify="between" align="center")
            heading(level="2") Active Sessions
            button(variant="danger") Sign Out All
          table(rows="3")
            column(label="Device")
            column(label="Location" width="30%")
            column(label="Last Active" width="25%")

Product-overview

Product Overview Layout

In Stock

Lounge Chair

Premium comfort for any living space

$299.00

Colour

Cream

Sage

Charcoal

Add to Cart

Save to Wishlist

Free Shipping

30-Day Returns

2-Year Warranty

Product Details

High-density foam cushion, solid oak legs, available in three colourways.

80 × 85 × 75 cm (W × D × H)

Spot clean only. Avoid direct sunlight.

Customer Reviews

4.6

128 reviews

Priya S.

Apr 20

"Looks stunning and incredibly comfortable."

Marco L.

Apr 14

"Great quality. Arrived well packaged."

View DSL Source

section
  stack(gap="xl")
    grid(cols="2" gap="xl")
      stack(gap="md")
        placeholder(type="image" label="Main product image" ratio="1:1")
        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="xs")
          button(variant="primary" width="full") Add to Cart
          button(variant="secondary" width="full") Save to Wishlist
        card
          grid(cols="3" gap="md")
            row(gap="sm" align="center")
              icon(name="check")
              text Free Shipping
            row(gap="sm" align="center")
              icon(name="info")
              text 30-Day Returns
            row(gap="sm" align="center")
              icon(name="user")
              text 2-Year Warranty
    card(elevated=true)
      stack(gap="md")
        heading(level="2") Product Details
        panel(label="Description" open=true)
          text High-density foam cushion, solid oak legs, available in three colourways.
        panel(label="Dimensions")
          text 80 × 85 × 75 cm (W × D × H)
        panel(label="Care Instructions")
          text Spot clean only. Avoid direct sunlight.
    card(elevated=true)
      stack(gap="md")
        heading(level="2") Customer Reviews
        row(gap="lg" align="center")
          heading(level="1") 4.6
          text(color="muted") 128 reviews
        stack(gap="sm")
          card
            stack(gap="xs")
              row(justify="between")
                text(weight="bold") Priya S.
                text(color="muted") Apr 20
              text "Looks stunning and incredibly comfortable."
          card
            stack(gap="xs")
              row(justify="between")
                text(weight="bold") Marco L.
                text(color="muted") Apr 14
              text "Great quality. Arrived well packaged."

Settings

Settings Layout

Settings

General

Notifications

Appearance

Privacy

Billing

Integrations

General

Language

Display language across the app

English

Timezone

Used for dates and reminders

UTC+1 Berlin

Date Format

How dates are displayed

DD/MM

MM/DD

ISO

Save Changes

Danger Zone

These actions are permanent and cannot be undone.

Delete Account

Remove all data permanently

Delete

View DSL Source

section
  grid(cols="4" gap="lg")
    stack(gap="sm")
      heading(level="2") Settings
      stack(gap="xs")
        button(variant="primary" width="full") General
        button(variant="ghost" width="full") Notifications
        button(variant="ghost" width="full") Appearance
        button(variant="ghost" width="full") Privacy
        button(variant="ghost" width="full") Billing
        button(variant="ghost" width="full") Integrations
    stack(gap="lg")
      card(elevated=true)
        stack(gap="md")
          heading(level="2") General
          stack(gap="md")
            row(justify="between" align="center")
              stack(gap="xs")
                text(weight="bold") Language
                text(color="muted") Display language across the app
              badge(variant="neutral") English
            divider
            row(justify="between" align="center")
              stack(gap="xs")
                text(weight="bold") Timezone
                text(color="muted") Used for dates and reminders
              badge(variant="neutral") UTC+1 Berlin
            divider
            row(justify="between" align="center")
              stack(gap="xs")
                text(weight="bold") Date Format
                text(color="muted") How dates are displayed
              segmented(label="Date format" options="DD/MM,MM/DD,ISO" value="DD/MM")
          button(variant="primary") Save Changes
      card(elevated=true)
        stack(gap="md")
          heading(level="2") Danger Zone
          alert(variant="error" message="These actions are permanent and cannot be undone.")
          row(justify="between" align="center")
            stack(gap="xs")
              text(weight="bold") Delete Account
              text(color="muted") Remove all data permanently
            button(variant="danger") Delete

Storefront

Storefront Layout

ShopCo

Furniture

Lighting

Textiles

Cart (3)

Free shipping over $50

30-day easy returns

Sustainable materials

Shop by Category

Furniture

Lighting

Textiles

Outdoor

New Arrivals

View All

Lounge Chair

$299

Floor Lamp

$89

Side Table

$49

Throw Cushion

$24

Join our newsletter

New arrivals, exclusive offers — straight to your inbox.

Subscribe

View DSL Source

section
  stack(gap="xl")
    row(justify="between" align="center")
      heading(level="1") ShopCo
      row(gap="md")
        button(variant="ghost") Furniture
        button(variant="ghost") Lighting
        button(variant="ghost") Textiles
      row(gap="sm")
        input(label="" placeholder="Search…")
        button(variant="ghost" icon="user")
        button(variant="primary") Cart (3)
    placeholder(type="image" label="Hero banner" ratio="21:9")
    card
      grid(cols="3" gap="lg")
        row(gap="sm" align="center")
          icon(name="check")
          text Free shipping over $50
        row(gap="sm" align="center")
          icon(name="info")
          text 30-day easy returns
        row(gap="sm" align="center")
          icon(name="user")
          text Sustainable materials
    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
    stack(gap="md")
      row(justify="between" align="center")
        heading(level="2") New Arrivals
        button(variant="ghost") View All
      grid(cols="4" gap="md")
        card(elevated=true)
          stack(gap="sm")
            placeholder(type="image" label="Product" ratio="4:3")
            text(weight="bold") Lounge Chair
            text $299
        card(elevated=true)
          stack(gap="sm")
            placeholder(type="image" label="Product" ratio="4:3")
            text(weight="bold") Floor Lamp
            text $89
        card(elevated=true)
          stack(gap="sm")
            placeholder(type="image" label="Product" ratio="4:3")
            text(weight="bold") Side Table
            text $49
        card(elevated=true)
          stack(gap="sm")
            placeholder(type="image" label="Product" ratio="4:3")
            text(weight="bold") Throw Cushion
            text $24
    card(elevated=true)
      stack(gap="md" align="center")
        heading(level="2") Join our newsletter
        text(color="muted") New arrivals, exclusive offers — straight to your inbox.
        row(gap="sm" justify="center")
          input(label="" placeholder="Enter your email")
          button(variant="primary") Subscribe

Transactions

Transactions Layout

Transactions

Export CSV

New Transaction

Apply

Date	Reference	Description	Amount	Status

Showing 1–10 of 247

2

3

section
  stack(gap="lg")
    row(justify="between" align="center")
      heading(level="1") Transactions
      row(gap="sm")
        button(variant="secondary" icon="download") Export CSV
        button(variant="primary" icon="plus") New Transaction
    card(elevated=true)
      stack(gap="md")
        row(gap="md" align="end")
          input(label="Search" placeholder="Name or reference…")
          select(label="Status" placeholder="All statuses")
          select(label="Date range" placeholder="Last 30 days")
          button(variant="secondary") Apply
        table(rows="8" striped=true)
          column(label="Date" width="15%")
          column(label="Reference" width="20%")
          column(label="Description")
          column(label="Amount" width="15%" align="right")
          column(label="Status" width="15%" align="center")
        row(justify="between" align="center")
          text(color="muted") Showing 1–10 of 247
          row(gap="xs")
            button(variant="ghost") Prev
            button(variant="secondary") 1
            button(variant="ghost") 2
            button(variant="ghost") 3
            button(variant="ghost") Next