Marketplace

Widgets and block variations

Hosted integrations live alongside 100+ generated block combinations built from 20 core primitives.

Hosted widgets

utility

Clock Widget

widget: "clock"

Shows a static-safe local clock for a chosen timezone.

Use cases

Footer utilities · Ops dashboards · Global team pages

Screenshot hints

time readout · timezone chip · utility sidebar

Props

Required: title

Optional: timezone, label

JSON snippet

{
  "type": "widget",
  "id": "clock-example",
  "widget": "clock",
  "props": {
    "title": "Example title"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "widget",
  "id": "clock-example",
  "widget": "clock",
  "props": {
    "title": "Example title"
  }
}

conversion

Countdown Widget

widget: "countdown"

Highlights launch deadlines or promotions with a static countdown target.

Use cases

Launch pages · Promo bars · Course sales pages

Screenshot hints

countdown numerals · deadline banner

Props

Required: title, targetDate

Optional: description

JSON snippet

{
  "type": "widget",
  "id": "countdown-example",
  "widget": "countdown",
  "props": {
    "title": "Example title"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "widget",
  "id": "countdown-example",
  "widget": "countdown",
  "props": {
    "title": "Example title"
  }
}

local

Weather Widget

widget: "weather"

Displays static climate guidance and operational notes for a location.

Use cases

Travel guides · Restaurant pages · Local landing pages

Screenshot hints

temperature callout · weather summary card

Props

Required: title, summary

Optional: temperature, location

JSON snippet

{
  "type": "widget",
  "id": "weather-example",
  "widget": "weather",
  "props": {
    "title": "Example title"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "widget",
  "id": "weather-example",
  "widget": "weather",
  "props": {
    "title": "Example title"
  }
}

location

Map Widget

widget: "map"

Embeds a map or directions using a static external URL.

Use cases

Contact pages · Store locator pages

Screenshot hints

map card · address block · directions link

Props

Required: title, embedUrl

Optional: address

JSON snippet

{
  "type": "widget",
  "id": "map-example",
  "widget": "map",
  "props": {
    "title": "Example title"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "widget",
  "id": "map-example",
  "widget": "map",
  "props": {
    "title": "Example title"
  }
}

commerce

PayPal Widget

widget: "paypal"

Renders a PayPal checkout CTA using an external checkout URL.

Use cases

Digital products · Donations · Product detail pages

Screenshot hints

buy button · PayPal badge · checkout CTA

Props

Required: title, checkoutUrl

Optional: priceLabel

JSON snippet

{
  "type": "widget",
  "id": "paypal-example",
  "widget": "paypal",
  "props": {
    "title": "Example title"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "widget",
  "id": "paypal-example",
  "widget": "paypal",
  "props": {
    "title": "Example title"
  }
}

commerce

Stripe Checkout Widget

widget: "stripe-checkout"

Links to a hosted Stripe Checkout session safely from a static site.

Use cases

Single-product funnels · Memberships · Course sales

Screenshot hints

primary purchase button · price lockup

Props

Required: title, checkoutUrl

Optional: priceLabel

JSON snippet

{
  "type": "widget",
  "id": "stripe-checkout-example",
  "widget": "stripe-checkout",
  "props": {
    "title": "Example title"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "widget",
  "id": "stripe-checkout-example",
  "widget": "stripe-checkout",
  "props": {
    "title": "Example title"
  }
}

commerce

Gumroad Widget

widget: "gumroad"

Promotes a Gumroad product via a hosted purchase link.

Use cases

Creator storefronts · Templates · Downloads

Screenshot hints

Gumroad CTA · download card

Props

Required: title, checkoutUrl

Optional: description

JSON snippet

{
  "type": "widget",
  "id": "gumroad-example",
  "widget": "gumroad",
  "props": {
    "title": "Example title"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "widget",
  "id": "gumroad-example",
  "widget": "gumroad",
  "props": {
    "title": "Example title"
  }
}

media

YouTube Embed Widget

widget: "youtube-embed"

Embeds a responsive YouTube video inside a page slot.

Use cases

Feature demos · Case studies · Onboarding guides

Screenshot hints

video player · play button frame

Props

Required: title, videoId

Optional: caption

JSON snippet

{
  "type": "widget",
  "id": "youtube-embed-example",
  "widget": "youtube-embed",
  "props": {
    "title": "Example title"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "widget",
  "id": "youtube-embed-example",
  "widget": "youtube-embed",
  "props": {
    "title": "Example title"
  }
}

forms

Typeform Widget

widget: "typeform"

Uses a static external Typeform embed URL or CTA.

Use cases

Lead capture · Research surveys · Support intake

Screenshot hints

form embed · survey CTA · lead form block

Props

Required: title, embedUrl

Optional: description

JSON snippet

{
  "type": "widget",
  "id": "typeform-example",
  "widget": "typeform",
  "props": {
    "title": "Example title"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "widget",
  "id": "typeform-example",
  "widget": "typeform",
  "props": {
    "title": "Example title"
  }
}

scheduling

Calendly Widget

widget: "calendly"

Embeds or links to a hosted Calendly booking flow.

Use cases

Consulting sites · Sales funnels · Discovery calls

Screenshot hints

calendar booking panel · schedule CTA

Props

Required: title, embedUrl

Optional: description

JSON snippet

{
  "type": "widget",
  "id": "calendly-example",
  "widget": "calendly",
  "props": {
    "title": "Example title"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "widget",
  "id": "calendly-example",
  "widget": "calendly",
  "props": {
    "title": "Example title"
  }
}

Block primitive variations

core

Hero · Editorial

block: "hero:editorial"

Hero optimized for article-rich pages.

Use cases

Blogs · Guides · Resource hubs

Screenshot hints

editorial spacing · content hierarchy

Props

Required: title, description

Optional: variant, density, style, description

JSON snippet

{
  "type": "hero",
  "id": "hero-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "hero",
  "id": "hero-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Hero · Commerce

block: "hero:commerce"

Hero optimized for merchandising and checkout-driven pages.

Use cases

Storefronts · Offers · Product launches

Screenshot hints

price emphasis · buy CTA

Props

Required: title, description

Optional: variant, density, style, description

JSON snippet

{
  "type": "hero",
  "id": "hero-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "hero",
  "id": "hero-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Hero · Glass

block: "hero:glass"

Hero optimized for layered glass-style interfaces.

Use cases

Dashboards · Portfolios · AI tools

Screenshot hints

glass panel · blurred background

Props

Required: title, description

Optional: variant, density, style, description

JSON snippet

{
  "type": "hero",
  "id": "hero-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "hero",
  "id": "hero-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Hero · Compact

block: "hero:compact"

Hero optimized for dense information layouts.

Use cases

Dashboards · Catalogs · Doc indexes

Screenshot hints

tight spacing · dense card grid

Props

Required: title, description

Optional: variant, density, style, description

JSON snippet

{
  "type": "hero",
  "id": "hero-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "hero",
  "id": "hero-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Hero · Luxury

block: "hero:luxury"

Hero optimized for premium brand storytelling.

Use cases

Luxury brands · Studios · Premium services

Screenshot hints

serif display · premium hero

Props

Required: title, description

Optional: variant, density, style, description

JSON snippet

{
  "type": "hero",
  "id": "hero-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "hero",
  "id": "hero-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Section · Editorial

block: "section:editorial"

Section optimized for article-rich pages.

Use cases

Blogs · Guides · Resource hubs

Screenshot hints

editorial spacing · content hierarchy

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "section",
  "id": "section-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "section",
  "id": "section-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Section · Commerce

block: "section:commerce"

Section optimized for merchandising and checkout-driven pages.

Use cases

Storefronts · Offers · Product launches

Screenshot hints

price emphasis · buy CTA

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "section",
  "id": "section-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "section",
  "id": "section-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Section · Glass

block: "section:glass"

Section optimized for layered glass-style interfaces.

Use cases

Dashboards · Portfolios · AI tools

Screenshot hints

glass panel · blurred background

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "section",
  "id": "section-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "section",
  "id": "section-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Section · Compact

block: "section:compact"

Section optimized for dense information layouts.

Use cases

Dashboards · Catalogs · Doc indexes

Screenshot hints

tight spacing · dense card grid

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "section",
  "id": "section-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "section",
  "id": "section-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Section · Luxury

block: "section:luxury"

Section optimized for premium brand storytelling.

Use cases

Luxury brands · Studios · Premium services

Screenshot hints

serif display · premium hero

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "section",
  "id": "section-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "section",
  "id": "section-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Card · Editorial

block: "card:editorial"

Card optimized for article-rich pages.

Use cases

Blogs · Guides · Resource hubs

Screenshot hints

editorial spacing · content hierarchy

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "card",
  "id": "card-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "card",
  "id": "card-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Card · Commerce

block: "card:commerce"

Card optimized for merchandising and checkout-driven pages.

Use cases

Storefronts · Offers · Product launches

Screenshot hints

price emphasis · buy CTA

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "card",
  "id": "card-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "card",
  "id": "card-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Card · Glass

block: "card:glass"

Card optimized for layered glass-style interfaces.

Use cases

Dashboards · Portfolios · AI tools

Screenshot hints

glass panel · blurred background

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "card",
  "id": "card-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "card",
  "id": "card-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Card · Compact

block: "card:compact"

Card optimized for dense information layouts.

Use cases

Dashboards · Catalogs · Doc indexes

Screenshot hints

tight spacing · dense card grid

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "card",
  "id": "card-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "card",
  "id": "card-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Card · Luxury

block: "card:luxury"

Card optimized for premium brand storytelling.

Use cases

Luxury brands · Studios · Premium services

Screenshot hints

serif display · premium hero

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "card",
  "id": "card-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "card",
  "id": "card-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Grid · Editorial

block: "grid:editorial"

Grid optimized for article-rich pages.

Use cases

Blogs · Guides · Resource hubs

Screenshot hints

editorial spacing · content hierarchy

Props

Required: items

Optional: variant, density, style, description

JSON snippet

{
  "type": "grid",
  "id": "grid-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "grid",
  "id": "grid-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Grid · Commerce

block: "grid:commerce"

Grid optimized for merchandising and checkout-driven pages.

Use cases

Storefronts · Offers · Product launches

Screenshot hints

price emphasis · buy CTA

Props

Required: items

Optional: variant, density, style, description

JSON snippet

{
  "type": "grid",
  "id": "grid-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "grid",
  "id": "grid-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Grid · Glass

block: "grid:glass"

Grid optimized for layered glass-style interfaces.

Use cases

Dashboards · Portfolios · AI tools

Screenshot hints

glass panel · blurred background

Props

Required: items

Optional: variant, density, style, description

JSON snippet

{
  "type": "grid",
  "id": "grid-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "grid",
  "id": "grid-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Grid · Compact

block: "grid:compact"

Grid optimized for dense information layouts.

Use cases

Dashboards · Catalogs · Doc indexes

Screenshot hints

tight spacing · dense card grid

Props

Required: items

Optional: variant, density, style, description

JSON snippet

{
  "type": "grid",
  "id": "grid-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "grid",
  "id": "grid-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Grid · Luxury

block: "grid:luxury"

Grid optimized for premium brand storytelling.

Use cases

Luxury brands · Studios · Premium services

Screenshot hints

serif display · premium hero

Props

Required: items

Optional: variant, density, style, description

JSON snippet

{
  "type": "grid",
  "id": "grid-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "grid",
  "id": "grid-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

List · Editorial

block: "list:editorial"

List optimized for article-rich pages.

Use cases

Blogs · Guides · Resource hubs

Screenshot hints

editorial spacing · content hierarchy

Props

Required: items

Optional: variant, density, style, description

JSON snippet

{
  "type": "list",
  "id": "list-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "list",
  "id": "list-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

List · Commerce

block: "list:commerce"

List optimized for merchandising and checkout-driven pages.

Use cases

Storefronts · Offers · Product launches

Screenshot hints

price emphasis · buy CTA

Props

Required: items

Optional: variant, density, style, description

JSON snippet

{
  "type": "list",
  "id": "list-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "list",
  "id": "list-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

List · Glass

block: "list:glass"

List optimized for layered glass-style interfaces.

Use cases

Dashboards · Portfolios · AI tools

Screenshot hints

glass panel · blurred background

Props

Required: items

Optional: variant, density, style, description

JSON snippet

{
  "type": "list",
  "id": "list-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "list",
  "id": "list-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

List · Compact

block: "list:compact"

List optimized for dense information layouts.

Use cases

Dashboards · Catalogs · Doc indexes

Screenshot hints

tight spacing · dense card grid

Props

Required: items

Optional: variant, density, style, description

JSON snippet

{
  "type": "list",
  "id": "list-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "list",
  "id": "list-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

List · Luxury

block: "list:luxury"

List optimized for premium brand storytelling.

Use cases

Luxury brands · Studios · Premium services

Screenshot hints

serif display · premium hero

Props

Required: items

Optional: variant, density, style, description

JSON snippet

{
  "type": "list",
  "id": "list-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "list",
  "id": "list-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Banner · Editorial

block: "banner:editorial"

Banner optimized for article-rich pages.

Use cases

Blogs · Guides · Resource hubs

Screenshot hints

editorial spacing · content hierarchy

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "banner",
  "id": "banner-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "banner",
  "id": "banner-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Banner · Commerce

block: "banner:commerce"

Banner optimized for merchandising and checkout-driven pages.

Use cases

Storefronts · Offers · Product launches

Screenshot hints

price emphasis · buy CTA

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "banner",
  "id": "banner-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "banner",
  "id": "banner-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Banner · Glass

block: "banner:glass"

Banner optimized for layered glass-style interfaces.

Use cases

Dashboards · Portfolios · AI tools

Screenshot hints

glass panel · blurred background

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "banner",
  "id": "banner-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "banner",
  "id": "banner-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Banner · Compact

block: "banner:compact"

Banner optimized for dense information layouts.

Use cases

Dashboards · Catalogs · Doc indexes

Screenshot hints

tight spacing · dense card grid

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "banner",
  "id": "banner-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "banner",
  "id": "banner-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Banner · Luxury

block: "banner:luxury"

Banner optimized for premium brand storytelling.

Use cases

Luxury brands · Studios · Premium services

Screenshot hints

serif display · premium hero

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "banner",
  "id": "banner-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "banner",
  "id": "banner-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

CTA · Editorial

block: "cta:editorial"

CTA optimized for article-rich pages.

Use cases

Blogs · Guides · Resource hubs

Screenshot hints

editorial spacing · content hierarchy

Props

Required: label, href

Optional: variant, density, style, description

JSON snippet

{
  "type": "cta",
  "id": "cta-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "cta",
  "id": "cta-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

CTA · Commerce

block: "cta:commerce"

CTA optimized for merchandising and checkout-driven pages.

Use cases

Storefronts · Offers · Product launches

Screenshot hints

price emphasis · buy CTA

Props

Required: label, href

Optional: variant, density, style, description

JSON snippet

{
  "type": "cta",
  "id": "cta-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "cta",
  "id": "cta-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

CTA · Glass

block: "cta:glass"

CTA optimized for layered glass-style interfaces.

Use cases

Dashboards · Portfolios · AI tools

Screenshot hints

glass panel · blurred background

Props

Required: label, href

Optional: variant, density, style, description

JSON snippet

{
  "type": "cta",
  "id": "cta-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "cta",
  "id": "cta-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

CTA · Compact

block: "cta:compact"

CTA optimized for dense information layouts.

Use cases

Dashboards · Catalogs · Doc indexes

Screenshot hints

tight spacing · dense card grid

Props

Required: label, href

Optional: variant, density, style, description

JSON snippet

{
  "type": "cta",
  "id": "cta-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "cta",
  "id": "cta-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

CTA · Luxury

block: "cta:luxury"

CTA optimized for premium brand storytelling.

Use cases

Luxury brands · Studios · Premium services

Screenshot hints

serif display · premium hero

Props

Required: label, href

Optional: variant, density, style, description

JSON snippet

{
  "type": "cta",
  "id": "cta-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "cta",
  "id": "cta-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Pricing · Editorial

block: "pricing:editorial"

Pricing optimized for article-rich pages.

Use cases

Blogs · Guides · Resource hubs

Screenshot hints

editorial spacing · content hierarchy

Props

Required: plans

Optional: variant, density, style, description

JSON snippet

{
  "type": "pricing",
  "id": "pricing-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "pricing",
  "id": "pricing-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Pricing · Commerce

block: "pricing:commerce"

Pricing optimized for merchandising and checkout-driven pages.

Use cases

Storefronts · Offers · Product launches

Screenshot hints

price emphasis · buy CTA

Props

Required: plans

Optional: variant, density, style, description

JSON snippet

{
  "type": "pricing",
  "id": "pricing-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "pricing",
  "id": "pricing-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Pricing · Glass

block: "pricing:glass"

Pricing optimized for layered glass-style interfaces.

Use cases

Dashboards · Portfolios · AI tools

Screenshot hints

glass panel · blurred background

Props

Required: plans

Optional: variant, density, style, description

JSON snippet

{
  "type": "pricing",
  "id": "pricing-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "pricing",
  "id": "pricing-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Pricing · Compact

block: "pricing:compact"

Pricing optimized for dense information layouts.

Use cases

Dashboards · Catalogs · Doc indexes

Screenshot hints

tight spacing · dense card grid

Props

Required: plans

Optional: variant, density, style, description

JSON snippet

{
  "type": "pricing",
  "id": "pricing-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "pricing",
  "id": "pricing-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Pricing · Luxury

block: "pricing:luxury"

Pricing optimized for premium brand storytelling.

Use cases

Luxury brands · Studios · Premium services

Screenshot hints

serif display · premium hero

Props

Required: plans

Optional: variant, density, style, description

JSON snippet

{
  "type": "pricing",
  "id": "pricing-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "pricing",
  "id": "pricing-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

FAQ · Editorial

block: "faq:editorial"

FAQ optimized for article-rich pages.

Use cases

Blogs · Guides · Resource hubs

Screenshot hints

editorial spacing · content hierarchy

Props

Required: items

Optional: variant, density, style, description

JSON snippet

{
  "type": "faq",
  "id": "faq-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "faq",
  "id": "faq-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

FAQ · Commerce

block: "faq:commerce"

FAQ optimized for merchandising and checkout-driven pages.

Use cases

Storefronts · Offers · Product launches

Screenshot hints

price emphasis · buy CTA

Props

Required: items

Optional: variant, density, style, description

JSON snippet

{
  "type": "faq",
  "id": "faq-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "faq",
  "id": "faq-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

FAQ · Glass

block: "faq:glass"

FAQ optimized for layered glass-style interfaces.

Use cases

Dashboards · Portfolios · AI tools

Screenshot hints

glass panel · blurred background

Props

Required: items

Optional: variant, density, style, description

JSON snippet

{
  "type": "faq",
  "id": "faq-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "faq",
  "id": "faq-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

FAQ · Compact

block: "faq:compact"

FAQ optimized for dense information layouts.

Use cases

Dashboards · Catalogs · Doc indexes

Screenshot hints

tight spacing · dense card grid

Props

Required: items

Optional: variant, density, style, description

JSON snippet

{
  "type": "faq",
  "id": "faq-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "faq",
  "id": "faq-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

FAQ · Luxury

block: "faq:luxury"

FAQ optimized for premium brand storytelling.

Use cases

Luxury brands · Studios · Premium services

Screenshot hints

serif display · premium hero

Props

Required: items

Optional: variant, density, style, description

JSON snippet

{
  "type": "faq",
  "id": "faq-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "faq",
  "id": "faq-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Testimonial · Editorial

block: "testimonial:editorial"

Testimonial optimized for article-rich pages.

Use cases

Blogs · Guides · Resource hubs

Screenshot hints

editorial spacing · content hierarchy

Props

Required: quote, author

Optional: variant, density, style, description

JSON snippet

{
  "type": "testimonial",
  "id": "testimonial-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "testimonial",
  "id": "testimonial-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Testimonial · Commerce

block: "testimonial:commerce"

Testimonial optimized for merchandising and checkout-driven pages.

Use cases

Storefronts · Offers · Product launches

Screenshot hints

price emphasis · buy CTA

Props

Required: quote, author

Optional: variant, density, style, description

JSON snippet

{
  "type": "testimonial",
  "id": "testimonial-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "testimonial",
  "id": "testimonial-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Testimonial · Glass

block: "testimonial:glass"

Testimonial optimized for layered glass-style interfaces.

Use cases

Dashboards · Portfolios · AI tools

Screenshot hints

glass panel · blurred background

Props

Required: quote, author

Optional: variant, density, style, description

JSON snippet

{
  "type": "testimonial",
  "id": "testimonial-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "testimonial",
  "id": "testimonial-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Testimonial · Compact

block: "testimonial:compact"

Testimonial optimized for dense information layouts.

Use cases

Dashboards · Catalogs · Doc indexes

Screenshot hints

tight spacing · dense card grid

Props

Required: quote, author

Optional: variant, density, style, description

JSON snippet

{
  "type": "testimonial",
  "id": "testimonial-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "testimonial",
  "id": "testimonial-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Testimonial · Luxury

block: "testimonial:luxury"

Testimonial optimized for premium brand storytelling.

Use cases

Luxury brands · Studios · Premium services

Screenshot hints

serif display · premium hero

Props

Required: quote, author

Optional: variant, density, style, description

JSON snippet

{
  "type": "testimonial",
  "id": "testimonial-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "testimonial",
  "id": "testimonial-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Stats · Editorial

block: "stats:editorial"

Stats optimized for article-rich pages.

Use cases

Blogs · Guides · Resource hubs

Screenshot hints

editorial spacing · content hierarchy

Props

Required: items

Optional: variant, density, style, description

JSON snippet

{
  "type": "stats",
  "id": "stats-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "stats",
  "id": "stats-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Stats · Commerce

block: "stats:commerce"

Stats optimized for merchandising and checkout-driven pages.

Use cases

Storefronts · Offers · Product launches

Screenshot hints

price emphasis · buy CTA

Props

Required: items

Optional: variant, density, style, description

JSON snippet

{
  "type": "stats",
  "id": "stats-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "stats",
  "id": "stats-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Stats · Glass

block: "stats:glass"

Stats optimized for layered glass-style interfaces.

Use cases

Dashboards · Portfolios · AI tools

Screenshot hints

glass panel · blurred background

Props

Required: items

Optional: variant, density, style, description

JSON snippet

{
  "type": "stats",
  "id": "stats-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "stats",
  "id": "stats-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Stats · Compact

block: "stats:compact"

Stats optimized for dense information layouts.

Use cases

Dashboards · Catalogs · Doc indexes

Screenshot hints

tight spacing · dense card grid

Props

Required: items

Optional: variant, density, style, description

JSON snippet

{
  "type": "stats",
  "id": "stats-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "stats",
  "id": "stats-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Stats · Luxury

block: "stats:luxury"

Stats optimized for premium brand storytelling.

Use cases

Luxury brands · Studios · Premium services

Screenshot hints

serif display · premium hero

Props

Required: items

Optional: variant, density, style, description

JSON snippet

{
  "type": "stats",
  "id": "stats-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "stats",
  "id": "stats-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Gallery · Editorial

block: "gallery:editorial"

Gallery optimized for article-rich pages.

Use cases

Blogs · Guides · Resource hubs

Screenshot hints

editorial spacing · content hierarchy

Props

Required: images

Optional: variant, density, style, description

JSON snippet

{
  "type": "gallery",
  "id": "gallery-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "gallery",
  "id": "gallery-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Gallery · Commerce

block: "gallery:commerce"

Gallery optimized for merchandising and checkout-driven pages.

Use cases

Storefronts · Offers · Product launches

Screenshot hints

price emphasis · buy CTA

Props

Required: images

Optional: variant, density, style, description

JSON snippet

{
  "type": "gallery",
  "id": "gallery-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "gallery",
  "id": "gallery-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Gallery · Glass

block: "gallery:glass"

Gallery optimized for layered glass-style interfaces.

Use cases

Dashboards · Portfolios · AI tools

Screenshot hints

glass panel · blurred background

Props

Required: images

Optional: variant, density, style, description

JSON snippet

{
  "type": "gallery",
  "id": "gallery-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "gallery",
  "id": "gallery-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Gallery · Compact

block: "gallery:compact"

Gallery optimized for dense information layouts.

Use cases

Dashboards · Catalogs · Doc indexes

Screenshot hints

tight spacing · dense card grid

Props

Required: images

Optional: variant, density, style, description

JSON snippet

{
  "type": "gallery",
  "id": "gallery-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "gallery",
  "id": "gallery-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Gallery · Luxury

block: "gallery:luxury"

Gallery optimized for premium brand storytelling.

Use cases

Luxury brands · Studios · Premium services

Screenshot hints

serif display · premium hero

Props

Required: images

Optional: variant, density, style, description

JSON snippet

{
  "type": "gallery",
  "id": "gallery-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "gallery",
  "id": "gallery-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Video · Editorial

block: "video:editorial"

Video optimized for article-rich pages.

Use cases

Blogs · Guides · Resource hubs

Screenshot hints

editorial spacing · content hierarchy

Props

Required: videoId

Optional: variant, density, style, description

JSON snippet

{
  "type": "video",
  "id": "video-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "video",
  "id": "video-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Video · Commerce

block: "video:commerce"

Video optimized for merchandising and checkout-driven pages.

Use cases

Storefronts · Offers · Product launches

Screenshot hints

price emphasis · buy CTA

Props

Required: videoId

Optional: variant, density, style, description

JSON snippet

{
  "type": "video",
  "id": "video-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "video",
  "id": "video-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Video · Glass

block: "video:glass"

Video optimized for layered glass-style interfaces.

Use cases

Dashboards · Portfolios · AI tools

Screenshot hints

glass panel · blurred background

Props

Required: videoId

Optional: variant, density, style, description

JSON snippet

{
  "type": "video",
  "id": "video-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "video",
  "id": "video-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Video · Compact

block: "video:compact"

Video optimized for dense information layouts.

Use cases

Dashboards · Catalogs · Doc indexes

Screenshot hints

tight spacing · dense card grid

Props

Required: videoId

Optional: variant, density, style, description

JSON snippet

{
  "type": "video",
  "id": "video-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "video",
  "id": "video-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Video · Luxury

block: "video:luxury"

Video optimized for premium brand storytelling.

Use cases

Luxury brands · Studios · Premium services

Screenshot hints

serif display · premium hero

Props

Required: videoId

Optional: variant, density, style, description

JSON snippet

{
  "type": "video",
  "id": "video-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "video",
  "id": "video-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Embed · Editorial

block: "embed:editorial"

Embed optimized for article-rich pages.

Use cases

Blogs · Guides · Resource hubs

Screenshot hints

editorial spacing · content hierarchy

Props

Required: embedUrl

Optional: variant, density, style, description

JSON snippet

{
  "type": "embed",
  "id": "embed-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "embed",
  "id": "embed-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Embed · Commerce

block: "embed:commerce"

Embed optimized for merchandising and checkout-driven pages.

Use cases

Storefronts · Offers · Product launches

Screenshot hints

price emphasis · buy CTA

Props

Required: embedUrl

Optional: variant, density, style, description

JSON snippet

{
  "type": "embed",
  "id": "embed-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "embed",
  "id": "embed-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Embed · Glass

block: "embed:glass"

Embed optimized for layered glass-style interfaces.

Use cases

Dashboards · Portfolios · AI tools

Screenshot hints

glass panel · blurred background

Props

Required: embedUrl

Optional: variant, density, style, description

JSON snippet

{
  "type": "embed",
  "id": "embed-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "embed",
  "id": "embed-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Embed · Compact

block: "embed:compact"

Embed optimized for dense information layouts.

Use cases

Dashboards · Catalogs · Doc indexes

Screenshot hints

tight spacing · dense card grid

Props

Required: embedUrl

Optional: variant, density, style, description

JSON snippet

{
  "type": "embed",
  "id": "embed-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "embed",
  "id": "embed-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Embed · Luxury

block: "embed:luxury"

Embed optimized for premium brand storytelling.

Use cases

Luxury brands · Studios · Premium services

Screenshot hints

serif display · premium hero

Props

Required: embedUrl

Optional: variant, density, style, description

JSON snippet

{
  "type": "embed",
  "id": "embed-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "embed",
  "id": "embed-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Form · Editorial

block: "form:editorial"

Form optimized for article-rich pages.

Use cases

Blogs · Guides · Resource hubs

Screenshot hints

editorial spacing · content hierarchy

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "form",
  "id": "form-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "form",
  "id": "form-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Form · Commerce

block: "form:commerce"

Form optimized for merchandising and checkout-driven pages.

Use cases

Storefronts · Offers · Product launches

Screenshot hints

price emphasis · buy CTA

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "form",
  "id": "form-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "form",
  "id": "form-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Form · Glass

block: "form:glass"

Form optimized for layered glass-style interfaces.

Use cases

Dashboards · Portfolios · AI tools

Screenshot hints

glass panel · blurred background

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "form",
  "id": "form-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "form",
  "id": "form-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Form · Compact

block: "form:compact"

Form optimized for dense information layouts.

Use cases

Dashboards · Catalogs · Doc indexes

Screenshot hints

tight spacing · dense card grid

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "form",
  "id": "form-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "form",
  "id": "form-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Form · Luxury

block: "form:luxury"

Form optimized for premium brand storytelling.

Use cases

Luxury brands · Studios · Premium services

Screenshot hints

serif display · premium hero

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "form",
  "id": "form-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "form",
  "id": "form-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Navigation · Editorial

block: "nav:editorial"

Navigation optimized for article-rich pages.

Use cases

Blogs · Guides · Resource hubs

Screenshot hints

editorial spacing · content hierarchy

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "nav",
  "id": "nav-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "nav",
  "id": "nav-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Navigation · Commerce

block: "nav:commerce"

Navigation optimized for merchandising and checkout-driven pages.

Use cases

Storefronts · Offers · Product launches

Screenshot hints

price emphasis · buy CTA

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "nav",
  "id": "nav-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "nav",
  "id": "nav-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Navigation · Glass

block: "nav:glass"

Navigation optimized for layered glass-style interfaces.

Use cases

Dashboards · Portfolios · AI tools

Screenshot hints

glass panel · blurred background

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "nav",
  "id": "nav-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "nav",
  "id": "nav-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Navigation · Compact

block: "nav:compact"

Navigation optimized for dense information layouts.

Use cases

Dashboards · Catalogs · Doc indexes

Screenshot hints

tight spacing · dense card grid

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "nav",
  "id": "nav-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "nav",
  "id": "nav-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Navigation · Luxury

block: "nav:luxury"

Navigation optimized for premium brand storytelling.

Use cases

Luxury brands · Studios · Premium services

Screenshot hints

serif display · premium hero

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "nav",
  "id": "nav-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "nav",
  "id": "nav-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Footer · Editorial

block: "footer:editorial"

Footer optimized for article-rich pages.

Use cases

Blogs · Guides · Resource hubs

Screenshot hints

editorial spacing · content hierarchy

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "footer",
  "id": "footer-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "footer",
  "id": "footer-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Footer · Commerce

block: "footer:commerce"

Footer optimized for merchandising and checkout-driven pages.

Use cases

Storefronts · Offers · Product launches

Screenshot hints

price emphasis · buy CTA

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "footer",
  "id": "footer-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "footer",
  "id": "footer-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Footer · Glass

block: "footer:glass"

Footer optimized for layered glass-style interfaces.

Use cases

Dashboards · Portfolios · AI tools

Screenshot hints

glass panel · blurred background

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "footer",
  "id": "footer-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "footer",
  "id": "footer-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Footer · Compact

block: "footer:compact"

Footer optimized for dense information layouts.

Use cases

Dashboards · Catalogs · Doc indexes

Screenshot hints

tight spacing · dense card grid

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "footer",
  "id": "footer-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "footer",
  "id": "footer-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Footer · Luxury

block: "footer:luxury"

Footer optimized for premium brand storytelling.

Use cases

Luxury brands · Studios · Premium services

Screenshot hints

serif display · premium hero

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "footer",
  "id": "footer-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "footer",
  "id": "footer-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Category List · Editorial

block: "category-list:editorial"

Category List optimized for article-rich pages.

Use cases

Blogs · Guides · Resource hubs

Screenshot hints

editorial spacing · content hierarchy

Props

Required: none

Optional: variant, density, style, description

JSON snippet

{
  "type": "category-list",
  "id": "category-list-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "category-list",
  "id": "category-list-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Category List · Commerce

block: "category-list:commerce"

Category List optimized for merchandising and checkout-driven pages.

Use cases

Storefronts · Offers · Product launches

Screenshot hints

price emphasis · buy CTA

Props

Required: none

Optional: variant, density, style, description

JSON snippet

{
  "type": "category-list",
  "id": "category-list-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "category-list",
  "id": "category-list-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Category List · Glass

block: "category-list:glass"

Category List optimized for layered glass-style interfaces.

Use cases

Dashboards · Portfolios · AI tools

Screenshot hints

glass panel · blurred background

Props

Required: none

Optional: variant, density, style, description

JSON snippet

{
  "type": "category-list",
  "id": "category-list-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "category-list",
  "id": "category-list-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Category List · Compact

block: "category-list:compact"

Category List optimized for dense information layouts.

Use cases

Dashboards · Catalogs · Doc indexes

Screenshot hints

tight spacing · dense card grid

Props

Required: none

Optional: variant, density, style, description

JSON snippet

{
  "type": "category-list",
  "id": "category-list-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "category-list",
  "id": "category-list-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Category List · Luxury

block: "category-list:luxury"

Category List optimized for premium brand storytelling.

Use cases

Luxury brands · Studios · Premium services

Screenshot hints

serif display · premium hero

Props

Required: none

Optional: variant, density, style, description

JSON snippet

{
  "type": "category-list",
  "id": "category-list-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "category-list",
  "id": "category-list-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Product Card · Editorial

block: "product-card:editorial"

Product Card optimized for article-rich pages.

Use cases

Blogs · Guides · Resource hubs

Screenshot hints

editorial spacing · content hierarchy

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "product-card",
  "id": "product-card-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "product-card",
  "id": "product-card-editorial-example",
  "variant": "editorial",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Product Card · Commerce

block: "product-card:commerce"

Product Card optimized for merchandising and checkout-driven pages.

Use cases

Storefronts · Offers · Product launches

Screenshot hints

price emphasis · buy CTA

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "product-card",
  "id": "product-card-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "product-card",
  "id": "product-card-commerce-example",
  "variant": "commerce",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Product Card · Glass

block: "product-card:glass"

Product Card optimized for layered glass-style interfaces.

Use cases

Dashboards · Portfolios · AI tools

Screenshot hints

glass panel · blurred background

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "product-card",
  "id": "product-card-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "product-card",
  "id": "product-card-glass-example",
  "variant": "glass",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Product Card · Compact

block: "product-card:compact"

Product Card optimized for dense information layouts.

Use cases

Dashboards · Catalogs · Doc indexes

Screenshot hints

tight spacing · dense card grid

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "product-card",
  "id": "product-card-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "product-card",
  "id": "product-card-compact-example",
  "variant": "compact",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

core

Product Card · Luxury

block: "product-card:luxury"

Product Card optimized for premium brand storytelling.

Use cases

Luxury brands · Studios · Premium services

Screenshot hints

serif display · premium hero

Props

Required: title

Optional: variant, density, style, description

JSON snippet

{
  "type": "product-card",
  "id": "product-card-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}

Example usage

Suggested page: /widgets

{
  "type": "product-card",
  "id": "product-card-luxury-example",
  "variant": "luxury",
  "props": {
    "title": "Example title",
    "description": "Example content"
  }
}