Alpha: Ships on npm at 7.0.0-alpha.07.0.0-alpha.0
pricing
One to four plans under a section head, one of them featured.
Carried by the api-product and directory-product Templates. Seen on pages/harbor/pricing.json, section 1.
Variant
{
"kind": "section",
"shell": {
"inset": "contained",
"density": "section"
},
"block": {
"type": "pricing",
"head": {
"eyebrow": "Plans",
"title": "Priced by the call."
},
"layout": "ruled",
"tiers": [
{
"name": "Deck",
"price": "$0",
"note": "a month",
"features": [
"1,000 calls a month",
"Every berth",
"Fourteen days ahead"
],
"cta": "Start free",
"href": "/contact"
},
{
"name": "Bridge",
"price": "$49",
"note": "a month",
"features": [
"50,000 calls a month",
"Draft windows",
"Webhook alerts"
],
"cta": "Choose Bridge",
"href": "/contact",
"featured": true
},
{
"name": "Harbor",
"price": "$490",
"note": "a month",
"features": [
"1,000,000 calls a month",
"Every Bridge feature",
"A named harbor master"
],
"cta": "Talk to the harbor",
"href": "/contact"
}
],
"featuredBadge": "Most chosen"
}
}
{
"title": "pricing",
"type": "object",
"properties": {
"type": {
"type": "string",
"const": "pricing"
},
"head": {
"type": "object",
"properties": {
"eyebrow": {
"type": "string",
"minLength": 1,
"maxLength": 28
},
"title": {
"type": "string",
"minLength": 1,
"maxLength": 72
},
"lede": {
"type": "string",
"minLength": 1,
"maxLength": 300
},
"max": {
"type": "string",
"pattern": "^(none|\\d+(\\.\\d+)?(em|ch|px))$"
},
"ledeMax": {
"type": "string",
"pattern": "^(none|\\d+(\\.\\d+)?(em|ch|px))$"
},
"balance": {
"type": "boolean"
},
"scale": {
"type": "string",
"enum": [
"compact",
"large"
]
},
"tag": {
"type": "string",
"minLength": 1,
"maxLength": 8
},
"layout": {
"type": "string",
"enum": [
"split"
]
}
},
"required": [
"eyebrow"
],
"additionalProperties": false
},
"layout": {
"type": "string",
"enum": [
"ruled",
"cards"
]
},
"tiers": {
"minItems": 1,
"maxItems": 4,
"type": "array",
"items": {
"type": "object",
"properties": {
"name": {
"type": "string",
"minLength": 1,
"maxLength": 16
},
"price": {
"type": "string",
"minLength": 1,
"maxLength": 16
},
"note": {
"type": "string",
"minLength": 1,
"maxLength": 24
},
"desc": {
"type": "string",
"minLength": 1,
"maxLength": 80
},
"features": {
"minItems": 1,
"maxItems": 10,
"type": "array",
"items": {
"type": "string",
"minLength": 1,
"maxLength": 56
}
},
"cta": {
"type": "string",
"minLength": 1,
"maxLength": 40
},
"href": {
"type": "string",
"minLength": 1,
"maxLength": 160
},
"featured": {
"type": "boolean"
}
},
"required": [
"name",
"price",
"features",
"cta",
"href"
],
"additionalProperties": false
}
},
"featuredBadge": {
"type": "string",
"minLength": 1,
"maxLength": 16
},
"note": {
"type": "string",
"minLength": 1,
"maxLength": 120
}
},
"required": [
"type",
"head",
"layout",
"tiers",
"featuredBadge"
],
"additionalProperties": false
}{
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "pricing",
"head": { "eyebrow": "Plans", "title": "Priced by the call." },
"layout": "ruled",
"tiers": [
{
"name": "Deck",
"price": "$0",
"note": "a month",
"features": ["1,000 calls a month", "Every berth", "Fourteen days ahead"],
"cta": "Start free",
"href": "/contact"
},
{
"name": "Bridge",
"price": "$49",
"note": "a month",
"features": ["50,000 calls a month", "Draft windows", "Webhook alerts"],
"cta": "Choose Bridge",
"href": "/contact",
"featured": true
},
{
"name": "Harbor",
"price": "$490",
"note": "a month",
"features": ["1,000,000 calls a month", "Every Bridge feature", "A named harbor master"],
"cta": "Talk to the harbor",
"href": "/contact"
}
],
"featuredBadge": "Most chosen"
}
}Smallest that parses
{
"type": "pricing",
"head": { "eyebrow": "Plans", "title": "Priced by the call." },
"layout": "ruled",
"tiers": [
{
"name": "Deck",
"price": "$0",
"features": ["1,000 calls a month"],
"cta": "Start free",
"href": "/contact"
}
],
"featuredBadge": "Most chosen"
}Props
From @mdxui/site@7.0.0-alpha.0. A count reads as min–max × item; a string bound is its maximum length in characters, and links its refusal.
| Prop | Type and bound | Required |
|---|---|---|
head | object | yes |
head.eyebrow | string ≤28 | yes |
head.title | string ≤72 | no |
head.lede | string ≤300 | no |
head.max | string (pattern) | no |
head.ledeMax | string (pattern) | no |
head.balance | boolean | no |
head.scale | "compact" | "large" | no |
head.tag | string ≤8 | no |
head.layout | "split" | no |
layout | "ruled" | "cards" | yes |
tiers | 1–4 × object | yes |
tiers[].name | string ≤16 | yes |
tiers[].price | string ≤16 | yes |
tiers[].note | string ≤24 | no |
tiers[].desc | string ≤80 | no |
tiers[].features | 1–10 × string ≤56 | yes |
tiers[].cta | string ≤40 | yes |
tiers[].href | string ≤160 | yes |
tiers[].featured | boolean | no |
featuredBadge | string ≤16 | yes |
note | string ≤120 | no |
Use instead
plan-table: plans compared fact by fact