Alerts

Create alerts by adding the _alert class along with a modifier, e.g. _alert-success.

Alerts use Flexbox, so by adding an <i /> element as the first element and wrapping the rest of the content in a div, you can end up with something like this:

<div class="_alert _alert-info">
  <i class="far fa-info-circle"></i>
  <div>
    <strong class="_block">First time here?</strong>
    <p>Alerts with icons is a useful way to add supporting elements to your alert message.</p>
  </div>
</div>

Variants

The alert() macro

We have a Jinja macro (in macros.html) for creating alerts. It's not much used, but it's a way to combine icons, title and body in one go:

Using

{{ alert(messages='Some info message') }}
{{ alert('Success', 'Nicely done!', 'success') }}
{{ alert('Warning', 'Only click if you know what you are doing', 'warning') }}
{{ alert('Errors', ['Unable to generate spec approximation of project', 'Project is of legacy type, and not sold on spec.'], 'danger') }}

Alerts with without icons

If you don't want to include an icon, but have multiple children, ensure that all content is wrapped in a div or a span, if not it's going to look like this:

Instead of this: