<section class="three-reasons">
    <div class="three-reasons__image">
        <picture>
            <source srcset="/images/dummy/dummy-three-reasons-wide.jpg" media="(min-width: 640px)" /><img class="image" alt="Alt Text sieht anders aus" src="/images/dummy/dummy-three-reasons.jpg" />
        </picture>
    </div>
    <div class="three-reasons__inner">
        <div class="three-reasons__left">
            <div class="three-reasons__headline">
                <h2 class="headline headline--display-1">3 Gründe für die hkk
                </h2>
            </div>
            <ul class="three-reasons__list">
                <li class="three-reasons__list-item">
                    <svg class="icon three-reasons__list-item-icon icon--checkmark-circle icon--before" id="icon-5871" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg>
                    <div class="three-reasons__list-item-text">
                        <div class="formatted-text">
                            <p>Bis zu <strong>351 €</strong> Krankenkassen-Beitrag im Jahr sparen</p>
                        </div>
                    </div>
                </li>
                <li class="three-reasons__list-item">
                    <svg class="icon three-reasons__list-item-icon icon--checkmark-circle icon--before" id="icon-fb7a" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg>
                    <div class="three-reasons__list-item-text">
                        <div class="formatted-text">
                            <p>Extraleistungen für über <strong>1.000 €</strong> sichern</p>
                        </div>
                    </div>
                </li>
                <li class="three-reasons__list-item">
                    <svg class="icon three-reasons__list-item-icon icon--checkmark-circle icon--before" id="icon-c45d" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg>
                    <div class="three-reasons__list-item-text">
                        <div class="formatted-text">
                            <p>Krankenkasse <strong>in wenigen Klicks</strong> wechseln</p>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="three-reasons__button">
                <a class="button button--blue" id="button-ad99" href="#">Jetzt Vorteile sichern
</a>
            </div>
        </div>
        <div class="three-reasons__right">
            <div class="three-reasons__title">
                <div class="intro">
                    <p>Vorteile speziell für:</p>
                </div>
            </div>
            <div class="three-reasons__links">
                <div class="three-reasons__link-item">
                    <a class="icon-block three-reasons__link" href="#">
                        <svg class="icon icon-block__icon icon--big-employed" id="icon-1765" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-big-employed"></use>
</svg>Arbeitnehmer:innen
                    </a>
                    <div class="three-reasons__link-item-icon">
                        <svg class="icon icon--arrow-right icon--before" id="icon-8a33" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg>
                    </div>
                </div>
                <div class="three-reasons__link-item">
                    <a class="icon-block three-reasons__link" href="#">
                        <svg class="icon icon-block__icon icon--big-self-employed" id="icon-f8b3" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-big-self-employed"></use>
</svg>Selbstständige
                    </a>
                    <div class="three-reasons__link-item-icon">
                        <svg class="icon icon--arrow-right icon--before" id="icon-6ed8" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg>
                    </div>
                </div>
                <div class="three-reasons__link-item">
                    <a class="icon-block three-reasons__link" href="#">
                        <svg class="icon icon-block__icon icon--big-trainee" id="icon-25e1" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-big-trainee"></use>
</svg>Auszubildende
                    </a>
                    <div class="three-reasons__link-item-icon">
                        <svg class="icon icon--arrow-right icon--before" id="icon-6199" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg>
                    </div>
                </div>
                <div class="three-reasons__link-item">
                    <a class="icon-block three-reasons__link" href="#">
                        <svg class="icon icon-block__icon icon--big-student" id="icon-a6d3" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-big-student"></use>
</svg>Studierende
                    </a>
                    <div class="three-reasons__link-item-icon">
                        <svg class="icon icon--arrow-right icon--before" id="icon-9e22" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg>
                    </div>
                </div>
                <div class="three-reasons__link-item">
                    <a class="icon-block three-reasons__link" href="#">
                        <svg class="icon icon-block__icon icon--big-young-family" id="icon-8f33" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-big-young-family"></use>
