<div class="alert alert-warning" role="alert">
<div class="alert-wrapper">
<i class="fas fa-exclamation-triangle"></i><span class="sr-only">exclamation for alert</span>
This is a WARNING alert—check it out!
</div>
</div>
<div class="alert alert-{{ type }}" role="alert">
{% if fa_icons %}
<div class="alert-wrapper">
<i class="{{ fa_icons.class }}"></i><span class="sr-only">{{ fa_icons.description }}</span>
{% endif %}
{{ message }}
{% if fa_icons %}
</div>
{% endif %}
</div>
{
"type": "warning",
"message": "This is a WARNING alert—check it out!",
"fa_icons": {
"class": "fas fa-exclamation-triangle",
"description": "exclamation for alert"
}
}
.alert {
font-size: 1.5rem;
.alert-wrapper {
display: flex;
flex-direction: row;
align-items: center;
@include media-breakpoint-down(xs) {
flex-direction: column;
justify-content: center;
}
i {
font-size: 2.75rem;
padding: 0 $spacer 0 0;
}
}
}
Display the various alert and what they mean.