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. Everything after p: is literal text, so use p: for a line that would otherwise be read as another element (e.g. one starting with - ). |
Lists & tables
| Element | Canonical | Aliases | Notes |
|---|---|---|---|
| Unordered list | - item | – | One item per line. |
| Ordered list | 1. item | – | Any number followed by . ; the list starts at the first item's number (3. starts at 3). |
| Table | | A | B | rows | – | Optional table: Caption line directly before the rows. |
Lists
- Unlimited pages
- Built-in forms
- Custom domain
1. Write the page
2. Publish
Consecutive item lines form one list. A blank line, or switching between - and 1., starts a new list. Lists don't nest, and items are plain text. Lists work in sections, columns, and the footer. Inside a form, put lists before form: or after the last field: a list between fields ends the form's fields.
A paragraph that begins with - or with something like 2024. would be read as a list item; write it with p: instead (p: - text, p: 2024. A good year).
Tables
table: Plans
| Plan | Price | Projects |
|------|-------|----------|
| Free | $0 | 1 |
| Pro | $6/mo | 5 |
- The optional
table: Captionline, directly before the rows, becomes a visible caption. - The first row is the header. The
|---|separator row is optional and ignored. - Cells are plain text. Write
\|for a literal pipe inside a cell. - Rows with fewer cells than the header are padded.
- Keep a table's rows together: a blank line ends the table, and the next rows start a new one with their own header.
- On small screens the table scrolls sideways.
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)
To serve a different logo in dark mode, set logo: inside [site.dark]. See Dark-mode logo.
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. |
| Success message | success: | – | Confirmation text shown after a successful submission. Optional; trimmed and capped at 300 characters. Defaults to Thank you. Your message was sent. (Thank you. You're subscribed. on a newsletter form). See Success message. |
| Newsletter copy | newsletter: | – | true or false. Selects the newsletter confirmation copy and hides the Submit again button. Copy only — it does not enable or disable subscriber capture. See Newsletter copy in markup. |
success: and newsletter: attach to the form they follow and may appear anywhere in its field run; the convention is after submit:.
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. The marker renders as a red asterisk after the label, and a form with at least one required field renders a * indicates a required field key above its fields.
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. |
Bootstrap classes in raw HTML
Published sites only ship the Bootstrap CSS their pages use: at publish, every rule whose classes don't appear anywhere in the site's HTML is dropped. Classes you write in /// html or html: are kept automatically. A class that only your own script adds at runtime (for example element.classList.add('alert-warning')) gets trimmed unless it also appears somewhere in the page source. The editor preview loads the full stylesheet, so a page like that can look right in preview and lose its styling once published. Classes added by Bootstrap's own JavaScript (show, fade, modal-backdrop, and similar) are always kept.
Inline html:
html: can be indented, for example under col:. Inline HTML can span several lines: it continues until a blank line, a /// section or col: marker, a line that starts with an element tag (p:, h2:, button: …), a list item (- , 1. ) or a table row (|), or a line containing a link or image arrow (->, <-). Colons and URLs elsewhere in a line are fine. For HTML that needs blank lines or lines starting like an element (for example a <style> block with a:hover), use a /// html section instead. See Hero With YouTube Embed for an embed example with //// column and col:.