Whenever you need a (colored) text with an icon to display an important note.
<p class="important-note note--{{ type }}">{{ note }}</p>
<p class="important-note note--unmissable">Info that can't be missed</p>
{
"type": "unmissable",
"icon": "exclamation-circle",
"note": "Info that can't be missed"
}
// Important note styling
.important-note {
@include icon('exclamation-circle', before);
@include theme('color', 'color-primary');
@include semi-bold-text;
display: flex;
align-items: center;
font-size: .9rem;
line-height: 177.778%;
&::before {
margin-right: 10px;
color: inherit;
font-size: 1.6rem;
}
}
.note {
&--timebound,
&--payment {
@include theme('color', 'color-warning');
}
&--timebound {
@include icon('clock', before);
}
&--payment {
@include icon('euro', before);
}
&--unmissable {
@include theme('color', 'color-error');
}
}