UI development: screens and elements

{
  "name": "Products",
  "route": "/products",
  "layout": "main.layout.iwc",
  "title": "All products",
  "description": "Everything we make.",
  "auth": "optional",
  "className": "page-products",
  "styleSource": "styles/products.css",
  "style": { "background": "var(--color-surface)" },
  "sections": [
    { "type": "section", "elements": [{ "type": "text", "variant": "h1", "content": "All products" }] }
  ]
}

{
  "type": "section",
  "id": "features",
  "className": "band",
  "layout": { "direction": "row", "align": "center", "justify": "between", "gap": "24px", "wrap": true },
  "responsive": { "tablet": { "flexDirection": "column" } },
  "elements": [
    { "type": "text", "variant": "h2", "content": "Features" },
    { "type": "spacer", "style": { "height": "24px" } },
    { "type": "divider" }
  ]
}

{
  "type": "grid",
  "columns": 4,
  "responsiveColumns": { "tablet": 2, "mobile": 1 },
  "gap": "24px",
  "elements": [
    { "type": "box", "className": "tile", "content": "One" },
    { "type": "box", "className": "tile", "content": "Two" },
    { "type": "box", "className": "tile", "content": "Three" },
    { "type": "box", "className": "tile", "content": "Four" }
  ]
}

{ "type": "text", "variant": "h1", "content": "Hello" }

{ "type": "text", "variant": "subheading", "bind": "price", "format": "currency", "currency": "EUR", "prefix": "From " }

{ "type": "image", "source": "/assets/hero.jpg", "alt": "A brass lamp in a reading corner", "ratio": "4/3", "fit": "cover" }

{
  "type": "row",
  "layout": { "gap": "12px" },
  "elements": [
    { "type": "button", "label": "Shop now", "action": "navigate", "target": "/products" },
    { "type": "button", "label": "Size guide", "variant": "secondary", "action": "open", "target": "size-guide" },
    { "type": "link", "label": "Read the docs", "target": "https://example.com/docs", "newTab": true }
  ]
}

{ "type": "button", "variant": "ghost", "ariaLabel": "Remove", "action": "api", "api": "note-delete.api.iwc", "target": "/dashboard", "elements": [{ "type": "icon", "name": "trash" }] }

{
  "type": "column",
  "elements": [
    { "type": "badge", "content": "New" },
    { "type": "rating", "rating": 4.5 },
    { "type": "review", "rating": 5, "content": "Beautifully made.", "author": "Maya, Bristol" },
    { "type": "review", "items": [
      { "rating": 5, "content": "Worth every penny.", "author": "Tom" },
      { "rating": 4, "content": "Lovely, slow delivery.", "author": "Priya" }
    ] }
  ]
}

{
  "type": "card",
  "fields": { "title": "name", "subtitle": "maker", "text": "summary", "price": "price", "image": "image", "badge": "label", "link": "/products/:slug" },
  "currency": "USD",
  "elements": [{ "type": "button", "label": "Add to cart", "variant": "secondary", "action": "state", "store": "cart", "mutation": "add", "value": { "id": "item.id", "name": "item.name", "price": "item.price", "quantity": 1 } }]
}

{ "type": "list", "items": [{ "label": "Shipping", "target": "/help/shipping" }, { "label": "Returns", "target": "/help/returns" }, { "label": "Plain text item" }] }

{
  "type": "table",
  "data": { "source": "DATABASE.orders", "columns": ["total", "status", "createdAt"], "sort": { "field": "createdAt", "order": "desc" }, "limit": 20 },
  "cells": [
    { "field": "createdAt", "label": "Placed", "format": "date" },
    { "field": "status", "label": "Status" },
    { "field": "total", "label": "Total", "format": "currency" }
  ],
  "currency": "USD",
  "empty": { "type": "text", "content": "No orders yet." }
}

{ "type": "chart", "chart": { "kind": "bar", "x": "name", "y": "stock", "height": 220 }, "data": { "source": "DATABASE.products", "columns": ["name", "stock"] } }

{
  "type": "navbar",
  "className": "site-header",
  "opensOn": "hover",
  "collapseAt": "tablet",
  "elements": [
    { "type": "link", "label": "Brand", "target": "/", "className": "brand" },
    { "type": "link", "label": "Sign in", "target": "/login", "visible": { "auth": "signed-out" } }
  ],
  "items": [
    { "label": "Shop", "items": [
      { "label": "All", "target": "/products" },
      { "label": "Lighting", "target": "/products?category=lighting" }
    ] },
    { "label": "About", "target": "/about" }
  ]
}

{
  "type": "dropdown",
  "label": "Account",
  "opensOn": "click",
  "items": [{ "label": "Profile", "target": "/account" }, { "label": "Orders", "target": "/account/orders" }],
  "elements": [{ "type": "button", "label": "Sign out", "variant": "ghost", "action": "logout" }]
}

{
  "type": "column",
  "elements": [
    { "type": "button", "label": "Size guide", "action": "open", "target": "size-guide" },
    { "id": "size-guide", "type": "modal", "elements": [{ "type": "text", "variant": "h3", "content": "Size guide" }, { "type": "text", "content": "Floor lamps are 150–190cm." }] },
    { "type": "button", "label": "Filters", "action": "toggle", "target": "filters" },
    { "id": "filters", "type": "drawer", "side": "right", "elements": [{ "type": "text", "content": "Filter options" }] }
  ]
}

{
  "type": "tabs",
  "tabs": [
    { "label": "Details", "elements": [{ "type": "text", "content": "Solid oak." }] },
    { "label": "Shipping", "elements": [{ "type": "text", "content": "Ships in 2 days." }] }
  ]
}

{
  "type": "accordion",
  "open": true,
  "items": [
    { "title": "Delivery", "content": "2–3 days." },
    { "title": "Returns", "elements": [{ "type": "link", "label": "Read the policy", "target": "/returns" }] }
  ]
}

{
  "type": "carousel",
  "autoplay": true,
  "interval": "6s",
  "elements": [
    { "type": "image", "source": "/assets/slide-1.jpg", "alt": "Workshop" },
    { "type": "image", "source": "/assets/slide-2.jpg", "alt": "Showroom" }
  ]
}