hkk Frontend 2017

Kicker 

<!-- Einfach -->
<span class="kicker kicker--simple">Das ist ein Kicker</span>


<!-- Rot -->
<span class="kicker kicker--red">Das ist ein Kicker</span>


<!-- Transparent-Blau -->
<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}
 
/* Einfach */
{
  "text": "Das ist ein Kicker",
  "modifier": "simple"
}


/* Rot */
{
  "text": "Das ist ein Kicker",
  "modifier": "red"
}


/* Transparent-Blau */
{
  "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.