Alpha: Ships on npm at 7.0.0-alpha.07.0.0-alpha.0
feature-split
Copy with exactly three features beside one preview window.
Carried by the api-product Template. Seen on pages/harbor/home.json, section 6.
{
"kind": "section",
"shell": {
"inset": "contained",
"density": "section"
},
"block": {
"type": "feature-split",
"head": {
"eyebrow": "For the bridge",
"title": "Plan the passage, not the math."
},
"items": [
{
"icon": "clock",
"title": "Windows, not tables",
"text": "Ask for a draft and get the hours it clears."
},
{
"icon": "bell",
"title": "Alerts before the turn",
"text": "A webhook fires an hour before a window closes."
},
{
"icon": "shield-check",
"title": "One source per berth",
"text": "Each answer names its station and its datum."
}
],
"specimen": {
"blocks": [
{
"type": "terminal",
"variant": "plain",
"title": "A 3.2 m draft at pier 4",
"lang": "json",
"lines": [
"{",
" \"draft\": 3.2,",
" \"opens\": \"08:05\",",
" \"closes\": \"12:50\"",
"}"
]
}
]
}
}
}
{
"title": "feature-split",
"type": "object",
"properties": {
"type": {
"type": "string",
"const": "feature-split"
},
"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
},
"bases": {
"type": "array",
"prefixItems": [
{
"type": "integer",
"minimum": 240,
"maximum": 640
},
{
"type": "integer",
"minimum": 240,
"maximum": 640
}
],
"items": false,
"minItems": 2,
"maxItems": 2
},
"items": {
"minItems": 3,
"maxItems": 3,
"type": "array",
"items": {
"type": "object",
"properties": {
"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"
]
},
"index": {
"type": "string",
"minLength": 1,
"maxLength": 2
},
"title": {
"type": "string",
"minLength": 1,
"maxLength": 28
},
"text": {
"type": "string",
"minLength": 1,
"maxLength": 96
},
"bullets": {
"maxItems": 4,
"type": "array",
"items": {
"type": "string",
"minLength": 1,
"maxLength": 48
}
}
},
"required": [
"title",
"text"
],
"additionalProperties": false
}
},
"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",
"head",
"items",
"specimen"
],
"additionalProperties": false
}{
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "feature-split",
"head": { "eyebrow": "For the bridge", "title": "Plan the passage, not the math." },
"items": [
{ "icon": "clock", "title": "Windows, not tables", "text": "Ask for a draft and get the hours it clears." },
{ "icon": "bell", "title": "Alerts before the turn", "text": "A webhook fires an hour before a window closes." },
{ "icon": "shield-check", "title": "One source per berth", "text": "Each answer names its station and its datum." }
],
"specimen": {
"blocks": [
{
"type": "terminal",
"variant": "plain",
"title": "A 3.2 m draft at pier 4",
"lang": "json",
"lines": ["{", " \"draft\": 3.2,", " \"opens\": \"08:05\",", " \"closes\": \"12:50\"", "}"]
}
]
}
}
}Smallest that parses
{
"type": "feature-split",
"head": { "eyebrow": "For the bridge", "title": "Plan the passage, not the math." },
"items": [
{ "title": "Windows, not tables", "text": "Ask for a draft and get the hours it clears." },
{ "title": "Alerts before the turn", "text": "A webhook fires an hour before a window closes." },
{ "title": "One source per berth", "text": "Each answer names its station and its datum." }
],
"specimen": {
"blocks": [
{
"type": "terminal",
"variant": "plain",
"title": "A 3.2 m draft at pier 4",
"lines": ["{"]
}
]
}
}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 |
bases | [integer 240–640, integer 240–640] | no |
items | 3 × object | yes |
items[].icon | icon or mark name (52) | no |
items[].index | string ≤2 | no |
items[].title | string ≤28 | yes |
items[].text | string ≤96 | yes |
items[].bullets | 0–4 × string ≤48 | no |
specimen | object | yes |
specimen.panel | "none" | "field" | no |
specimen.blocks | 1–3 × Section type (nested) | yes |
Use instead
feature-grid: more or fewer than three features