Block reference
This page describes every block you're likely to use: what it's for, each of its fields, and an example you can paste into the code editor (see Using the code editor).
The field names in the tables are the labels you see in Edit props. The code editor uses the same names without spaces, in camel case. For example, Leading Icon is leadingIcon.
Fields many blocks share
Rather than repeat them in every table, these fields work the same way on every block that has them:
| Field | What it does |
|---|---|
| Headline | Small "eyebrow" text above the title, such as Features or How it works. |
| Title / Description | The block's heading and supporting text. |
| Heading Font / Body Font | Uses a different font for this block's title or text. Pick from the list. |
| Heading Font Custom / Body Font Custom | Uses your own brand font in this block. Enter its exact font name. Pair it with the font URL below. |
| Heading Font Url / Body Font Url | The font file or font link for the custom font above. See Brand fonts. |
| Headline Class / Title Class / Description Class | Style changes for just that piece of text, such as uppercase italic or text-5xl. See Styling. |
| Class | Style changes for the whole block, such as py-24 for more vertical space. See Styling. |
| Ui | An advanced styling option that works in the code editor only. See Styling. |
Buttons share these fields too, wherever a block has a Links list:
| Button field | What it does |
|---|---|
| Label | The button text. |
| To | Where it goes: /page, #section, or https://…. |
| Color | primary, secondary, success, info, warning, error, or neutral. |
| Variant | solid, outline, soft, subtle, ghost, or link. |
| Size | xs, sm, md, lg, or xl. |
| Icon / Leading Icon / Trailing Icon | An icon before or after the label. |
| Target | _blank opens the link in a new tab. |
Page Hero
The big opening block at the top of a page: an eyebrow headline, a large title, a supporting line, buttons, and optionally a logo and an image.
| Field | What it does |
|---|---|
| Headline | Small text above the title. |
| Title | The main headline. |
| Description | The supporting paragraph. |
| Links | Buttons below the text. You can also nest Cta blocks inside the hero instead (see the example). |
| Orientation | vertical (stacked and centered, the default) or horizontal (text on one side, content on the other). |
| Reverse | Swaps the sides in a horizontal layout. |
| Fill | Grows the hero to fill the screen and centers its content. Best on a page with the header and footer hidden. |
| Logo | An image shown above the title, such as your logo. |
| Logo Alt | A text description of the logo, for screen readers. |
| Plus | Font fields, Title Class, Description Class, Class, Ui. |
Minimal:
::page-hero
---
title: Design and launch your site without touching code
description: Every section on this page is edited visually, right in Studio.
---
::
With buttons and an image below:
::page-hero
---
headline: New for 2026
title: The fastest way to launch your next campaign
description: Pick a block, fill in your words, publish. That's it.
---
:::cta
---
label: Get started
to: /contact
leadingIcon: i-lucide-rocket
---
:::
:::cta
---
label: See pricing
to: "#pricing"
color: neutral
variant: outline
---
:::
#bottom
::
Full-screen with a logo (for a page with the header and footer hidden):
::page-hero
---
logo: https://example.com/your-logo.png
logoAlt: Acme Co.
title: Get the app
description: Available on iPhone and Android.
fill: true
titleClass: uppercase italic
---
:::cta
---
label: App Store
to: https://apps.apple.com/
target: _blank
pill: true
---
:::
:::cta
---
label: Google Play
to: https://play.google.com/
target: _blank
pill: true
---
:::
::
/logo.png by hand, because uploaded files aren't served from your site's own address. The same goes for every image field below.Cta (button)
A single button. Usually nested inside a Page Hero or Page Section, where several Cta blocks in a row sit side by side. It can also stand alone between blocks.
| Field | What it does | Default |
|---|---|---|
| Label | Button text. | Learn more |
| To | Destination: /page, #section, or https://…. | / |
| Color | primary, secondary, success, info, warning, error, neutral. | primary |
| Variant | solid, outline, soft, subtle, ghost, link. | solid |
| Size | xs, sm, md, lg, xl. | xl |
| Pill | A large, dark, fully rounded button, like an app-store button. It overrides color and variant. | Off |
| Leading Icon / Trailing Icon | An icon before or after the text. | None |
| Target | _blank opens the link in a new tab. Use it for links to other websites. | _self |
::cta
---
label: Book a call
to: https://calendly.com/your-name
target: _blank
color: primary
variant: solid
size: xl
trailingIcon: i-lucide-arrow-right
---
::
Page Section
A general-purpose content block: an eyebrow, a title, a description, optional buttons and feature bullets, and an image or other content beside or below it. Use it for "How it works", "About us", or any text-and-picture section.
| Field | What it does |
|---|---|
| Headline | Small text above the title. |
| Icon | An icon shown above the headline. |
| Title / Description | Heading and text. |
| Links | Buttons. |
| Features | A short list of bullet points, each with a Title, Description, and Icon. |
| Orientation | vertical (content below the text) or horizontal (content beside the text). |
| Reverse | Puts the content on the other side in a horizontal layout. |
| Plus | Class, Ui. |
Anything you put inside the block, such as an image, appears in the content area.
::page-section
---
id: how-it-works
headline: How it works
title: From blank page to live site in an afternoon
description: Choose your blocks, add your words and pictures, and publish.
orientation: horizontal
features:
- title: Visual editing
description: Click, type, done.
icon: i-lucide-mouse-pointer-click
- title: Always on-brand
description: Your colors and fonts on every block.
icon: i-lucide-palette
---
::
Feature Grid
A grid of cards, each with an icon, a title, and a short description. Good for features, services, or benefits.
| Field | What it does |
|---|---|
| Headline / Title / Description | The section heading. |
| Items | One card per item, each with a Title, Description, and Icon. |
| Plus | Font fields, Headline Class, Title Class, Description Class. Advanced (code editor): Grid Class, Grid Ui, Feature Ui. |
::feature-grid
---
id: features
headline: Features
title: Everything you need to launch
description: Built in, ready to go, and editable in Studio.
items:
- title: Visual editing
description: Edit copy, links, icons, and colors for every block.
icon: i-lucide-mouse-pointer-click
- title: Fully managed
description: Hosting, SSL, and deployment handled for you.
icon: i-lucide-server
- title: Fully themeable
description: Change your colors and fonts once, everywhere.
icon: i-lucide-palette
---
::
Stats
A row of big numbers with labels, for social proof such as "10k+ customers" or "99.9% uptime".
| Field | What it does |
|---|---|
| Headline / Title / Description | Optional heading above the numbers. |
| Items | One per number, each with a Value (10k+, 4.9/5) and a Label (Customers). |
| Plus | Font fields, Headline Class, Title Class, Description Class, Class, Ui. |
::stats
---
headline: By the numbers
title: Trusted by growing teams
items:
- value: 10k+
label: Sites launched
- value: 99.9%
label: Uptime
- value: 24/7
label: Support
- value: 4.9/5
label: Customer rating
---
::
Page Logos
A row of customer, partner, or press logos. It can scroll continuously.
| Field | What it does |
|---|---|
| Title / Description | Short heading, such as Trusted by teams at. |
| Items | One per logo. Each is an image (src for the logo's address, alt for the company name) or an icon name (i-lucide-…). |
| Marquee | On: the logos scroll in a continuous loop. Off: a static row. |
| Plus | Font fields, Title Class, Description Class, Class, Ui. |
::page-logos
---
title: Trusted by teams at
marquee: true
items:
- src: https://example.com/acme-logo.svg
alt: Acme Co.
- src: https://example.com/partner-logo.png
alt: Partner Inc.
- i-lucide-figma
---
::
Testimonials
A grid of customer quotes.
| Field | What it does |
|---|---|
| Title / Description | Section heading. |
| Items | One per quote, each with a Quote, Name, Description (their role or company), and Avatar (a photo, optional). |
| Plus | Font fields, Title Class, Description Class, Class. Advanced (code editor): Grid Ui, Card Ui. |
::testimonials
---
title: What our customers say
items:
- quote: We launched our campaign page in an afternoon, no developer required.
name: Alex Rivera
description: Marketing Lead, Northwind
avatar: https://example.com/alex.jpg
- quote: Our team updates pricing and FAQs themselves now.
name: Priya Shah
description: Founder, Shah & Co.
---
::
Faq
Questions and answers. Each question expands to show its answer when clicked.
| Field | What it does |
|---|---|
| Title / Description | Section heading. |
| Items | One per question, each with a Label (the question) and Content (the answer). |
| Plus | Font fields, Title Class, Description Class, Class, Ui. |
::faq
---
id: faq
title: Frequently asked questions
items:
- label: How long does setup take?
content: Most customers are live the same day.
- label: Can I cancel anytime?
content: Yes. There are no long-term contracts.
- label: Do you offer refunds?
content: We offer a full refund within 30 days.
---
::
Pricing Plans
A row of pricing cards. Each card is a plan with a price, a list of what's included, and a button.
| Field | What it does |
|---|---|
| Title / Description | Section heading. |
| Plans | One card per plan (fields below). |
| Plus | Font fields, Title Class, Description Class, Class, Ui. |
Each plan has:
| Plan field | What it does |
|---|---|
| Title | The plan name. |
| Description | A one-line summary. |
| Price | The headline price, such as $29. |
| Discount | A sale price. When set, it's shown and Price is crossed out. |
| Billing Cycle | Text after the price, such as /month. |
| Badge | A small label, such as Most popular. |
| Highlight | Emphasizes this card. Use it for the plan you recommend. |
| Button | The card's button: Label, To, Color, and so on. |
| Features | What's included, one line each. Each item can be plain text, or a Title with an Icon. |
| Orientation | vertical (the default) or horizontal for a wide card. |
::pricing-plans
---
id: pricing
title: Simple pricing
description: Pick the plan that fits. Upgrade anytime.
plans:
- title: Starter
description: For a single campaign.
price: $19
billingCycle: /month
features:
- 1 landing page
- Custom domain
button:
label: Choose Starter
to: /contact
color: neutral
variant: outline
- title: Growth
description: For a small marketing site.
price: $49
discount: $39
billingCycle: /month
badge: Most popular
highlight: true
features:
- title: Up to 5 pages
icon: i-lucide-check
- title: Built-in forms
icon: i-lucide-check
button:
label: Choose Growth
to: /contact
---
::
Pricing Plan (singular) is a single card on its own, with the same fields as one plan above. Use it when you want one plan inside another layout.
Page CTA
A full-width call-to-action band, usually near the bottom of a page: a headline, a line of text, and buttons.
| Field | What it does |
|---|---|
| Title / Description | The message. |
| Links | Buttons. |
| Variant | The band's look: solid, outline, soft, subtle, or naked. |
| Orientation | vertical (centered) or horizontal (text on the left, buttons on the right). |
| Reverse | Swaps the sides in a horizontal layout. |
| Plus | Font fields, Title Class, Description Class, Class, Ui. |
::page-cta
---
title: Ready to launch?
description: Get your page live today.
variant: subtle
links:
- label: Get started
to: /contact
color: primary
icon: i-lucide-rocket
- label: Talk to sales
to: /contact
color: neutral
variant: outline
---
::
Banner
A slim announcement strip, such as "We just launched v2. See what's new."
| Field | What it does |
|---|---|
| Title | The announcement text. |
| Icon | An icon before the text. |
| Color | primary, secondary, success, info, warning, error, neutral. |
| To / Target | Makes the whole banner a link. |
| Actions | Buttons on the banner. |
| Close | Shows a close button so visitors can dismiss it. |
| Close Icon | A different icon for the close button. |
| Id | A name for this announcement. Change it when the announcement changes, so visitors who dismissed the old one see the new one. |
::banner
---
id: launch-2026
title: We just launched v2. See what's new.
icon: i-lucide-sparkles
color: primary
to: /whats-new
close: true
---
::
Footer and Footer Columns (in-page)
Your site-wide footer (copyright, footer links, social icons) comes from site settings and appears on every page automatically. You don't need these blocks for it.
These two blocks add a footer-style section inside a page's content. They're mainly useful on a page with the site footer hidden that still needs closing links.
Footer
| Field | What it does |
|---|---|
| Title / Description | Optional text at the top. |
| Copyright | The copyright line. |
| Links | A row of links, each with a Label, To, and Target. |
Footer Columns
| Field | What it does |
|---|---|
| Columns | Each column has a Label (its heading) and Children, a list of links with a Label, To, and Target. |
::footer-columns
---
columns:
- label: Company
children:
- label: About
to: /about
- label: Careers
to: /careers
- label: Legal
children:
- label: Privacy Policy
to: /privacy
- label: Terms
to: /terms
---
::
Form Embed and Form Block
Forms have their own guide: Forms.
- Form Embed places a form from another service, such as Klaviyo, HubSpot, Mailchimp, Typeform, Tally, or Google Forms.
- Form Block builds your own form from fields and sends the answers to a service you choose.
Hero (older)
Hero is the original hero block. It still works on pages that already use it, but use Page Hero for anything new. Page Hero does everything Hero does, and adds horizontal layouts, per-block fonts, and more styling options.
Layout helpers (advanced)
The Deep Woods Page Blocks group also contains building blocks for custom layouts: Page, Page Header, Page Body, Page Aside, Page Anchors, Page Grid, Page Card, Page Columns, Page List, Page Links, and Page Feature. Combine them to build documentation-style pages, multi-column layouts, or custom card grids. A typical landing page or microsite doesn't need them. If you want help with a custom layout, contact support.