Components & Aliases
Micropage markup has a small set of components, with a few aliases for flexibility and readability. This page lists the canonical syntax and all supported aliases.
Use the canonical forms in new markup, but all aliases shown here are supported and not deprecated.
Structure & headings
| Purpose | Canonical | Aliases | Notes |
|---|---|---|---|
| Section | /// section | /// hero, /// container, /// html | Section type is the first line after ///. |
| Section modifiers | /// section bg:primary | align:center, text:light, center | Space-separated key:value tokens after the section type. bg: and text: apply to section, container, and hero. align: applies to section and container. See Site Colors & Section Modifiers. |
| Heading 1 | h1: | h: | h: is an explicit alias for h1:. |
| Heading 2–6 | h2:–h6: | – | Standard heading levels. |
| Paragraph | p: | bare text | If no prefix is present, a line is treated as a paragraph. |
Media
| Element | Canonical | Aliases | Notes |
|---|---|---|---|
| Image | img: | image: | Used with <- for keyword, filename, or URL. |
| Icon | icon: | – | Bootstrap Icons class list (e.g. bi bi-heart). Optional size:sm or size:lg. Optional text:<token> for Bootstrap text utilities: primary, secondary, success, warning, info, danger, muted, light, dark, body-secondary (e.g. icon: text:primary bi bi-gap). Modifiers may appear in any order before <- if using an icon link. |
| Media object | media: | – | Flex layout: figure left, body center, optional action right. See Media Object. |
Image references
Use <- with img: or image::
- Keyword (Unsplash search):
img: <- coffee - Filename (project file):
img: <- hero.png - Direct URL:
img: <- https://example.com/screenshot.png
Site logo and favicon inside [site] can use shorthands:
logo: logo.png(equivalent toimg: <- logo.png)favicon: favicon.png(equivalent toimg: <- favicon.png)
Image links
You can combine image lookup and a click-through URL:
img: Hero <- hero.png -> /pricing
This resolves the image using <- hero.png and treats /pricing as the link target for that image.
Navigation & links
| Element | Canonical | Aliases | Notes |
|---|---|---|---|
| Page link | Text -> /path | link: Text -> /path, a: Text -> /path | All forms produce a link element. |
| Nav bar CTA (button style) | Same prefixes as Buttons (e.g. btn:, btn-outline-primary:) | – | Inside [nav], these lines still produce link JSON with a variant so the preview renders Bootstrap btn styles. Indented dropdown children may use the same prefixes. |
| Nav dropdown | Indented child links under [nav] | – | 2 spaces or 1 tab indent makes a link a dropdown child. See Nav Dropdowns. |
| Vertical nav list | nav-list: | – | In-section vertical link list. Child items use bare links or nav-item: alias. See Nav Containers. |
| Horizontal nav bar | nav-bar: | – | Horizontal pill-style link bar. See Nav Containers. |
| Tab-styled nav | nav-tabs: | – | Horizontal tab styling (no JS). See Nav Containers. |
Forms
Form fields are nested under a form: block.
form: Contact
input: Name*
textarea: Message
submit: Send
Form container
| Purpose | Canonical | Aliases | Notes |
|---|---|---|---|
| Form | form: | – | Starts a form; fields that follow are nested inside. |
Field elements
| Field type | Canonical | Aliases | Notes |
|---|---|---|---|
| Text input | input: | textfield: | Single-line text. |
| Text area | textarea: | text: | Multi-line text. |
| Select | select: | – | select: Label [one, two] |
| Checkboxes | checkboxes: | multichoice:, multi-choice: | Multiple choice; all aliases are fully supported. |
| Radios | radios: | choice:, singlechoice:, single-choice: | Single choice; all aliases are fully supported. |
| Submit | submit: | save: | Both create a submit button. |
Fields ending in * are required in all forms and aliases.
Buttons
Buttons are links with variants (sizes/styles) controlled by the prefix.
button: Get Started -> /signup
btn-secondary: Learn more -> /features
Button prefixes and variants
| Prefix | Variant | Typical use |
|---|---|---|
button: | primary | Main call to action. |
btn: | primary | Shorthand for primary buttons. |
btn-secondary: | secondary | Secondary actions. |
btn-info: | info | Informational actions. |
btn-warning: | warning | Destructive or cautionary actions. |
btn-danger: | danger | Strongly destructive actions. |
btn-outline-primary: | outline-primary | Outlined primary emphasis. |
btn-outline-secondary: | outline-secondary | Outlined secondary. |
btn-outline-success: | outline-success | Outlined success tone. |
btn-outline-info: | outline-info | Outlined info tone. |
btn-outline-warning: | outline-warning | Outlined warning tone. |
btn-outline-danger: | outline-danger | Outlined danger tone. |
btn-outline: | outline-secondary | Generic outline (maps to Bootstrap outline-secondary; there is no bare btn-outline class). |
All prefixes above work in section body and in [nav]. Choose the variant that best matches the importance of the action.
HTML & small text
| Element | Canonical | Aliases | Notes |
|---|---|---|---|
| Raw HTML section | /// html | – | Section type html returns raw HTML. |
| Inline HTML | html: | – | Inline HTML element inside a section. |
| Small text | small: | – | Small-print or helper text. |
Inline html:
The line with html: must begin with that token—no leading spaces or tabs. The parser matches html: only at the start of the line, so an indented line like html: <div>… is not recognized as inline HTML (unlike p:, h1:, and other elements under col:, which are parsed from the stripped line). Keep html: flush left, including inside column blocks. See Hero With YouTube Embed for an embed example with //// column and col:.