Formatting & Components

A quick reference for content editors that covers the formats actually used across the docs. Each section shows the syntax first (in a code box), then the rendered result. Just copy the pattern.

---

Heading levels

Headings come in four levels, largest to smallest:

# Page title H1
## Section heading H2
### Subheading H3
#### Smaller heading H4

Rules:

• H1 (#) goes once at the very top as the page title; don’t use it again in the body.
• H2 (##) is a section heading — it gets an automatic underline and shows up in the right-hand table of contents.
• H3 / H4 are subheadings, slightly heavier than body text, for grouping sub-sections (e.g. step groups, sub-topics).

Rendered:

This is a subheading H3

This is a smaller heading H4

Every H2 / H3 gets an automatic anchor, so you can link to it with #heading-text (see “Links” below).

---

Body text & emphasis

Body text is thin grey. To emphasize, wrap text in **...** — it turns a brighter white (colour only, not bold; bold is reserved for headings).

This is body text; wrap **the words you want to stress** in double asterisks to brighten them.
You can also use `inline code`, e.g. a command or a setting name.

Rendered:

This is body text; wrap the words you want to stress in double asterisks to brighten them. You can also use inline code, e.g. a command or a setting name.

---

Step pattern

Each step starts with “bold numbered heading — explanation”, optionally followed by a command or screenshot. This is the most common pattern in our how-to guides.

**1. Open the terminal** — on OC-1, click the action buttons, then Terminal.

**2. Run the command** — send the line below.

```bash
openclaw models list --provider openai
```

Rendered:

1. Open the terminal — on OC-1, click the action buttons, then Terminal.

2. Run the command — send the line below.

openclaw models list --provider openai

---

Links (two kinds, styled differently)

In-page scroll anchor links are upright; links that jump to another page or an external site are italic, so readers can tell them apart at a glance.

Same-page scroll (anchor): [Back to top](#formatting--components)
Cross-page / external: [Set up the LLM](/en/quick-start/llm)

Rendered:

• Same-page scroll (upright): Back to top
• Cross-page / external (italic): Set up the LLM

To build a “click to scroll to a section on this page” list, write the link as [text](#that-heading).

---

Callouts

Only these 4 are supported. Start with :::type, end with :::.

:::info
General notes or extra context.
:::

:::success
Success / recommended approach.
:::

:::warning
Be careful — easy to get wrong.
:::

:::danger
High-risk, secret, or irreversible action.
:::

Rendered:

---

Lists

- Item one
- Item two
  - Sub-item

1. Step one
2. Step two

Rendered:

• Item one
• Item two
  • Sub-item

1. Step one
2. Step two

---

Code blocks

Start with ```language for automatic syntax highlighting; a Copy button appears top-right.

```bash
ssh -i ~/.ssh/key -p 18022 root@1.2.3.4
```

Rendered:

ssh -i ~/.ssh/key -p 18022 root@1.2.3.4

---

Blockquote / note

Start with >. We often use it for small notes, or to mark ”🎬 video coming / 📷 screenshot coming” placeholders.

> A note, for extra context.

Rendered:

A note, for extra context.

---

Tables

| Field | Description |
|-------|-------------|
| A | First column |
| B | Second column |

Rendered (scrolls horizontally on mobile):

---

Divider

Put three or more - (or - - -) on their own line to draw a section divider.

- - -

Rendered:

---

Images

Just drag-and-drop in the editor; it generates this automatically:

![Alt text](/images/uploads/your-image.png)

Images render full-width with rounded borders. Prefer English filenames (e.g. openclaw-codex-01.png). If a screenshot contains secrets (token, email, IP), blur it before uploading.

---

Video (VideoEmbed component)

Paste a YouTube / Vimeo video ID:

<VideoEmbed id="aqz-KE-bpKQ" title="Sample video" />

Rendered (a 16

playable player):

---

UI label (UI component)

Mark an on-screen button / tab name; it renders in bright white:

Click <UI>Dashboard</UI> to open the backend.

Rendered:

Click Dashboard to open the backend.