The "Notice" Box
A Notice Box is also referred to as a Callout or Alert Box. Ghost has a built-in Callout Box which looks great and has a nice emoji picker:
😀
Ghost's callout.
However, you may want one that matches your theme more expressly, so our Notice Box does just that. Just edit the text and you can use emoji if you want.
📌 This is a context-aware Notice Box
This block automatically adapts to your theme settings. Change your theme colors and see what happens.
Instructions
- Copy the code below.
- Add an HTML Card in the Ghost editor of your site.
- Paste the code and edit as needed.
<div style="
background: var(--bg-1);
border-left: 4px solid var(--accent);
padding: 20px 25px;
border-radius: var(--radius-main);
color: var(--text-1);
margin: 30px 0;
">
<strong style="display:block; margin-bottom: 8px; color: var(--text-0); font-size: 1.1em;">
📌 Note for Editors
</strong>
<span style="opacity: 0.9;">
This block automatically adapts to your theme settings. If you change your "Accent Color" to blue, this border turns blue instantly.
</span>
</div>