This page shows how to use our custom styling in the wiki:
hb-note)hb-block)Everything on this page is both an example and a recipe you can copy.
If you don’t wrap anything in .hb-page, the page is a normal
single-column layout with the "book" styling.
You don’t need any special HTML for this – just write normal Markdown:
## A Simple Single-Column Section
This section uses the default layout.
It’s good for wide content like character sheets or big images.
- Normal headings
- Normal lists
- Normal paragraphs
This section uses the default layout.
It’s good for wide content like character sheets or big images.
hb-page)To get the PHB-style two-column layout, wrap your content in:
<div class="hb-page">
## My Two-Column Section
Content in here will flow into two columns, like a printed book.
</div>
Long ago, when the empires of men still stretched across the world, the city of Talaris was a jewel of learning and trade. Now it lies broken beneath choking ivy and patient sand, its towers leaning like the teeth of some ancient beast.
This paragraph is mostly here so you can see the first-line indent in action when paragraphs follow one another. Notice how the lines flow like a block of book text rather than a web article.
Talaris lies…
The area is known for:
"The city is not dead,"
whispers an old caravan guard.
"It’s listening."
Tables written in normal Markdown automatically get the styled, zebra-striped look.
How to write it:
## Example Table – Rumors in the Tavern
| d6 | Rumor | Truth? |
|----|-----------------------------------------------|--------------------------------|
| 1 | A dragon sleeps in the highest tower. | Half-true. Wyvern, not dragon.|
| 2 | The ruins shift every full moon. | False, but people get lost. |
| 3 | Drinking from the old fountains grants visions.| True, but the visions are hostile. |
Rendered example:
| d6 | Rumor | Truth? |
|---|---|---|
| 1 | A dragon sleeps in the highest tower. | Half-true. Wyvern, not dragon. |
| 2 | The ruins shift their layout every full moon. | False, but people get lost easily. |
| 3 | Drinking from the old fountains grants visions. | True, but visions are not friendly. |
| 4 | The Ashen Choir sacrifices travelers at dusk. | True. They prefer lonely pilgrims. |
| 5 | No birds ever fly over the city. | True, and nobody knows why. |
| 6 | The Wardens store their pay in a hidden vault. | Mostly false; they’re famously poor. |
There’s no special class required for a simple statblock – headings, italics,
and a table are enough.
How to write it:
### Glass-Eyed Stalker
*Medium aberration, chaotic evil*
**Armor Class** 15 (natural armor)
**Hit Points** 78 (12d8 + 24)
**Speed** 40 ft., climb 20 ft.
| STR | DEX | CON | INT | WIS | CHA |
|:---:|:---:|:---:|:---:|:---:|:---:|
| 16 (+3) | 18 (+4) | 14 (+2) | 10 (+0) | 12 (+1) | 6 (-2) |
**Skills** Stealth +8, Perception +4
**Senses** darkvision 60 ft., passive Perception 14
**Languages** understands Deep Speech but can’t speak
**Challenge** 5 (1,800 XP)
Rendered example:
Medium aberration, chaotic evil
Armor Class 15 (natural armor)
Hit Points 78 (12d8 + 24)
Speed 40 ft., climb 20 ft.
| STR | DEX | CON | INT | WIS | CHA |
|---|---|---|---|---|---|
| 16 (+3) | 18 (+4) | 14 (+2) | 10 (+0) | 12 (+1) | 6 (-2) |
Skills Stealth +8, Perception +4
Senses darkvision 60 ft., passive Perception 14
Languages understands Deep Speech but can’t speak
Challenge 5 (1,800 XP)
Shadow Pounce. The stalker can move through a creature’s space and does not provoke opportunity attacks when moving in dim light or darkness.
Many-Gazed. Creatures that start their turn within 10 feet of the stalker must succeed on a DC 14 Wisdom saving throw or become frightened until the start of their next turn.
hb-note)Use hb-note for important sidebars, warnings, or tips.
Markdown (bold, italics, lists) works inside, but headings/tables can look odd,
so keep it to paragraph/text content.
How to write it:
<div class="hb-note">
<p class="hb-note-title">Some Note</p>
In here you can write *Markdown* such as **bold text**, lists, etc.
- Bullet one
- Bullet two
</div>
Rendered example:
Some Note
In here you can write Markdown such as bold text, lists, etc.
hb-block)Use hb-block for short inline callouts – a tinted background strip that
sits in the flow of text.
How to write it:
Some text before the block.
<div class="hb-block">
This block uses the `hb-block` class with a tinted background.
Markdown like _italics_ and **bold** works fine here.
</div>
Some text after the block.
Rendered example:
Some text before the block.
Markdown like italics and bold works fine here.
Some text after the block.
Code blocks work like normal Markdown triple-backtick blocks and get the
"parchment" styling around them.
How to write it:
```js
// Example snippet, just to see code formatting
function randomRumor(d6) {
const rumors = [
"A dragon sleeps in the highest tower.",
"The ruins shift every full moon.",
"The fountains grant dangerous visions.",
"The Ashen Choir sacrifices travelers.",
"No birds fly over the city.",
"The Wardens hoard a secret treasure."
];
return rumors[(d6 - 1) % rumors.length];
}
Rendered example:
// Example snippet, just to see code formatting
function randomRumor(d6) {
const rumors = [
"A dragon sleeps in the highest tower.",
"The ruins shift every full moon.",
"The fountains grant dangerous visions.",
"The Ashen Choir sacrifices travelers.",
"No birds fly over the city.",
"The Wardens hoard a secret treasure."
];
return rumors[(d6 - 1) % rumors.length];
}