Label

<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>
import Label from './components/01-atoms/text/block/label'

<Label type="talk">
    Vortrag
</Label>
<Label type="training">
    Training
</Label>
<Label type="slides">
    Folien verfügbar
</Label>
<Label type="hint" big>
    Ausverkauft!
</Label>
<Label type="badge" big>
    Neu!
</Label>
<Label type="badge" big inverted>
    Neu!
</Label>
{
  "text": "Listen"
}
  • Content:
    .label {
      display: inline-block;
      padding: $spacer-xxs;
      line-height: $label-line-height-small;
      font-size: $label-font-size-small;
    
      &.talk {
        @extend %heading-font-bold;
    
        border-left: 6px solid $talk-label-text-color;
        background-color: $talk-label-background-color;
        text-transform: uppercase;
        color: $talk-label-text-color;
      }
    
      &.training {
        @extend %heading-font-bold;
    
        border-left: 6px solid $training-label-text-color;
        background-color: $training-label-background-color;
        text-transform: uppercase;
        color: $training-label-text-color;
      }
    
      &.slides {
        @extend %heading-font-regular;
    
        background-color: $slides-label-background-color;
        color: $slides-label-text-color;
      }
    }
    
    .label-big {
      display: inline-block;
      padding: $spacer-xs;
      line-height: $label-big-line-height;
      font-size: $label-big-font-size;
    
      &.hint {
        @extend %heading-font-bold;
    
        border: 4px solid $training-label-text-color;
        text-transform: uppercase;
        color: $training-label-text-color;
      }
    
      &.badge,
      &.badge--inverted {
        @extend %heading-font-bold;
    
        background-color: $badge-background-color;
        text-transform: uppercase;
        color: $badge-text-color;
      }
    
      &.badge--inverted {
        background-color: $badge-background-color-inverted;
      }
    }
    
    
    //Breakpoints
    @media screen and (min-width: $grid-breakpoint-md) {
      .label {
        margin-right: $spacer-xxs;
        line-height: $label-line-height;
        font-size: $label-font-size;
      }
    }
    
  • URL: /components/raw/label/_label.scss
  • Filesystem Path: components/01-atoms/text/block/label/_label.scss
  • Size: 1.5 KB
  • Content:
    import { createElement } from 'complate-stream'
    import classNames from 'classnames'
    
    export default function CaseTileTeaser ({ type, big, inverted }, ...children) {
      let classname = classNames(big ? 'label-big' : 'label', type, { 'badge--inverted': inverted })
    
      return <div class={classname}>{children}</div>
    }
    
  • URL: /components/raw/label/index.jsx
  • Filesystem Path: components/01-atoms/text/block/label/index.jsx
  • Size: 314 Bytes

@todo:

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