Whenever you need a (colored) text with an icon to display an important note.
<p class="important-note note--{{ type }}">{{ note }}</p>
<!-- Default -->
<p class="important-note note--important">Important info</p>
<!-- Time Bound Info -->
<p class="important-note note--timebound">Time-bound info</p>
<!-- Payment Info -->
<p class="important-note note--payment">Payment info</p>
<!-- Not To Be Missed Info -->
<p class="important-note note--unmissable">Info that can't be missed</p>
/* Default */
{
"type": "important",
"icon": "exclamation-circle",
"note": "Important info"
}
/* Time Bound Info */
{
"type": "timebound",
"icon": "clock",
"note": "Time-bound info"
}
/* Payment Info */
{
"type": "payment",
"icon": "euro",
"note": "Payment info"
}
/* Not To Be Missed Info */
{
"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');
}
}