Callout Boxes

How to add highlighted note, warning, and tip boxes to Help Center articles.

Callout boxes draw the reader's attention to important information. Use them sparingly — if everything is highlighted, nothing stands out.

There are three types: Note, Warning, and Tip.

Note / Info

Use a Note box for important information the reader should be aware of, but that is not urgent or dangerous.

<div
  style={{
    background: "#E8F1FB",
    border: "1px solid #1F5FA8",
    borderRadius: "8px",
    padding: "16px",
    marginBottom: "16px",
  }}
>
  <strong style={{ color: "#1F5FA8" }}>Note:</strong> Your message here.
</div>

Example result:

Note: This setting only applies to admin users. Staff accounts will not see this option.

Warning

Use a Warning box when the reader needs to be careful — for example, an action that cannot be undone, or a common mistake to avoid.

<div
  style={{
    background: "#FEF9C3",
    border: "1px solid #CA8A04",
    borderRadius: "8px",
    padding: "16px",
    marginBottom: "16px",
  }}
>
  <strong style={{ color: "#92400E" }}>Warning:</strong> Your warning message here.
</div>

Example result:

Warning: Deleting a product removes all associated stock history. This cannot be undone.

Tip

Use a Tip box for helpful shortcuts, best practices, or things that make life easier — but are not required.

<div
  style={{
    background: "#DCFCE7",
    border: "1px solid #16A34A",
    borderRadius: "8px",
    padding: "16px",
    marginBottom: "16px",
  }}
>
  <strong style={{ color: "#15803D" }}>Tip:</strong> Your helpful tip here.
</div>

Example result:

Tip: You can use the keyboard shortcut Cmd+K (Mac) or Ctrl+K (Windows) to open the search bar from anywhere in the Help Center.

When to Use Each

Box type	Use when...
Note	Something the reader needs to know, but it is not critical
Warning	The reader could make a mistake or lose data
Tip	A helpful extra that improves the experience