<span class="kicker kicker--transparent-blue">Das ist ein Kicker</span>
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

  //- Process options
  if (modifier) {
    attr.class.push(`kicker--${modifier}`);
  }

//- Render atom
#{tag || 'span'}.kicker&attributes(attr)
  | #{text}
{
  "text": "Das ist ein Kicker",
  "modifier": "transparent-blue"
}
  • Content:
    // Default kicker
    .kicker {
      background-color: $color-steelgrey-dark;
      border: 2px solid transparent;
      border-radius: 3px;
      color: #fff;
      display: inline-block;
      font-size: 1.4rem;
      font-weight: bold;
      letter-spacing: 0.12em;
      line-height: 1;
      margin: 0 auto;
      max-width: 100%;
      padding: calc(1.8rem / 2 - 2px) calc(1.5rem - 2px);
      text-align: center;
      text-transform: uppercase;
      user-select: none;
    }
    
    // Modifier
    .kicker--red {
      background-color: $color-red;
    }
    
    .kicker--transparent-blue {
      background-color: transparent;
      color: $color-blue;
      padding: 0;
    }
    
  • URL: /components/raw/kicker/kicker.scss
  • Filesystem Path: src/components/atoms/kicker/kicker.scss
  • Size: 579 Bytes

There are no notes for this item.