<div class="o-badge o-badge--info">
<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="M12 4.5C7.85786 4.5 4.5 7.85786 4.5 12C4.5 16.1421 7.85786 19.5 12 19.5C16.1421 19.5 19.5 16.1421 19.5 12C19.5 7.85786 16.1421 4.5 12 4.5ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12ZM12 10.5C12.4142 10.5 12.75 10.8358 12.75 11.25V15.75C12.75 16.1642 12.4142 16.5 12 16.5C11.5858 16.5 11.25 16.1642 11.25 15.75V11.25C11.25 10.8358 11.5858 10.5 12 10.5ZM12.75 8.25C12.75 8.66421 12.4142 9 12 9C11.5858 9 11.25 8.66421 11.25 8.25C11.25 7.83579 11.5858 7.5 12 7.5C12.4142 7.5 12.75 7.83579 12.75 8.25Z" />
</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": "info"
}
}
/* ------------------------------------ *\
$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.