<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-d7f3" 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.