Style guide

Internal reference for help article formatting.

Headlines

Title from frontmatter renders as h1. Use h2-h4 in content:

Page Title

Section heading

Subsection

Detail

---
title: Page Title
---

## Section heading
### Subsection
#### Detail

Text

Regular paragraph text. Use bold for UI elements like Save or Admin → Settings. Use “quotes” for emphasis. Avoid italics.

Links are underlined automatically.

Inline code for filenames or technical terms.

Use **bold** for UI elements.
Use "quotes" for emphasis.
[Link text](/url)
`code` for technical terms.

Lists

• First item
• Second item
• Third item

- First item
- Second item
- Third item

1. First step
2. Second step
3. Third step

1. First step
2. Second step
3. Third step

Code

Inline code for filenames, paths, or technical terms.

Use `filename.png` or `/api/endpoint` inline.

Code blocks for multi-line examples:

<account>
  <subdomain>demo</subdomain>
</account>

```xml
<account>
  <subdomain>demo</subdomain>
</account>
```

Tables

| Column A | Column B |
|----------|----------|
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
| Cell 5 | Cell 6 |

Images

Caption text appears below

Images are hosted on R2. Use wsrv filter. Natural size is default. Pass w: option to specify width:

![Screenshot]({{ 'screenshot.png' | wsrv }})

Caption text
{: .caption}

![Scaled to 800px]({{ 'screenshot.png' | wsrv: w:800 }})

External images work too (full URL):

![External]({{ 'https://example.com/image.png' | wsrv }})

Keyboard

Press Space to preview. Use G and L to switch views.

Press <kbd>Space</kbd> to preview.

Shortcut block

• Space … Preview
• G … Grid view
• L … List view

- <kbd>Space</kbd> … Preview
- <kbd>G</kbd> … Grid view
{: .shortcuts}

Blockquotes

This is a quote with attribution. — Author Name

> This is a quote with attribution. — Author Name

Note: Keep quote and attribution on the same line to avoid multiple bubbles.

Callouts

Helpful tip.

Additional context.

Caution — cannot be undone.

You need Manage tags permission.

> Helpful tip.
{: .tip}

Fluxiom UI Elements

Use these to represent Fluxiom interface elements in documentation. Not for general styling.

Tags

Show Fluxiom tags as they appear in the app:

<tag>Draft</tag>
<tag class="teal">Approved</tag>
<tag class="auto">Images</tag>
<tag class="ai">Mountain</tag>

API method tags

Color-coded tags for HTTP methods in API documentation:

<tag class="green">GET</tag>
<tag class="blue">POST</tag>
<tag class="amber">PUT</tag>
<tag class="red">DELETE</tag>

Version badge

Show version count as it appears in the app:

<badge>3</badge>