# Label

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <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"
    }

`
File:

- Content:
  `

      .label {
        display: inline-block;
        padding: $spacer-xxs;
        font-size: $font-size-xs;

        &.talk {
          @extend %heading-font-bold;

          color: $talk-label-text-color;
          text-transform: uppercase;
          background-color: $talk-label-background-color;
          border-left: 6px solid $talk-label-text-color;
        }

        &.training {
          @extend %heading-font-bold;

          color: $training-label-text-color;
          text-transform: uppercase;
          background-color: $training-label-background-color;
          border-left: 6px solid $training-label-text-color;
        }

        &.slides {
          @extend %heading-font-regular;

          color: $slides-label-text-color;
          background-color: $slides-label-background-color;
        }
      }

      .label-big {
        display: inline-block;
        padding: $spacer-xs;
        font-size: $font-size-base;

        &.hint {
          @extend %heading-font-bold;

          color: $training-label-text-color;
          text-transform: uppercase;
          border: 4px solid $training-label-text-color;
        }

        &.badge,
        &.badge--inverted {
          @extend %heading-font-bold;

          color: $badge-text-color;
          text-transform: uppercase;
          background-color: $badge-background-color;
        }

        &.badge--inverted {
          color: $badge-text-color-inverted;
          background-color: $badge-background-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/label/_label.scss
- Size: 1.4 KB

- Handle: @label
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/05-atoms/label/label.html

# @todo:

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