<div class="badge badge--green">
    Rico legt uit
</div>
<div class="badge {{ class }}">
    {{ text }}
</div>
{
  "text": "Rico legt uit",
  "class": "badge--green"
}
  • Content:
    .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;
        }
    }
    
  • URL: /components/raw/badge/_badge.scss
  • Filesystem Path: build/components/02-elements/badge/_badge.scss
  • Size: 743 Bytes

There are no notes for this item.