Skip to content

System HTML

Jump to bottom
github-actions[bot] edited this page Mar 31, 2026 · 3 revisions

Up to date as of 5.3.0

The D&D system provides several new CSS classes for formatting text. These styles can be applied to any text field by editing the Source HTML </> and following the examples below.

Advice and Quest Blocks

The fvtt advice and fvtt quest classes share the same format, displaying an image on the left with accompanying text in a boxed layout on the right. Specify the image using the img src attribute within the figure block and the text within the article block.

<div class="fvtt advice">
    <figure class="icon">
        <img src="icons/equipment/chest/robe-layered-red.webp" class="round">
    </figure>
    <article>
        <h4>Casting in Armor</h4>
        <p>Because of the mental focus and precise gestures required for spellcasting, you must be proficient with the armor you are wearing to cast a spell. You are otherwise too distracted and physically hampered by your armor for spellcasting.</p>
    </article>
</div>

Advice Block

Narrative

The fvtt narrative class creates a text box for read-aloud text.

<div class="fvtt narrative">
    <p>The horses’ saddlebags have been looted. An empty leather map case lies nearby.</p>
</div>

Narrative Block

Notable

The notable class is used within an aside tag to create a callout box for additional information.

<aside class="notable">
    <h4>Joining a Secret Society</h4>
    <p>If the party helps Steve, the thief privately approaches certain members of the group and urges them to join the Secret Society of Stealing.</p>
</aside>

Notable Block

Habitat & Treasure

The habitat-treasure style can be used to apply the styling used in the Monster Manual at the top of a monster's description to indicate what its habitat is and what treasure it provides.

<p class="habitat-treasure">
  <strong>Habitat:</strong> Underdark; <strong>Treasure:</strong> Arcana
</p>

Habitat & Treasure Block and Pull Quote

Pull Quotes

The combination of quote-lg class with float-right or float-left can produce a large pull quote set aside from the text. If the author for a quote is provided, then the quote-author class can be used to set it apart from the quote itself.

<aside class="quote-lg float-right">
  <p><q>I don't know half of you half as well as I should like; and I like less than half of you half as well as you deserve.</q></p>
  <p class="quote-author">—Bilbo Baggins, <em>The Fellowship of the Rings</em></p>
</aside>

Clone this wiki locally