hkk Frontend 2017

Three Reasons 

<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-18a1" 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-0f86" 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-1da4" 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-0553" 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-b9ae" 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-c092" 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-cff6" 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-fdc3" 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-f909" 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-b1de" 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-44ee" 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-4f9d" 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-2ba9" 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-2484" 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-889a" 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-8de9" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <button class="copyright js-tooltip three-reasons__copyright" title="Lorem ipsum dolor sit amet, consectetuer adipiscin" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-d51a" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
</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, copyright: false })

  .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})
  //- Copyright
  if copyright
    != include('@copyright', {title: copyright, attr: {class: 'three-reasons__copyright'}})
 
{
  "image": {
    "src": "/images/dummy/dummy-three-reasons.jpg",
    "srcWide": "/images/dummy/dummy-three-reasons-wide.jpg"
  },
  "copyright": "Lorem ipsum dolor sit amet, consectetuer adipiscin",
  "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;
    }
  }
}

.three-reasons__copyright {
  bottom: 0;
  position: absolute;
  right: 0;
}
  • 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.