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:
Alerts with icons is a useful way to add supporting elements to your alert message.
<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>
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:
{{ 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') }}
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:
Always use upper case letter for the first name
Remember, if someone asks, you're the one responsible.
Instead of this:
Always use upper case letter for the first name
Remember, if someone asks, you're the one responsible.