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:

Did you know?

Alerts with icons is a useful way to add supporting elements to your alert message.

Code for this alert
<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

_alert-info: is intended for informative system messages.
_alert-success: is intended for affirmative messages.
_alert-warning: is intended for giving users a heads up about something they need to be aware of.
_alert-danger: is intended for communicating that something is incorrect.

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:

Some info message
Success Nicely done!
Warning Only click if you know what you are doing
Errors
  • Unable to generate spec approximation of project
  • Project is of legacy type, and not sold on spec.

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:

Naming rules

Always use upper case letter for the first name

Remember, if someone asks, you're the one responsible.

Instead of this:

Naming rules

Always use upper case letter for the first name

Remember, if someone asks, you're the one responsible.