How to Use Note Blocks: Warnings, Tips and Info Boxes

Note blocks pull a short piece of text out of the flow of your article so readers don't miss it. Use them for a warning, a quick tip, or a side fact. Each block has a colored icon and a title, and it adapts to light and dark mode on its own.

Paste every example on this page in the post editor's HTML view, not in Compose view.

The four types

Each type has its own color, icon, and default title. You choose the type by adding a second class after note.

1. Note

Use this for a general remark that adds context to what you just said.

<p class="note">Your text here.</p>

2. Warning

Use this when a step can break something or can't be undone.

<p class="note warn">Your text here.</p>

3. Tip

Use this for a shortcut or a better way to do something.

<p class="note tip">Your text here.</p>

4. Info

Use this for a neutral fact, like a version number or a requirement.

<p class="note info">Your text here.</p>

Custom title

By default the title is Note, Warning, Tip, or Info. To use your own words, add a data-title attribute.

Back up your theme. Uploading a new one replaces the old template completely.

<p class="note warn" data-title="Before you start">Your text here.</p>

Icon only, no title

To show the icon without any title, keep data-title but leave it empty. The block then shows only the icon and your text.

Press Ctrl + S in the editor to save a draft without leaving the page.

<p class="note tip" data-title="">Your text here.</p>

The attribute must be written as data-title="" with nothing between the quotes. If you remove it completely, the default title comes back.

Several paragraphs or a list

A <p> can only hold one paragraph. For longer content, use a <div> and put your paragraphs and lists inside it.

<div class="note">
  <p>First paragraph.</p>
  <ul>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>

Quick reference

You want	Write
Note	class="note"
Warning	class="note warn"
Tip	class="note tip"
Info	class="note info"
Your own title	data-title="Your title"
Icon only	data-title=""

Posts that use the old class names (is-warn, warning, is-good, success, is-info) still work. You don't need to edit them.