Label

<div class="demo">
    <div class="label talk">Vortrag</div>
    <div class="label training">Training</div>
    <div class="label slides">Folien verfügbar</div>
    <div class="label-big hint">Ausverkauft!</div>
    <div class="label-big badge">Neu!</div>
    <div class="label-big badge badge--inverted">Neu.</div>
</div>
<div class="demo">
    <div class="label talk">
        Vortrag
    </div>

    <div class="label training">
        Training
    </div>

    <div class="label slides">
        Folien verfügbar
    </div>

    <div class="label-big hint">
        Ausverkauft!
    </div>

    <div class="label-big badge">
        Neu!
    </div>

    <div class="label-big badge badge--inverted">
        Neu.
    </div>
</div>
{
  "text": "Listen"
}
  • Content:
    .label {
      display: inline-block;
      padding: $spacer-xxs;
      font-size: $font-size-xs;
    
      &.talk {
        @extend %heading-font-bold;
    
        border-left: 6px solid $talk-label-text-color;
        background-color: $talk-label-background-color;
        color: $talk-label-text-color;
        text-transform: uppercase;
      }
    
      &.training {
        @extend %heading-font-bold;
    
        border-left: 6px solid $training-label-text-color;
        background-color: $training-label-background-color;
        color: $training-label-text-color;
        text-transform: uppercase;
      }
    
      &.slides {
        @extend %heading-font-regular;
    
        background-color: $slides-label-background-color;
        color: $slides-label-text-color;
      }
    }
    
    .label-big {
      display: inline-block;
      padding: $spacer-xs;
      font-size: $font-size-base;
    
      &.hint {
        @extend %heading-font-bold;
    
        border: 4px solid $training-label-text-color;
        color: $training-label-text-color;
        text-transform: uppercase;
      }
    
      &.badge,
      &.badge--inverted {
        @extend %heading-font-bold;
    
        background-color: $badge-background-color;
        color: $badge-text-color;
        text-transform: uppercase;
      }
    
      &.badge--inverted {
        background-color: $badge-background-color-inverted;
        color: $badge-text-color-inverted;
      }
    }
    
    //Breakpoints
    @media screen and (min-width: $grid-breakpoint-md) {
      .label {
        margin-right: $spacer-xxs;
      }
    }
    
  • URL: /components/raw/label/_label.scss
  • Filesystem Path: components/05-atoms/text/block/label/_label.scss
  • Size: 1.4 KB

@todo:

find a solution to make it work without a div wrapper for jsx