</svg>Familien
                    </a>
                    <div class="three-reasons__link-item-icon">
                        <svg class="icon icon--arrow-right icon--before" id="icon-ffa2" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg>
                    </div>
                </div>
                <div class="three-reasons__link-item">
                    <a class="icon-block three-reasons__link" href="#">
                        <svg class="icon icon-block__icon icon--big-more" id="icon-3679" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-big-more"></use>
</svg>Weitere
                    </a>
                    <div class="three-reasons__link-item-icon">
                        <svg class="icon icon--arrow-right icon--before" id="icon-cbcc" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

//- Render faq+news
section.three-reasons&attributes(attr)
  if image
    .three-reasons__image
      picture
        source(srcset=image.srcWide, media='(min-width: 640px)')
        != include('@image', { image: image.src })

  .three-reasons__inner
    if headline || links || button
      .three-reasons__left
        if headline
          .three-reasons__headline
            != include('@headline', headline)

        if list
          - listType = list.order ? 'ol' : 'ul'
          #{listType}.three-reasons__list
            each listItem in list
              li.three-reasons__list-item
                != include('@icon', { icon: 'checkmark-circle', before: true, attr: { class: 'three-reasons__list-item-icon' } })
                .three-reasons__list-item-text
                  != include('@formatted-text', listItem)

        if button
          .three-reasons__button
            != include('@button', button)

    if title || links
      .three-reasons__right
        if title
        .three-reasons__title
          != include('@intro', title)

        if links
          .three-reasons__links
            each link in links
              .three-reasons__link-item
                != include('@icon-block', {link: link.link, text: link.title, icon: link.icon, attr: {class: 'three-reasons__link'}})
                .three-reasons__link-item-icon
                  != include('@icon', {icon: 'arrow-right', before: true})
{
  "image": {
    "src": "/images/dummy/dummy-three-reasons.jpg",
    "srcWide": "/images/dummy/dummy-three-reasons-wide.jpg"
  },
  "headline": {
    "level": 2,
    "modifier": "display-1",
    "text": "3 Gründe für die hkk"
  },
  "list": [
    {
      "content": "p Bis zu #[strong 351 €] Krankenkassen-Beitrag im Jahr sparen\n"
    },
    {
      "content": "p Extraleistungen für über #[strong 1.000 €] sichern\n"
    },
    {
      "content": "p Krankenkasse #[strong in wenigen Klicks] wechseln\n"
    }
  ],
  "button": {
    "text": "Jetzt Vorteile sichern",
    "link": "#",
    "modifier": "blue"
  },
  "title": {
    "text": "Vorteile speziell für:"
  },
  "links": [
    {
      "title": "Arbeitnehmer:innen",
      "link": "#",
      "icon": "big-employed"
    },
    {
      "title": "Selbstständige",
      "link": "#",
      "icon": "big-self-employed"
    },
    {
      "title": "Auszubildende",
      "link": "#",
      "icon": "big-trainee"
    },
    {
      "title": "Studierende",
      "link": "#",
      "icon": "big-student"
    },
    {
      "title": "Familien",
      "link": "#",
      "icon": "big-young-family"
    },
    {
      "title": "Weitere",
      "link": "#",
      "icon": "big-more"
    }
  ]
}
  • Content:
    .three-reasons {
      position: relative;
    
      @include mq($from: l) {
        padding: 5rem 4rem;
      }
    
      @include mq($from: xl) {
        padding: 5rem 4.5rem;
      }
    }
    
    .three-reasons__inner {
      position: relative;
    
      @include mq($from: l) {
        align-items: flex-start;
        display: flex;
        justify-content: space-between;
      }
    
      @include mq($from: xl) {
        @include make-container();
      }
    }
    
    .three-reasons__left {
      padding: 5.5rem 3rem 7rem;
    
      @include mq($from: l) {
        padding: 0;
        width: 42%;
      }
    
      @include mq($from: xl) {
        padding-left: 4.5rem;
      }
    
      @include mq($from: xxl) {
        padding-left: 8.5rem;
      }
    }
    
    .three-reasons__right {
      @include mq($from: l) {
        width: 52.5%;
      }
    
      @include mq($from: xl) {
        padding-right: 4.5rem;
        width: 49.5%;
      }
    
      @include mq($from: xxl) {
        padding-right: 8.5rem;
      }
    }
    
    .three-reasons__image {
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    
      @include mq($from: m) {
        height: 100%;
    
        .image {
          height: 100%;
          object-fit: cover;
        }
      }
    }
    
    .three-reasons__headline {
      margin-bottom: 3rem;
    
      .headline--display-1 {
        font-size: 3.6rem;
    
        @include mq($from: m) {
          font-size: 4.5rem;
        }
    
        @include mq($from: l) {
          font-size: 6.5rem;
        }
      }
    }
    
    .three-reasons__list {
      @include list-reset();
    }
    
    .three-reasons__list-item {
      margin-bottom: 1rem;
      padding-left: 2.5rem;
      position: relative;
    
      &:last-child {
        margin-bottom: 0;
      }
    
      @include mq($from: l) {
        padding-left: 3.5rem;
      }
    }
    
    .three-reasons__list-item-icon {
      color: $color-red;
      font-size: 2rem;
      left: 0;
      position: absolute;
      top: 0.5rem;
    }
    
    .three-reasons__list-item-text,
    .three-reasons__link {
      font-size: 1.9rem;
    
      @include mq($from: l) {
        font-size: 2.3rem;
      }
    }
    
    .three-reasons__list-item-text {
      color: $color-blue;
    
      .formatted-text,
      .formatted-text :last-child {
        margin-bottom: 0;
      }
    }
    
    .three-reasons__button {
      margin-top: 3rem;
    
      .button {
        background-color: $color-green-dark;
      }
    
      @include mq($from: m) {
        margin-top: 4rem;
      }
    }
    
    .three-reasons__title {
      .intro {
        font-weight: bold;
        margin: 0 3rem 2.5rem;
    
        @include mq($from: l) {
          margin-left: 0;
          margin-right: 0;
        }
      }
    }
    
    .three-reasons__links,
    .three-reasons__link {
      display: flex;
    }
    
    .three-reasons__links {
      flex-direction: column;
    }
    
    .three-reasons__link-item {
      position: relative;
    
      .three-reasons__link-item-icon {
        margin-top: 0.5rem;
        position: absolute;
        right: 2.5rem;
        top: 50%;
        transform: translateY(-50%);
      }
    
      &:not(:last-child) .three-reasons__link {
        border-bottom: 1px solid $color-blue;
      }
    }
    
    .three-reasons__link-item-icon {
      pointer-events: none;
    
      .icon {
        color: #fff;
        font-size: 2rem;
        margin-right: 0;
      }
    }
    
    .three-reasons__link {
      align-items: center;
      background-color: $color-blue-light;
      padding: 2.5rem 4.5rem 2.1rem 2.5rem;
    
      @include mq($from: l) {
        padding-bottom: 2rem;
        padding-top: 2.3rem;
      }
    
      &:hover,
      &:focus {
        background-color: $color-blue;
      }
    
      &[href] {
        @include link(#fff, #fff);
    
        transition: background-color $default-transition-duration;
      }
    
      .icon-block__icon {
        color: #fff;
        font-size: 4.5rem;
        margin-right: 1.5rem;
        min-width: 2.8rem;
    
        @include mq($from: l) {
          margin-right: 2rem;
        }
      }
    }
    
    .overview-page__three-reasons {
      margin-bottom: 7.5rem;
    
      .three-reasons {
        @include mq($from: xl) {
          padding-left: 4rem;
          padding-left: 4rem;
        }
      }
    
      .three-reasons__inner {
        padding-left: 0;
        padding-right: 0;
      }
    
      .three-reasons__left {
        @include mq($from: xl) {
          padding-left: 4rem;
        }
      }
    
      .three-reasons__right {
        @include mq($from: xl) {
          padding-right: 4rem;
        }
      }
    }
    
  • URL: /components/raw/three-reasons/three-reasons.scss
  • Filesystem Path: src/components/organisms/three-reasons/three-reasons.scss
  • Size: 3.8 KB

There are no notes for this item.