<div class="faq-news">
    <div class="faq-news__inner">
        <div class="faq-news__faq-wrap">
            <div class="faq-news__image"><img class="image" alt="Alt Text sieht anders aus" src="/images/dummy/dummy-faq-news-faq.svg" />
            </div>
            <div class="faq-news__faq-links"><a class="faq-news__faq-link" href="#">Bietet die hkk ein Bonusprogramm?</a><a class="faq-news__faq-link" href="#">Wer zahlt die professionelle Zahnreinigung?</a><a class="faq-news__faq-link" href="#">Krankmeldung &amp; Krankengeld - was gibt es zu beachten?</a>
                <a
                    class="faq-news__faq-link" href="#">Wie bin ich im Ausland versichert?</a>
            </div>
            <div class="faq-news__faq-more"><a class="teaser-link" href=""><span class="teaser-link__inner">Alle Fragen und Antworten</span>
<svg class="icon icon--arrow-right" id="icon-ec28" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
            </div>
        </div>
        <div class="faq-news__news-wrap">
            <div class="faq-news__news-items">
                <div class="faq-news__news-item">
                    <div class="faq-news__news-item-image"><img class="image" alt="Alt Text sieht anders aus" src="/images/dummy/dummy-faq-news-teaser-1.jpg" />
                    </div>
                    <div class="faq-news__news-item-content">
                        <div class="faq-news__news-item-headline">
                            <h2 class="headline headline--headline-2">Gesund grillen
                            </h2>
                        </div>
                        <p class="faq-news__news-item-text">Sommer: Die wärmste Jahreszeit verbinden wir mit hohen Temperaturen, Baden im Freien sowie Grillen auf der Terrasse oder dem Balkon. Aber auch mit Mückenstichen und schwülen Nächten. Lesen Sie, wie man den Sommer genießen - und
                            sehr heiße Tage gut überstehen kann.</p><a class="teaser-link faq-news__link" href="#"><span class="teaser-link__inner">Weitere Informationen</span>
<svg class="icon icon--arrow-right" id="icon-0a2e" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                    <a class="faq-news__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
                </div>
                <div class="faq-news__news-item faq-news__news-item--right">
                    <div class="faq-news__news-item-image"><img class="image" alt="Alt Text sieht anders aus" src="/images/dummy/dummy-faq-news-teaser-2.jpg" />
                    </div>
                    <div class="faq-news__news-item-content">
                        <div class="faq-news__news-item-headline">
                            <h2 class="headline headline--headline-2">Gesund grillen
                            </h2>
                        </div>
                        <p class="faq-news__news-item-text">Sommer: Die wärmste Jahreszeit verbinden wir mit hohen Temperaturen, Baden im Freien sowie Grillen auf der Terrasse oder dem Balkon. Aber auch mit Mückenstichen und schwülen Nächten. Lesen Sie, wie man den Sommer genießen - und
                            sehr heiße Tage gut überstehen kann.</p><a class="teaser-link faq-news__link" href="#"><span class="teaser-link__inner">Weitere Informationen</span>
<svg class="icon icon--arrow-right" id="icon-d3ed" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                    <a class="faq-news__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
                </div>
                <div class="faq-news__news-item">
                    <div class="faq-news__news-item-content">
                        <div class="faq-news__news-item-headline">
                            <h2 class="headline headline--headline-2">Gesund grillen
                            </h2>
                        </div>
                        <p class="faq-news__news-item-text">Sommer: Die wärmste Jahreszeit verbinden wir mit hohen Temperaturen, Baden im Freien sowie Grillen auf der Terrasse oder dem Balkon. Aber auch mit Mückenstichen und schwülen Nächten. Lesen Sie, wie man den Sommer genießen - und
                            sehr heiße Tage gut überstehen kann.</p><a class="teaser-link faq-news__link" href="#"><span class="teaser-link__inner">Weitere Informationen</span>
<svg class="icon icon--arrow-right" id="icon-35ae" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                    <a class="faq-news__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
                </div>
                <div class="faq-news__news-item">
                    <div class="faq-news__news-item-content">
                        <div class="faq-news__news-item-headline">
                            <h2 class="headline headline--headline-2">Gesund grillen
                            </h2>
                        </div>
                        <p class="faq-news__news-item-text">Sommer: Die wärmste Jahreszeit verbinden wir mit hohen Temperaturen, Baden im Freien sowie Grillen auf der Terrasse oder dem Balkon. Aber auch mit Mückenstichen und schwülen Nächten. Lesen Sie, wie man den Sommer genießen - und
                            sehr heiße Tage gut überstehen kann.</p><a class="teaser-link faq-news__link" href="#"><span class="teaser-link__inner">Weitere Informationen</span>
