hkk Frontend 2017

Badge 

<!-- Standard -->
<div class="badge">
    <p class="badge__text">Bis zu<br/><span class="badge__text--large">351 €</span><br/>Beitragsvorteil<br/>jährlich<br/>
    </p>
</div>


<!-- Mehrere Textzeilen (fett) -->
<div class="badge">
    <p class="badge__text">Lorem ipsum<br/><span class="badge__text--large">dolor</span><br/><span class="badge__text--large badge__text--large">atmet</span><br/>dolor<br/>
    </p>
</div>


<!-- Weniger Textzeilen -->
<div class="badge">
    <p class="badge__text">Lorem ipsum<br/><span class="badge__text--large">dolor</span><br/>
    </p>
</div>


.badge&attributes(attr)
  if lines
    p.badge__text
      each line in lines
        -
          // Line attributes
          lineAttr = lineAttr || {};
          lineAttr.class = classList(lineAttr.class);

          if (line.modifier) lineAttr.class.push(`badge__text--${line.modifier}`);

        if line.modifier
          span&attributes(lineAttr) #{line.text}
          br
        else
          | #{line.text}
          br
 
/* Standard */
{
  "lines": [
    {
      "text": "Bis zu"
    },
    {
      "text": "351 €",
      "modifier": "large"
    },
    {
      "text": "Beitragsvorteil"
    },
    {
      "text": "jährlich"
    }
  ]
}


/* Mehrere Textzeilen (fett) */
{
  "lines": [
    {
      "text": "Lorem ipsum"
    },
    {
      "text": "dolor",
      "modifier": "large"
    },
    {
      "text": "atmet",
      "modifier": "large"
    },
    {
      "text": "dolor"
    }
  ]
}


/* Weniger Textzeilen */
{
  "lines": [
    {
      "text": "Lorem ipsum"
    },
    {
      "text": "dolor",
      "modifier": "large"
    }
  ]
}
  • Content: 
    .badge {
  align-items: center;
  background-color: $color-red;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="48" stroke="%23fff" stroke-width="3" stroke-dasharray="0 5.8" stroke-linecap="round" fill="transparent"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 50%;
  box-shadow: 3px 3px 5px 0 rgba(#000, 0.75);
  display: flex;
  height: 10rem;
  justify-content: center;
  padding: 0.5rem;
  width: 10rem;

  @include mq($from: m) {
    height: 18rem;
    padding: 1rem;
    width: 18rem;
  }

  @include mq($from: l) {
    height: 23rem;
    padding: 2rem;
    width: 23rem;
  }
}

.badge__text {
  color: #fff;
  font-size: 1.2rem;
  font-weight: medium;
  line-height: 1.2;
  margin: 0;
  text-align: center;

  @include mq($from: m) {
    font-size: 2rem;
  }

  @include mq($from: l) {
    font-size: 2.8rem;
  }
}

.badge__text--large {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1;

  @include mq($from: m) {
    font-size: 5rem;
  }
}
  • URL: /components/raw/badge/badge.scss
  • Filesystem Path: src/components/molecules/badge/badge.scss
  • Size: 1.1 KB

There are no notes for this item.