The Ghost editor is really great, providing many options for different types of content that could go into posts. However sometimes you want to highlight content in a different way, that is where alert boxes come in.

You can put emphasis on specific parts of your content, and make it clear it's an important piece of information. In this guide we will handle the following types of alerts:

  • default
  • information
  • warning
  • error
  • success

The layout - HTML

You will have to use the HTML card as we need a specific markup for this to work. Here is the code that will be used:

<!-- Default alert box -->
<div class="alert">
The default alert box content.

<!-- Info alert box -->
<div class="alert info">
Information alert box content.

<!-- Warning alert box -->
<div class="alert warning">
Warning alert box content.

<!-- Error alert box -->
<div class="alert error">
Error alert box content.

<!-- Success alert box -->
<div class="alert success">
Success alert box content.

Now you have the markup for all the alert types, but we have no styling, that is why we actually need the <div> wrapper around the content. We will target the .alert class and define a style for these boxes.

The style - CSS

Let's start styling our alert boxes, first, we will address the main class then add some specifics for the type. You can add this in code injection in the Ghost Admin.

.alert {
  --color-accent: #222;
  --sign: "i";
  position: relative;
  color: #333;
  padding: 1em;
  border: 1px solid;
  border-color: var(--color-accent);
  margin-top: 1em;
  margin-bottom: 2em;
  border-radius: 5px;

.alert a { border-bottom: 1px dotted var(--color-accent); }

.alert:before {
  content: var(--sign);
  background-color: var(--color-accent);
  font-family: monospace;
  position: absolute;
  line-height: 1;
  width: 24px;
  height: 24px;
  left: -12px;
  top: -12px;
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 50%;

.alert:after {
  content: "";
  background-color: var(--color-accent);
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  opacity: 0.05;
} { 
  --color-accent: #007bff; 
  --sign: "i";

.alert.warning { 
  --color-accent: #ffc107; 
  --sign: "!";

.alert.error { 
  --color-accent: #dc3545;
  --sign: "!";

.alert.success { 
  --color-accent: #28a745; 
  --sign: "✓"; 

To add some context for the styling:

  • in the .alert class, we add the general styling, like color, padding, margin
  • in the:before pseudo-class, we define the symbol/sign for the different alert types as well as the styling for it
  • in the:after pseudo-class, we define the background color, which depends on the type and opacity is set
  • then finally we have the alert types, where you can change the color and the sign for each type

The result

Here is the final look of the boxes, with some minor style adjustments:

The default alert box content.
The default alert box content.
Information alert box content.
Warning alert box content.
Error alert box content.
Success alert box content.

You can define your own alert type, or change the --sign according to your needs, you can change the color for each type. You can even create a snippet out of it, so you don't have to remember the markup.