Alpha: Ships on npm at 7.0.0-alpha.07.0.0-alpha.0
hero
The opening of a page: headline, lede, actions, fine print and an optional preview window.
Carried by the api-product Template. Seen on pages/harbor/home.json, section 1.
Variant
{
"kind": "hero",
"shell": {
"inset": "contained",
"density": "hero"
},
"block": {
"type": "hero",
"layout": "centered",
"stack": 560,
"title": "Every berth, every tide.",
"lede": "One call returns the tide table for any berth in the harbor: the times, the heights and the window your keel clears.",
"actions": [
{
"href": "/pricing",
"label": "See the plans",
"kind": "solid"
},
{
"href": "/contact",
"label": "Talk to the harbor",
"kind": "ghost"
}
],
"fine": [
"1,000 calls a month free",
"Heights to the chart datum"
]
}
}
{
"title": "hero",
"type": "object",
"properties": {
"type": {
"type": "string",
"const": "hero"
},
"layout": {
"type": "string",
"enum": [
"centered",
"split"
]
},
"stack": {
"anyOf": [
{
"type": "number",
"const": 560
},
{
"type": "number",
"const": 640
}
]
},
"kicker": {
"type": "object",
"properties": {
"kind": {
"type": "string",
"const": "eyebrow"
},
"text": {
"type": "string",
"minLength": 1,
"maxLength": 40
}
},
"required": [
"kind",
"text"
],
"additionalProperties": false
},
"title": {
"type": "string",
"minLength": 1,
"maxLength": 64
},
"lede": {
"type": "string",
"minLength": 1,
"maxLength": 260
},
"actions": {
"maxItems": 2,
"type": "array",
"items": {
"type": "object",
"properties": {
"href": {
"type": "string",
"minLength": 1,
"maxLength": 160
},
"label": {
"type": "string",
"minLength": 1,
"maxLength": 24
},
"kind": {
"type": "string",
"enum": [
"solid",
"ghost"
]
},
"icon": {
"type": "string",
"enum": [
"activity",
"anchor",
"arrow-right",
"arrow-up-right",
"badge-check",
"bell",
"blocks",
"bot",
"check",
"chevron-down",
"chevron-left",
"chevron-right",
"clock",
"code",
"compass",
"copy",
"credit-card",
"database",
"file-code-2",
"file-text",
"files",
"film",
"fingerprint",
"gauge",
"git-commit-horizontal",
"globe",
"history",
"key-round",
"landmark",
"layers",
"layout-grid",
"library",
"link",
"list",
"map-pin",
"menu",
"message-square",
"mic",
"plug",
"radar",
"refresh-cw",
"search",
"shield-check",
"ship",
"shopping-cart",
"sliders-horizontal",
"sparkles",
"terminal",
"ticket",
"waves",
"webhook",
"x"
]
},
"external": {
"type": "boolean"
}
},
"required": [
"href",
"label",
"kind"
],
"additionalProperties": false
}
},
"command": {
"type": "object",
"properties": {
"command": {
"type": "string",
"minLength": 1,
"maxLength": 40
},
"note": {
"type": "string",
"minLength": 1,
"maxLength": 48
}
},
"required": [
"command"
],
"additionalProperties": false
},
"fine": {
"maxItems": 4,
"type": "array",
"items": {
"type": "string",
"minLength": 1,
"maxLength": 72
}
},
"specimen": {
"type": "object",
"properties": {
"panel": {
"type": "string",
"enum": [
"none",
"field"
]
},
"blocks": {
"minItems": 1,
"maxItems": 3,
"type": "array",
"items": {
"$ref": "#"
}
}
},
"required": [
"blocks"
],
"additionalProperties": false
}
},
"required": [
"type",
"layout",
"stack",
"title",
"lede",
"actions",
"fine"
],
"additionalProperties": false
}{
"kind": "hero",
"shell": { "inset": "contained", "density": "hero" },
"block": {
"type": "hero",
"layout": "centered",
"stack": 560,
"title": "Every berth, every tide.",
"lede": "One call returns the tide table for any berth in the harbor: the times, the heights and the window your keel clears.",
"actions": [
{ "href": "/pricing", "label": "See the plans", "kind": "solid" },
{ "href": "/contact", "label": "Talk to the harbor", "kind": "ghost" }
],
"fine": ["1,000 calls a month free", "Heights to the chart datum"]
}
}Smallest that parses
{
"type": "hero",
"layout": "centered",
"stack": 560,
"title": "Every berth, every tide.",
"lede": "One call returns the tide table for any berth in the harbor: the times, the heights and the window your keel clears.",
"actions": [],
"fine": []
}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 |
|---|---|---|
layout | "centered" | "split" | yes |
stack | 560 | 640 | yes |
kicker | object | no |
kicker.kind | "eyebrow" | yes |
kicker.text | string ≤40 | yes |
title | string ≤64 | yes |
lede | string ≤260 | yes |
actions | 0–2 × object | yes |
actions[].href | string ≤160 | yes |
actions[].label | string ≤24 | yes |
actions[].kind | "solid" | "ghost" | yes |
actions[].icon | icon or mark name (52) | no |
actions[].external | boolean | no |
command | object | no |
command.command | string ≤40 | yes |
command.note | string ≤48 | no |
fine | 0–4 × string ≤72 | yes |
specimen | object | no |
specimen.panel | "none" | "field" | no |
specimen.blocks | 1–3 × Section type (nested) | yes |
Use instead
page-head: a plain heading with no actionsproduct-head: a product in a directory