hkk Frontend 2017

Conversion-Header 

<div class="conversion-header">
    <div class="conversion-header__inner">
        <div class="header__logo">
            <a class="logo" href="#" title="hkk Krankenkasse"><img class="logo__image" src="../../../../../images/logo.svg" alt="Logo der hkk Krankenkasse" /></a>
        </div>
        <div class="conversion-header__contact">
            <p class="conversion-header__text">Hilfe beim Wechsel</p>
            <div class="conversion-header__phone">
                <svg class="icon conversion-header__phone-icon icon--phone" id="icon-3da3" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-phone"></use>
</svg>
                <p class="conversion-header__phone-text">0421-3655-1234</p>
            </div>
        </div>
    </div>
</div>
 
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

//- Render conversion header
.conversion-header&attributes(attr)
  .conversion-header__inner
    .header__logo
      != include('@logo')

    .conversion-header__contact
      p.conversion-header__text Hilfe beim Wechsel

      .conversion-header__phone
        != include('@icon', {icon: 'phone', attr: {class: 'conversion-header__phone-icon'}})

        p.conversion-header__phone-text 0421-3655-1234
 
/* No context defined for this component. */
  • Content: 
    $header-height-default: 7.5rem;
$header-height-from-navigation: 10.5rem;

.conversion-header {
  border-bottom: 3px solid $color-steelgrey-light;
}

.conversion-header__inner {
  align-items: center;
  display: flex;
  height: $header-height-default;
  margin-left: auto;
  margin-right: auto;
  padding: 0 2rem;

  @include mq($from: navigation) {
    height: $header-height-from-navigation;
  }

  @include mq($from: l) {
    height: 12rem;
  }

  @include mq($from: xl) {
    max-width: map-get($container-max-widths, xl);
    padding-left: map-get($body-padding, xl);
    padding-right: map-get($body-padding, xl);
  }
}

.conversion-header__text {
  color: $color-blue;
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  text-align: right;
}

.conversion-header__phone {
  align-items: center;
  background-color: $color-steelgrey-light;
  border-radius: 0.5rem;
  display: flex;
  padding: 0.5rem 1rem;
}

.conversion-header__phone-icon {
  color: $color-red;
  font-size: 1.6rem;
  margin-right: $spacer / 2;
}

.conversion-header__phone-text {
  color: $color-blue;
  font-weight: bold;
  margin: 0;
  position: relative;
  top: -0.1rem;
}
  • URL: /components/raw/conversion-header/conversion-header.scss
  • Filesystem Path: src/components/organisms/conversion-header/conversion-header.scss
  • Size: 1.1 KB

There are no notes for this item.