<span class="c-badge u-label-02 u-py-xxsmall u-px-xsmall">Finisce oggi</span>
<span class="c-badge u-label-02 u-py-xxsmall u-px-xsmall">{{label}}</span>
{
"label": "Finisce oggi"
}
// Name: Badge
// Description: Simple badge
//
// Component: `c-badge`
//
// Dependencies: `settings/v7/colors.tokens`
// `settings/v7/colors.themes`
// `settings/v7/colors.mode`
// `settings/v7/global`
// `settings/v7/spacing.tokens`
//
// ========================================================================
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/tools/v7/mq' as *;
@use '../../../assets/sass/tools/v7/zindex' as *;
@use '../../../assets/sass/tools/v7/typography' as *;
// Variables
// ========================================================================
$badge-border: #{$ui-06};
// ========================================================================
.c-badge {
border: 1px solid $badge-border;
}
A simple badge component
To display a badge component use following syntax:
{% render "@badge" %}