Section library
Embed
<a href="https://forumulate.com/guides/section-library"><img src="https://forumulate.com/guides/_api/public/orgs/046a9bc0-d530-43ae-9bae-af7945008cda/spaces/36aa4df0-1e95-4cef-8ae9-795169441345/pages/45aa0ab2-50e9-4267-8ae9-48200987b00a/social-card.svg?v=3e7ae33eec8b" alt="Section library" width="600" height="315"></a>Whole bands — a hero, a feature grid, a pricing table, a call to action — ready to drop into a page or a front page. There are 20, in 6 families. A person inserts them from the editor’s slash menu (the Sections group), the block palette, or the studio’s + beside any block; a script gets the same list, as block JSON:
curl https://forumulate.com/api/section-library
curl "https://forumulate.com/api/section-library?family=pricing"
curl https://forumulate.com/api/section-library/hero-splitEach entry’s blocks is one section with role: "layout" — a look band, not one of a shape’s named slots — holding ordinary blocks. Splice it into a page’s content (or a front page’s doc.content) as it is, then change the words: every part is edited, moved and styled like the rest of the page. Pictures are left empty ("src": "") for you to fill. What every block and attribute takes is in the block schema reference.
The pictures are schematics drawn from each section’s own blocks — the band’s paint and width, and how its parts are arranged — not screenshots, so they are always the section as it is today. Words are drawn as bars. On your site the band takes your theme’s colours and fonts. Each picture is served at /api/section-library/{id}/preview.svg.
Heroes
Hero – centred
hero-center — Headline, sentence and two buttons, centred.
[
{
"type": "section",
"attrs": {
"key": "hero",
"role": "layout",
"width": "full",
"padding": {
"top": 120,
"bottom": 112
}
},
"content": [
{
"type": "hero",
"attrs": {
"eyebrow": "New",
"title": "Say what this is in one line",
"sub": "One sentence on who it is for and what changes for them once they have it.",
"actions": [
{
"label": "Get started",
"href": "#",
"style": "primary"
},
{
"label": "Learn more",
"href": "#",
"style": "secondary"
}
],
"layout": "center",
"size": "xl"
}
}
]
}
]Hero – split
hero-split — Words on one side, a product picture on the other.
[
{
"type": "section",
"attrs": {
"key": "hero",
"role": "layout",
"width": "boxed",
"padding": {
"top": 96,
"bottom": 96
}
},
"content": [
{
"type": "hero",
"attrs": {
"eyebrow": "New",
"title": "Say what this is in one line",
"sub": "One sentence on who it is for and what changes for them once they have it.",
"actions": [
{
"label": "Get started",
"href": "#",
"style": "primary"
},
{
"label": "Learn more",
"href": "#",
"style": "secondary"
}
],
"layout": "split",
"size": "lg",
"media": {
"kind": "image",
"src": "",
"alt": "The product"
}
}
}
]
}
]Hero – picture below
hero-below — Words first, a wide product picture underneath.
[
{
"type": "section",
"attrs": {
"key": "hero",
"role": "layout",
"width": "boxed",
"padding": {
"top": 104,
"bottom": 80
}
},
"content": [
{
"type": "hero",
"attrs": {
"eyebrow": "New",
"title": "Say what this is in one line",
"sub": "One sentence on who it is for and what changes for them once they have it.",
"actions": [
{
"label": "Get started",
"href": "#",
"style": "primary"
},
{
"label": "Learn more",
"href": "#",
"style": "secondary"
}
],
"layout": "below",
"size": "xl",
"media": {
"kind": "image",
"src": "",
"alt": "The product"
}
}
}
]
}
]Hero – video background
hero-video — A full-bleed band with a looping video behind the words.
[
{
"type": "section",
"attrs": {
"key": "hero",
"role": "layout",
"width": "full",
"padding": {
"top": 120,
"bottom": 120
},
"fullBleed": true,
"scheme": "dark",
"minHeight": "70vh",
"verticalAlign": "center",
"background": {
"color": "ink",
"video": {
"src": ""
}
}
},
"content": [
{
"type": "hero",
"attrs": {
"eyebrow": "New",
"title": "Say what this is in one line",
"sub": "One sentence on who it is for and what changes for them once they have it.",
"actions": [
{
"label": "Get started",
"href": "#",
"style": "primary"
},
{
"label": "Learn more",
"href": "#",
"style": "secondary"
}
],
"layout": "center",
"size": "xl"
}
}
]
}
]Features
Feature grid – 3 up
features-3 — A heading and three feature cards.
[
{
"type": "section",
"attrs": {
"key": "features",
"role": "layout",
"width": "boxed",
"padding": {
"top": 80,
"bottom": 80
}
},
"content": [
{
"type": "heading",
"attrs": {
"level": 2,
"textAlign": "center"
},
"content": [
{
"type": "text",
"text": "What you get"
}
]
},
{
"type": "cards",
"attrs": {
"columns": {
"lg": 3,
"md": 2,
"sm": 1
}
},
"content": [
{
"type": "card",
"attrs": {
"title": "First reason",
"description": "The most important thing a visitor should know.",
"icon": "zap",
"iconStyle": "tile"
}
},
{
"type": "card",
"attrs": {
"title": "Second reason",
"description": "What sets this apart, in a line or two.",
"icon": "shield",
"iconStyle": "tile"
}
},
{
"type": "card",
"attrs": {
"title": "Third reason",
"description": "The detail that answers the last doubt.",
"icon": "sparkles",
"iconStyle": "tile"
}
}
]
}
]
}
]Feature grid – 4 up
features-4 — A heading and four feature cards.
[
{
"type": "section",
"attrs": {
"key": "features",
"role": "layout",
"width": "boxed",
"padding": {
"top": 80,
"bottom": 80
}
},
"content": [
{
"type": "heading",
"attrs": {
"level": 2,
"textAlign": "center"
},
"content": [
{
"type": "text",
"text": "Everything you need"
}
]
},
{
"type": "cards",
"attrs": {
"columns": {
"lg": 4,
"md": 2,
"sm": 1
}
},
"content": [
{
"type": "card",
"attrs": {
"title": "First reason",
"description": "The most important thing a visitor should know.",
"icon": "zap",
"iconStyle": "tile"
}
},
{
"type": "card",
"attrs": {
"title": "Second reason",
"description": "What sets this apart, in a line or two.",
"icon": "shield",
"iconStyle": "tile"
}
},
{
"type": "card",
"attrs": {
"title": "Third reason",
"description": "The detail that answers the last doubt.",
"icon": "sparkles",
"iconStyle": "tile"
}
},
{
"type": "card",
"attrs": {
"title": "Fourth reason",
"description": "One more thing worth a line of its own.",
"icon": "layers",
"iconStyle": "tile"
}
}
]
}
]
}
]Alternating rows
alternating-rows — Copy and a picture, swapping sides row by row.
[
{
"type": "section",
"attrs": {
"key": "feature-rows",
"role": "layout",
"width": "boxed",
"padding": {
"top": 80,
"bottom": 80
}
},
"content": [
{
"type": "heading",
"attrs": {
"level": 2,
"textAlign": "center"
},
"content": [
{
"type": "text",
"text": "How it works"
}
]
},
{
"type": "columns",
"attrs": {
"alternate": true,
"valign": "center",
"gap": "xl",
"spaceAround": {
"lg": 48,
"sm": 24
}
},
"content": [
{
"type": "column",
"content": [
{
"type": "heading",
"attrs": {
"level": 3,
"variant": "eyebrow"
},
"content": [
{
"type": "text",
"text": "Feature 1"
}
]
},
{
"type": "heading",
"attrs": {
"level": 3
},
"content": [
{
"type": "text",
"text": "Name the feature and what it does"
}
]
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Two or three sentences on the problem it solves, written for the person who has it."
}
]
},
{
"type": "buttons",
"attrs": {
"align": "start"
},
"content": [
{
"type": "button",
"attrs": {
"label": "Learn more",
"href": "#",
"style": "link"
}
}
]
}
]
},
{
"type": "column",
"content": [
{
"type": "image",
"attrs": {
"src": "",
"alt": "A picture of the feature"
}
}
]
}
]
},
{
"type": "columns",
"attrs": {
"alternate": true,
"valign": "center",
"gap": "xl",
"spaceAround": {
"lg": 48,
"sm": 24
}
},
"content": [
{
"type": "column",
"content": [
{
"type": "heading",
"attrs": {
"level": 3,
"variant": "eyebrow"
},
"content": [
{
"type": "text",
"text": "Feature 2"
}
]
},
{
"type": "heading",
"attrs": {
"level": 3
},
"content": [
{
"type": "text",
"text": "Name the feature and what it does"
}
]
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Two or three sentences on the problem it solves, written for the person who has it."
}
]
},
{
"type": "buttons",
"attrs": {
"align": "start"
},
"content": [
{
"type": "button",
"attrs": {
"label": "Learn more",
"href": "#",
"style": "link"
}
}
]
}
]
},
{
"type": "column",
"content": [
{
"type": "image",
"attrs": {
"src": "",
"alt": "A picture of the feature"
}
}
]
}
]
},
{
"type": "columns",
"attrs": {
"alternate": true,
"valign": "center",
"gap": "xl",
"spaceAround": {
"lg": 48,
"sm": 24
}
},
"content": [
{
"type": "column",
"content": [
{
"type": "heading",
"attrs": {
"level": 3,
"variant": "eyebrow"
},
"content": [
{
"type": "text",
"text": "Feature 3"
}
]
},
{
"type": "heading",
"attrs": {
"level": 3
},
"content": [
{
"type": "text",
"text": "Name the feature and what it does"
}
]
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Two or three sentences on the problem it solves, written for the person who has it."
}
]
},
{
"type": "buttons",
"attrs": {
"align": "start"
},
"content": [
{
"type": "button",
"attrs": {
"label": "Learn more",
"href": "#",
"style": "link"
}
}
]
}
]
},
{
"type": "column",
"content": [
{
"type": "image",
"attrs": {
"src": "",
"alt": "A picture of the feature"
}
}
]
}
]
}
]
}
]Bento – 5 cells
bento — Five feature tiles of different sizes.
[
{
"type": "section",
"attrs": {
"key": "bento",
"role": "layout",
"width": "boxed",
"padding": {
"top": 80,
"bottom": 80
}
},
"content": [
{
"type": "heading",
"attrs": {
"level": 2,
"textAlign": "center"
},
"content": [
{
"type": "text",
"text": "Built for the whole team"
}
]
},
{
"type": "grid",
"attrs": {
"cols": 12,
"gap": "md"
},
"content": [
{
"type": "gridItem",
"attrs": {
"colSpan": 7,
"mdSpan": 12,
"smSpan": 12,
"rowSpan": 2,
"bg": "surface",
"pad": "lg",
"border": true,
"radius": "lg"
},
"content": [
{
"type": "heading",
"attrs": {
"level": 3
},
"content": [
{
"type": "text",
"text": "The headline feature"
}
]
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "The one thing to show first, with room to say it."
}
]
}
]
},
{
"type": "gridItem",
"attrs": {
"colSpan": 5,
"mdSpan": 6,
"smSpan": 12,
"rowSpan": 1,
"bg": "surface",
"pad": "lg",
"border": true,
"radius": "lg"
},
"content": [
{
"type": "heading",
"attrs": {
"level": 3
},
"content": [
{
"type": "text",
"text": "A second feature"
}
]
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "A line on what it does."
}
]
}
]
},
{
"type": "gridItem",
"attrs": {
"colSpan": 5,
"mdSpan": 6,
"smSpan": 12,
"rowSpan": 1,
"bg": "surface",
"pad": "lg",
"border": true,
"radius": "lg"
},
"content": [
{
"type": "heading",
"attrs": {
"level": 3
},
"content": [
{
"type": "text",
"text": "A third feature"
}
]
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "A line on what it does."
}
]
}
]
},
{
"type": "gridItem",
"attrs": {
"colSpan": 4,
"mdSpan": 6,
"smSpan": 12,
"rowSpan": 1,
"bg": "surface",
"pad": "lg",
"border": true,
"radius": "lg"
},
"content": [
{
"type": "heading",
"attrs": {
"level": 3
},
"content": [
{
"type": "text",
"text": "A fourth feature"
}
]
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "A line on what it does."
}
]
}
]
},
{
"type": "gridItem",
"attrs": {
"colSpan": 8,
"mdSpan": 12,
"smSpan": 12,
"rowSpan": 1,
"bg": "surface",
"pad": "lg",
"border": true,
"radius": "lg"
},
"content": [
{
"type": "heading",
"attrs": {
"level": 3
},
"content": [
{
"type": "text",
"text": "A fifth feature"
}
]
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "A wider tile for something with more to say."
}
]
}
]
}
]
}
]
}
]Feature switcher
feature-tabs — Tabs that switch between features, a picture for each.
[
{
"type": "section",
"attrs": {
"key": "feature-tabs",
"role": "layout",
"width": "boxed",
"padding": {
"top": 80,
"bottom": 80
}
},
"content": [
{
"type": "heading",
"attrs": {
"level": 2,
"textAlign": "center"
},
"content": [
{
"type": "text",
"text": "One product, every workflow"
}
]
},
{
"type": "tabs",
"attrs": {
"variant": "card"
},
"content": [
{
"type": "tab",
"attrs": {
"title": "Planning"
},
"content": [
{
"type": "columns",
"attrs": {
"valign": "center",
"gap": "lg"
},
"content": [
{
"type": "column",
"content": [
{
"type": "heading",
"attrs": {
"level": 3
},
"content": [
{
"type": "text",
"text": "What planning does"
}
]
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "A sentence or two on this feature, and one on why it matters."
}
]
}
]
},
{
"type": "column",
"content": [
{
"type": "image",
"attrs": {
"src": "",
"alt": "Planning, in the product"
}
}
]
}
]
}
]
},
{
"type": "tab",
"attrs": {
"title": "Building"
},
"content": [
{
"type": "columns",
"attrs": {
"valign": "center",
"gap": "lg"
},
"content": [
{
"type": "column",
"content": [
{
"type": "heading",
"attrs": {
"level": 3
},
"content": [
{
"type": "text",
"text": "What building does"
}
]
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "A sentence or two on this feature, and one on why it matters."
}
]
}
]
},
{
"type": "column",
"content": [
{
"type": "image",
"attrs": {
"src": "",
"alt": "Building, in the product"
}
}
]
}
]
}
]
},
{
"type": "tab",
"attrs": {
"title": "Shipping"
},
"content": [
{
"type": "columns",
"attrs": {
"valign": "center",
"gap": "lg"
},
"content": [
{
"type": "column",
"content": [
{
"type": "heading",
"attrs": {
"level": 3
},
"content": [
{
"type": "text",
"text": "What shipping does"
}
]
},
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "A sentence or two on this feature, and one on why it matters."
}
]
}
]
},
{
"type": "column",
"content": [
{
"type": "image",
"attrs": {
"src": "",
"alt": "Shipping, in the product"
}
}
]
}
]
}
]
}
]
}
]
}
]Proof
Logo wall
logo-wall — A row of customer logos under a quiet line.
[
{
"type": "section",
"attrs": {
"key": "logos",
"role": "layout",
"width": "boxed",
"padding": {
"top": 48,
"bottom": 48
}
},
"content": [
{
"type": "logoWall",
"attrs": {
"title": "Trusted by teams at",
"grayscale": true,
"logos": [
{
"src": "",
"alt": "Company one"
},
{
"src": "",
"alt": "Company two"
},
{
"src": "",
"alt": "Company three"
},
{
"src": "",
"alt": "Company four"
}
]
}
}
]
}
]Testimonials wall
testimonials-wall — Three customer quotes with names and roles.
[
{
"type": "section",
"attrs": {
"key": "testimonials",
"role": "layout",
"width": "boxed",
"padding": {
"top": 80,
"bottom": 80
}
},
"content": [
{
"type": "heading",
"attrs": {
"level": 2,
"textAlign": "center"
},
"content": [
{
"type": "text",
"text": "Loved by the people who use it"
}
]
},
{
"type": "testimonials",
"attrs": {
"layout": "grid",
"columns": 3,
"items": [
{
"quote": "What the customer would say about it, in their words — a sentence or two.",
"author": "Customer 1",
"role": "Their role, their company"
},
{
"quote": "What the customer would say about it, in their words — a sentence or two.",
"author": "Customer 2",
"role": "Their role, their company"
},
{
"quote": "What the customer would say about it, in their words — a sentence or two.",
"author": "Customer 3",
"role": "Their role, their company"
}
]
}
}
]
}
]Stats
stats-band — Three or four numbers that make the case.
[
{
"type": "section",
"attrs": {
"key": "stats",
"role": "layout",
"width": "boxed",
"padding": {
"top": 64,
"bottom": 64
}
},
"content": [
{
"type": "stats",
"attrs": {
"layout": "row",
"items": [
{
"value": 10000,
"suffix": "+",
"label": "Customers"
},
{
"value": 99.9,
"decimals": 1,
"suffix": "%",
"label": "Uptime"
},
{
"value": 24,
"suffix": "/7",
"label": "Support"
},
{
"value": 150,
"label": "Countries"
}
]
}
}
]
}
]Pricing
Pricing – 3 tiers
pricing-3 — Three plans with a monthly / yearly toggle.
[
{
"type": "section",
"attrs": {
"key": "pricing",
"role": "layout",
"width": "boxed",
"padding": {
"top": 80,
"bottom": 80
}
},
"content": [
{
"type": "heading",
"attrs": {
"level": 2,
"textAlign": "center"
},
"content": [
{
"type": "text",
"text": "Simple pricing"
}
]
},
{
"type": "paragraph",
"attrs": {
"textAlign": "center"
},
"content": [
{
"type": "text",
"text": "Start free. Upgrade when it pays for itself."
}
]
},
{
"type": "pricing",
"attrs": {
"periods": [
{
"label": "Monthly",
"suffix": "/mo"
},
{
"label": "Yearly",
"suffix": "/yr"
}
],
"currency": "$",
"plans": [
{
"name": "Starter",
"description": "Who this plan is for, in one line.",
"prices": [
0,
0
],
"features": [
{
"text": "One project"
},
{
"text": "Community support"
}
],
"cta": {
"label": "Start free",
"href": "#"
}
},
{
"name": "Pro",
"description": "Who this plan is for, in one line.",
"prices": [
29,
290
],
"features": [
{
"text": "Unlimited projects"
},
{
"text": "Email support"
}
],
"cta": {
"label": "Go Pro",
"href": "#"
},
"highlighted": true,
"badge": "Popular"
},
{
"name": "Enterprise",
"description": "Who this plan is for, in one line.",
"prices": [
99,
990
],
"features": [
{
"text": "SSO and audit log"
},
{
"text": "A named contact"
}
],
"cta": {
"label": "Talk to us",
"href": "#"
}
}
]
}
}
]
}
]Comparison table
comparison — Plans or products side by side, row by row.
[
{
"type": "section",
"attrs": {
"key": "comparison",
"role": "layout",
"width": "boxed",
"padding": {
"top": 80,
"bottom": 80
}
},
"content": [
{
"type": "heading",
"attrs": {
"level": 2,
"textAlign": "center"
},
"content": [
{
"type": "text",
"text": "Compare plans"
}
]
},
{
"type": "table",
"attrs": {
"stickyHeader": true
},
"content": [
{
"type": "tableRow",
"content": [
{
"type": "tableHeader",
"content": [
{
"type": "paragraph"
}
]
},
{
"type": "tableHeader",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Starter"
}
]
}
]
},
{
"type": "tableHeader",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Pro"
}
]
}
]
},
{
"type": "tableHeader",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Enterprise"
}
]
}
]
}
]
},
{
"type": "tableRow",
"content": [
{
"type": "tableCell",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Projects"
}
]
}
]
},
{
"type": "tableCell",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "1"
}
]
}
]
},
{
"type": "tableCell",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Unlimited"
}
]
}
]
},
{
"type": "tableCell",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Unlimited"
}
]
}
]
}
]
},
{
"type": "tableRow",
"content": [
{
"type": "tableCell",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Members"
}
]
}
]
},
{
"type": "tableCell",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "3"
}
]
}
]
},
{
"type": "tableCell",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "25"
}
]
}
]
},
{
"type": "tableCell",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Unlimited"
}
]
}
]
}
]
},
{
"type": "tableRow",
"content": [
{
"type": "tableCell",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Support"
}
]
}
]
},
{
"type": "tableCell",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Community"
}
]
}
]
},
{
"type": "tableCell",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Email"
}
]
}
]
},
{
"type": "tableCell",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "A named contact"
}
]
}
]
}
]
},
{
"type": "tableRow",
"content": [
{
"type": "tableCell",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Single sign-on"
}
]
}
]
},
{
"type": "tableCell",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "—"
}
]
}
]
},
{
"type": "tableCell",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "—"
}
]
}
]
},
{
"type": "tableCell",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Included"
}
]
}
]
}
]
}
]
}
]
}
]FAQ
faq — Common questions, each one opening to its answer.
[
{
"type": "section",
"attrs": {
"key": "faq",
"role": "layout",
"width": "narrow",
"padding": {
"top": 80,
"bottom": 80
}
},
"content": [
{
"type": "heading",
"attrs": {
"level": 2,
"textAlign": "center"
},
"content": [
{
"type": "text",
"text": "Questions, answered"
}
]
},
{
"type": "expandableGroup",
"attrs": {
"style": "row"
},
"content": [
{
"type": "expandable",
"attrs": {
"title": "How does the free plan work?"
},
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "The answer, in a sentence or two. Link to the page with the details."
}
]
}
]
},
{
"type": "expandable",
"attrs": {
"title": "Can I change plans later?"
},
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "The answer, in a sentence or two. Link to the page with the details."
}
]
}
]
},
{
"type": "expandable",
"attrs": {
"title": "Do you offer discounts?"
},
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "The answer, in a sentence or two. Link to the page with the details."
}
]
}
]
},
{
"type": "expandable",
"attrs": {
"title": "How do I cancel?"
},
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "The answer, in a sentence or two. Link to the page with the details."
}
]
}
]
}
]
}
]
}
]Company
Team grid
team-grid — The people behind it: photo, name, role, links.
[
{
"type": "section",
"attrs": {
"key": "team",
"role": "layout",
"width": "boxed",
"padding": {
"top": 80,
"bottom": 80
}
},
"content": [
{
"type": "heading",
"attrs": {
"level": 2,
"textAlign": "center"
},
"content": [
{
"type": "text",
"text": "The team"
}
]
},
{
"type": "paragraph",
"attrs": {
"textAlign": "center"
},
"content": [
{
"type": "text",
"text": "The people who build it and answer your questions."
}
]
},
{
"type": "grid",
"attrs": {
"cols": 12,
"gap": "lg"
},
"content": [
{
"type": "gridItem",
"attrs": {
"colSpan": 3,
"mdSpan": 6,
"smSpan": 12
},
"content": [
{
"type": "person",
"attrs": {
"name": "Team member 1",
"role": "Their role",
"bio": "A line on what they work on.",
"links": [
{
"label": "LinkedIn",
"href": "#"
}
]
}
}
]
},
{
"type": "gridItem",
"attrs": {
"colSpan": 3,
"mdSpan": 6,
"smSpan": 12
},
"content": [
{
"type": "person",
"attrs": {
"name": "Team member 2",
"role": "Their role",
"bio": "A line on what they work on.",
"links": [
{
"label": "LinkedIn",
"href": "#"
}
]
}
}
]
},
{
"type": "gridItem",
"attrs": {
"colSpan": 3,
"mdSpan": 6,
"smSpan": 12
},
"content": [
{
"type": "person",
"attrs": {
"name": "Team member 3",
"role": "Their role",
"bio": "A line on what they work on.",
"links": [
{
"label": "LinkedIn",
"href": "#"
}
]
}
}
]
},
{
"type": "gridItem",
"attrs": {
"colSpan": 3,
"mdSpan": 6,
"smSpan": 12
},
"content": [
{
"type": "person",
"attrs": {
"name": "Team member 4",
"role": "Their role",
"bio": "A line on what they work on.",
"links": [
{
"label": "LinkedIn",
"href": "#"
}
]
}
}
]
}
]
}
]
}
]Timeline
timeline — Milestones in order, a year and a line for each.
[
{
"type": "section",
"attrs": {
"key": "timeline",
"role": "layout",
"width": "narrow",
"padding": {
"top": 80,
"bottom": 80
}
},
"content": [
{
"type": "heading",
"attrs": {
"level": 2,
"textAlign": "center"
},
"content": [
{
"type": "text",
"text": "Our story"
}
]
},
{
"type": "stepper",
"content": [
{
"type": "step",
"attrs": {
"title": "The start"
},
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Where it began, and the problem that started it."
}
]
}
]
},
{
"type": "step",
"attrs": {
"title": "The first release"
},
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "What shipped, and who used it first."
}
]
}
]
},
{
"type": "step",
"attrs": {
"title": "Today"
},
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"text": "Where it is now, and what comes next."
}
]
}
]
}
]
}
]
}
]Latest posts
blog-teaser — The newest posts from a blog, as cards.
[
{
"type": "section",
"attrs": {
"key": "latest",
"role": "layout",
"width": "boxed",
"padding": {
"top": 80,
"bottom": 80
}
},
"content": [
{
"type": "spaceFeed",
"attrs": {
"heading": "From the blog",
"layout": "grid",
"limit": 3,
"moreLink": {
"label": "All posts",
"href": "#"
}
}
}
]
}
]Conversion
Call to action
cta-band — A painted band: one line, one sentence, the button that does it.
[
{
"type": "section",
"attrs": {
"key": "cta",
"role": "layout",
"width": "boxed",
"padding": {
"top": 72,
"bottom": 72,
"x": 32
},
"contentAlign": "center",
"radius": "lg",
"background": {
"color": "brand"
},
"scheme": "dark"
},
"content": [
{
"type": "heading",
"attrs": {
"level": 2,
"textAlign": "center"
},
"content": [
{
"type": "text",
"text": "Ready when you are"
}
]
},
{
"type": "paragraph",
"attrs": {
"textAlign": "center"
},
"content": [
{
"type": "text",
"text": "Say what happens next in one sentence."
}
]
},
{
"type": "buttons",
"attrs": {
"align": "center"
},
"content": [
{
"type": "button",
"attrs": {
"label": "Get started",
"href": "#",
"style": "primary"
}
},
{
"type": "button",
"attrs": {
"label": "Talk to us",
"href": "#",
"style": "secondary"
}
}
]
}
]
}
]Newsletter
newsletter — An email box and a line on what subscribers get.
[
{
"type": "section",
"attrs": {
"key": "newsletter",
"role": "layout",
"width": "narrow",
"padding": {
"top": 80,
"bottom": 80
},
"contentAlign": "center"
},
"content": [
{
"type": "heading",
"attrs": {
"level": 2,
"textAlign": "center"
},
"content": [
{
"type": "text",
"text": "Get the newsletter"
}
]
},
{
"type": "paragraph",
"attrs": {
"textAlign": "center"
},
"content": [
{
"type": "text",
"text": "One email a month. What shipped, and what is next."
}
]
},
{
"type": "form",
"attrs": {
"formId": "",
"layout": "inline",
"submitLabel": "Subscribe",
"successMessage": "Thanks — check your inbox to confirm.",
"fields": [
{
"name": "email",
"type": "email",
"label": "Email",
"placeholder": "you@example.com",
"required": true
}
]
}
}
]
}
]The Forumulate teamUpdated