<div class="o-badge o-badge--danger">
<span class="o-icon o-icon--md o-badge__icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.7235 17.2425L14.0434 4.61249C13.826 4.19998 13.4887 3.86249 13.0763 3.64498C11.9443 3.04497 10.5423 3.47998 9.94247 4.61249L3.26989 17.2425C3.08996 17.5725 3 17.9475 3 18.33C3 18.945 3.24738 19.5225 3.68228 19.9575C4.11708 20.3925 4.68688 20.61 5.31663 20.625H18.6843C19.0592 20.625 19.4265 20.535 19.7639 20.3625C20.3111 20.0775 20.7085 19.59 20.8959 19.005C21.0759 18.4125 21.0234 17.79 20.731 17.2425H20.7235ZM19.4564 18.5625C19.389 18.7725 19.2541 18.9375 19.0592 19.035C18.9467 19.095 18.8117 19.125 18.6768 19.125H5.30912C5.11419 19.11 4.88932 19.0425 4.73932 18.8925C4.58941 18.7425 4.49945 18.54 4.49945 18.3225C4.49945 18.1875 4.52947 18.06 4.58941 17.9475L11.2695 5.30998C11.4794 4.91249 11.9742 4.75497 12.3791 4.97248C12.4466 5.00807 12.5091 5.05377 12.5642 5.10722C12.6252 5.16643 12.6771 5.23509 12.7164 5.30998L19.3965 17.94C19.494 18.1275 19.5165 18.3525 19.4564 18.555V18.5625ZM11.9967 14.625C12.4091 14.625 12.7464 14.2875 12.7464 13.875V9.37497C12.7464 8.96248 12.4091 8.62497 11.9967 8.62497C11.5843 8.62497 11.247 8.96248 11.247 9.37497V13.875C11.247 14.2875 11.5843 14.625 11.9967 14.625ZM13.1213 16.5C13.1213 17.1213 12.6178 17.625 11.9967 17.625C11.3757 17.625 10.8721 17.1213 10.8721 16.5C10.8721 15.8786 11.3757 15.375 11.9967 15.375C12.6178 15.375 13.1213 15.8786 13.1213 16.5Z" />
</svg>
</span>
<span class="o-badge__text">Badge</span>
</div>
{% set base_class = badge.base_class|default('o-badge') %}
{% if badge.modifiers == "danger" %}
{% set badge_icon = "warning" %}
{% elseif badge.modifiers == "warning" %}
{% set badge_icon = "warning-circle" %}
{% elseif badge.modifiers == "info" %}
{% set badge_icon = "info" %}
{% elseif badge.modifiers == "success" %}
{% set badge_icon = "done-circle" %}
{% endif %}
{% if badge.text %}
<div class="{{ bem(base_class, badge.element, badge.modifiers, badge.extra) }}" {{ attributes(badge.attributes) }}>
{% include "@icon" with {
"icon": {
"name": badge_icon,
"modifiers": "md",
"extra": bem(base_class, 'icon')
}
} %}
{% if badge.text %}
<span class="{{ bem(base_class, 'text') }}">{{ badge.text }}</span>
{% endif %}
</div>
{% endif %}
{
"badge": {
"text": "Badge",
"modifiers": "danger"
}
}
/* ------------------------------------ *\
$BADGES
\* ------------------------------------ */
.o-badge {
display: inline-flex;
padding: var(--dotd-space-xxs) var(--dotd-space-xs);
justify-content: center;
align-items: center;
gap: var(--dotd-space-xxs);
border-radius: var(--dotd-border-radius-sm);
color: var(--dotd-color-content-default);
background: var(--dotd-color-background-default-weak);
@include o-typography-body--sm;
&--warning {
color: var(--dotd-color-content-warning-default);
background: var(--dotd-color-background-warning-default);
}
&--danger {
color: var(--dotd-color-content-danger-default);
background: var(--dotd-color-background-danger-default);
}
&--info {
color: var(--dotd-color-content-info-default);
background: var(--dotd-color-background-info-default);
}
&--success {
color: var(--dotd-color-content-success-default);
background: var(--dotd-color-background-success-default);
}
}
No notes defined.