hkk Frontend 2017

Info-Box 

<div class="info-box info-box--turquoise">
    <div class="info-box__icon">
        <svg class="icon icon--info" id="icon-0f1b" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-info"></use>
</svg>
    </div>
    <div class="info-box__content">Den Antrag für kostenlos mitversicherte Familienmitlgieder schicken wir Ihnen zu. Bitte denken Sie daran, dass wir eine Kündigungsbestätigung nach §175 SGB V von der Vorkasse benötigen.</div>
</div>
 
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);
  attr.class.push(`info-box--${color || 'turquoise'}`);

//- Render box
.info-box&attributes(attr)
  //- Icon
  if icon
    .info-box__icon
      != include('@icon', {icon})

  //- Box content
  .info-box__content #{text}
 
{
  "color": "turquoise",
  "icon": "info",
  "text": "Den Antrag für kostenlos mitversicherte Familienmitlgieder schicken wir Ihnen zu. Bitte denken Sie daran, dass wir eine Kündigungsbestätigung nach §175 SGB V von der Vorkasse benötigen."
}
  • Content: 
    .info-box {
  display: flex;
  margin: 3.5rem 0;
  padding: 1.5rem;

  @include mq($from: m) {
    padding: 2.5rem;
  }
}

.info-box--turquoise {
  background-color: rgba($color-turquoise, 0.2);
  border: 1px solid $color-turquoise;
}

.info-box__icon {
  color: $color-steelgrey-dark;
  margin-right: 1rem;

  @include mq($from: m) {
    margin-right: 1.5rem;
  }
}

.info-box__content {
  font-size: 1.5rem;
}
  • URL: /components/raw/info-box/info-box.scss
  • Filesystem Path: src/components/organisms/info-box/info-box.scss
  • Size: 412 Bytes

There are no notes for this item.