Headings

Markup

You can add headings to your homebrew document using the # symbol in the Brew Editor:

# Here is my heading

Et labore pariatur sunt ad ad pariatur magna. Duis sit velit commodo. Laborum esse aliqua dolor. Dolor nulla Lorem proident fugiat est qui do officia officia ullamco irure anim ad. Consequat nisi officia pariatur occaecat laboris do.

When you are writing at length, you’ll likely want to have different levels of headings to give your brew some hierarchical structure– first you’ll have a top-level header (or “Header 1”), and then nested under that several more headers (“Header 2”, “Header 3”, etc).

Increase the number of # symbols to increase the depth of the header, up to six:

Markdown

# Dark Mage

Officia adipisicing fugiat sint qui pariatur sint pariatur cillum tempor est nisi dolore quis enim. Et culpa excepteur occaecat anim est. ... Sunt laboris tempor in ipsum sit et nisi.

## Background

Veniam anim deserunt laborum in incididunt ad fugiat qui excepteur cillum nisi velit. Fugiat laborum qui exercitation velit quis aute excepteur. 

## Appearance

Voluptate elit laborum et sit veniam duis voluptate quis ipsum et eu ad qui dolore. Sunt enim mollit ex est cupidatat minim sit cupidatat est.

### Alternate

Veniam anim deserunt laborum in incididunt ad fugiat qui excepteur cillum nisi velit. Fugiat laborum qui exercitation velit quis aute excepteur.

## Abilities

Sunt commodo fugiat esse et nostrud cillum in duis est sit esse irure proident. ... Mollit ut incididunt deserunt.

### Teleport

Elit nostrud eiusmod qui consectetur voluptate quis minim eu proident irure reprehenderit amet ea elit labore. 

Headers are converted from the Markdown # to the HTML heading tags: h1 to h6, and will slugify your heading to create an id attribute for the tag:

## Character Creation

<h2 id="character-creation">Character Creation</h2>

Slugged (slugified?) id’s replace spaces with hyphens, remove special characters, and consist of only lowercase letters and numbers. If you have multiple identical headings,the slug process will add an incrementing number at the end– this works even if the tags are not identical:

<h2 id="character-creation">Character Creation</h2>
<h2 id="character-creation-1">Character Creation</h2>  // identical to the first
<h3 id="character-creation-2">Character Creation</h3>  // same text, but h3 tag

This is handy when you want to create links directly to certain headings– you can target the heading by it’s unique ID.

Styling

In the default 5th Edition PHB theme, you can see that the styling of each header level is different, generally decreasing in size and visual impact as you get to higher levels. This is just a stylistic difference, and can be changed with CSS in the Style Editor. Generally, you want to avoid using a particular level of header based solely on it’s appearance/size, particularly if you are sharing a brew via a Homebrewery link or PDF. Using inappropriate headers impacts accessibility for screen readers, and can impact other things, such as how PDF readers generate their document outlines.

To change the styling of headers, you can target specific heading tags individually, collectively, or by a specific and unique ID:

.page h1 {
  color: blue;
  font-family: Walter Turncoat;
  font-size: 3.5em;
  letter-spacing: 5px;
}

/* or... */

.page :is(h1,h2,h3,h4,h5,h6) {
  color: blue;
  font-family: Walter Turncoat;
  font-size: 3.5em;
  letter-spacing: 5px;
}

.page #heading-3 {    /* `.page h3` would target all h3 headers */
  color: red;
  font-family: Open Sans;
  font-size: 1.5em;
  border-bottom: 1px solid red;
  border-right: 1px dotted red;
}

   /*  reminder: length/size units can be px, in, cm, mm, %, em, rem, ... */

Homebrewery themes generally have lots of different CSS rules that have varying levels of specificity, and so you may find that using the above CSS to target H3 headers may not have any effect on headers inside Stat Blocks or Class Tables, for example. It is impossible to give an example of every possible target, and unwieldy to describe every possible CSS property that could be implemented, so I recommend checking out this post about using the browser dev tools to uncover the rules applied via Themes.