<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>
.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
{
  "lines": [
    {
      "text": "Bis zu"
    },
    {
      "text": "351 €",
      "modifier": "large"
    },
    {
      "text": "Beitragsvorteil"
    },
    {
      "text": "jährlich"
    }
  ]
}
  • 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.