<!-- Default -->
<div class="badge badge--grey">
Sporten
</div>
<!-- Green -->
<div class="badge badge--green">
Rico legt uit
</div>
<!-- Red -->
<div class="badge badge--red">
Sale
</div>
<!-- Top Centered -->
<div class="badge badge--green badge--top-centered">
Rico legt uit
</div>
<div class="badge {{ class }}">
{{ text }}
</div>
/* Default */
{
"text": "Sporten",
"class": "badge--grey"
}
/* Green */
{
"text": "Rico legt uit",
"class": "badge--green"
}
/* Red */
{
"text": "Sale",
"class": "badge--red"
}
/* Top Centered */
{
"text": "Rico legt uit",
"class": "badge--green badge--top-centered"
}
.badge {
position: absolute;
top: $spacer--1;
left: $spacer--1;
overflow: hidden;
display: flex;
align-items: center;
width: initial;
height: $spacer--15;
z-index: 1;
border-radius: 4px;
padding: 0 $spacer--05;
font-family: $font-family-sans-serif;
font-size: $font-size-base;
font-weight: $font-weight-bold;
color: $white;
text-transform: none;
background: $gray;
&--red {
background: $red;
}
&--green {
background: $green;
}
&--top-centered {
position: initial;
border-top-left-radius: 0;
border-top-right-radius: 0;
grid-area: badge;
justify-self: center;
align-items: center;
}
}
There are no notes for this item.