<svg class="icon icon--arrow-right" id="icon-627c" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
                    </div>
                    <a class="faq-news__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
                </div>
            </div>
            <div class="faq-news__news-more"><a class="teaser-link" href=""><span class="teaser-link__inner">Mehr Infos zu Corona</span>
<svg class="icon icon--arrow-right" id="icon-3f45" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
            </div>
        </div>
    </div>
</div>
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

//- Render faq+news
.faq-news&attributes(attr)
  .faq-news__inner
    if image || links || more
      .faq-news__faq-wrap
        if image
          .faq-news__image
            != include('@image', {image})

        if links
          .faq-news__faq-links
            each link in links
              a.faq-news__faq-link(href=link.url) #{link.text}

        if more
          .faq-news__faq-more
            != include('@teaser-link', { text: more })

    if newsItems || moreNews
      .faq-news__news-wrap
        if newsItems
          .faq-news__news-items
            each newsItem in newsItems
              - var teaserAttrs = { };
              - if (newsItem.right) teaserAttrs.class = ['faq-news__news-item--right'];

              .faq-news__news-item&attributes(teaserAttrs)
                if newsItem.image
                  .faq-news__news-item-image
                    != include('@image', {image: newsItem.image})

                .faq-news__news-item-content
                  if newsItem.headline
                    .faq-news__news-item-headline
                      != include('@headline', newsItem.headline)

                  if newsItem.text
                    p.faq-news__news-item-text #{newsItem.text}

                  if moreNews
                    != include('@teaser-link', { link: newsItem.link, text: 'Weitere Informationen', attr: { class: 'faq-news__link' } })

                //- Faux link
                a.faq-news__overlay-link(href=newsItem.link, tabindex='-1', aria-hidden='true')

        if moreNews
          .faq-news__news-more
            != include('@teaser-link', { text: moreNews })
{
  "image": "/images/dummy/dummy-faq-news-faq.svg",
  "more": "Alle Fragen und Antworten",
  "links": [
    {
      "url": "#",
      "text": "Bietet die hkk ein Bonusprogramm?"
    },
    {
      "url": "#",
      "text": "Wer zahlt die professionelle Zahnreinigung?"
    },
    {
      "url": "#",
      "text": "Krankmeldung & Krankengeld - was gibt es zu beachten?"
    },
    {
      "url": "#",
      "text": "Wie bin ich im Ausland versichert?"
    }
  ],
  "newsItems": [
    {
      "link": "#",
      "image": "/images/dummy/dummy-faq-news-teaser-1.jpg",
      "text": "Sommer: Die wärmste Jahreszeit verbinden wir mit hohen Temperaturen, Baden im Freien sowie Grillen auf der Terrasse oder dem Balkon. Aber auch mit Mückenstichen und schwülen Nächten. Lesen Sie, wie man den Sommer genießen - und sehr heiße Tage gut überstehen kann.",
      "headline": {
        "level": 2,
        "modifier": "headline-2",
        "text": "Gesund grillen"
      }
    },
    {
      "right": true,
      "link": "#",
      "image": "/images/dummy/dummy-faq-news-teaser-2.jpg",
      "text": "Sommer: Die wärmste Jahreszeit verbinden wir mit hohen Temperaturen, Baden im Freien sowie Grillen auf der Terrasse oder dem Balkon. Aber auch mit Mückenstichen und schwülen Nächten. Lesen Sie, wie man den Sommer genießen - und sehr heiße Tage gut überstehen kann.",
      "headline": {
        "level": 2,
        "modifier": "headline-2",
        "text": "Gesund grillen"
      }
    },
    {
      "link": "#",
      "text": "Sommer: Die wärmste Jahreszeit verbinden wir mit hohen Temperaturen, Baden im Freien sowie Grillen auf der Terrasse oder dem Balkon. Aber auch mit Mückenstichen und schwülen Nächten. Lesen Sie, wie man den Sommer genießen - und sehr heiße Tage gut überstehen kann.",
      "headline": {
        "level": 2,
        "modifier": "headline-2",
        "text": "Gesund grillen"
      }
    },
    {
      "link": "#",
      "text": "Sommer: Die wärmste Jahreszeit verbinden wir mit hohen Temperaturen, Baden im Freien sowie Grillen auf der Terrasse oder dem Balkon. Aber auch mit Mückenstichen und schwülen Nächten. Lesen Sie, wie man den Sommer genießen - und sehr heiße Tage gut überstehen kann.",
      "headline": {
        "level": 2,
        "modifier": "headline-2",
        "text": "Gesund grillen"
      }
    }
  ],
  "moreNews": "Mehr Infos zu Corona"
}
  • Content:
    .faq-news {
      background-color: $color-steelgrey-xlight;
    
      @include mq($from: l) {
        padding: 5rem 4rem;
      }
    
      @include mq($from: xl) {
        padding: 5rem 9.5rem;
      }
    }
    
    .faq-news__inner {
      @include mq($from: l) {
        align-items: flex-start;
        display: flex;
        justify-content: space-between;
      }
    }
    
    .faq-news__faq-wrap {
      background-color: $color-blue;
      color: #fff;
      padding: 4.5rem 3rem;
    
      @include mq($from: l) {
        width: 42%;
      }
    
      @include mq($from: xl) {
        padding: 4rem 4rem 4.5rem;
      }
    }
    
    .faq-news__faq-links,
    .faq-news__faq-link {
      display: block;
      width: 100%;
    }
    
    .faq-news__faq-link {
      border-bottom: 0.1rem solid rgba(#000, 0.2);
      font-weight: bold;
      padding: 2rem 0;
    }
    
    .faq-news__faq-more {
      margin-top: 3rem;
    
      .teaser-link .teaser-link__inner {
        color: #fff;
      }
    }
    
    .faq-news__image {
      margin-bottom: 2.5rem;
    
      .image {
        height: 6.5rem;
        width: 6.5rem;
    
        @include mq($from: l) {
          height: 7.5rem;
          width: 7.5rem;
        }
      }
    }
    
    .faq-news__news-wrap {
      padding: 3rem 1rem 7rem;
    
      @include mq($from: l) {
        padding: 0;
        width: 52%;
      }
    
      @include mq($from: xl) {
        width: 46.5%;
      }
    }
    
    .faq-news__news-item {
      border-bottom: 0.1rem solid rgba(#000, 0.15);
      padding: 2.5rem 2rem;
      position: relative;
      width: 100%;
    
      @include mq($from: m) {
        align-items: flex-start;
        display: flex;
      }
    
      @include mq($from: l) {
        padding: 2rem 0 2.5rem;
      }
    }
    
    .faq-news__news-item--right {
      flex-direction: row-reverse;
    }
    
    .faq-news__news-item-image {
      margin-bottom: $spacer;
    
      @include mq($from: m) {
        flex: 1 1 20rem;
        margin-bottom: 0;
        margin-right: 2rem;
        margin-top: 0.5rem;
      }
    
      @include mq($from: l) {
        margin-right: 2.5rem;
      }
    
      .faq-news__news-item--right & {
        @include mq($from: m) {
          margin-left: 2rem;
          margin-right: 0;
        }
    
        @include mq($from: l) {
          margin-left: 2.5rem;
        }
      }
    }
    
    .faq-news__news-item-headline .headline {
      margin-bottom: 0.5rem;
    
      @include mq($from: m) {
        margin-bottom: 0.75rem;
      }
    }
    
    .faq-news__news-item-image + .faq-news__news-item-content {
      @include mq($from: m) {
        width: calc(100% - 23.5%);
      }
    }
    
    .faq-news__news-item-text {
      font-size: 1.4rem;
    }
    
    .faq-news__news-more {
      margin: 2.5rem 2.5rem 0;
    
      @include mq($from: l) {
        margin-left: 0;
        margin-right: 0;
      }
    }
    
    .faq-news__link {
      .faq-news__news-item:focus &,
      .faq-news__news-item:hover & {
        text-decoration: underline;
      }
    
      .icon {
        vertical-align: -0.2em;
      }
    }
    
    .faq-news__overlay-link {
      bottom: 0;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      user-select: none;
      z-index: 1;
    }
    
    .overview-page__faq-news {
      .overview-page__container {
        max-width: 119rem;
        padding-left: 0;
        padding-right: 0;
      }
    
      .faq-news {
        @include mq($from: xl) {
          margin-bottom: 5rem;
          padding-left: 4rem;
          padding-right: 9rem;
        }
      }
    }
    
  • URL: /components/raw/faq-news/faq-news.scss
  • Filesystem Path: src/components/organisms/faq-news/faq-news.scss
  • Size: 2.9 KB

There are no notes for this item.