<!-- Default -->
<div class="stage-insert-advantages u-inverted">
    <div class="stage-insert-advantages__side">
        <h1 class="headline headline--headline-1">Günstige Beiträge
        </h1>
        <div class="stage-insert-advantages__content">
            <p>Als Angestellter beträgt Ihr Beitragssatz bei der hkk 15,19 Prozent. Und darin ist Ihr Anspruch auf Krankengeld bereits enthalten.</p>
        </div>
    </div>
    <div class="stage-insert-advantages__side">
        <h1 class="headline headline--headline-1">Bestes Preis-Leistungs-Verhältnis
        </h1>
        <ul class="stage-insert-advantages__list">
            <li class="stage-insert-advantages__list-item">
                <svg class="icon stage-insert-advantages__list-icon icon--checkmark-circle icon--before" id="icon-f84d" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg>Günstigste deutschlandweite Krankenkasse
            </li>
            <li class="stage-insert-advantages__list-item">
                <svg class="icon stage-insert-advantages__list-icon icon--checkmark-circle icon--before" id="icon-222c" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg>Überdurchschnittliche Leistungen für Versicherte
            </li>
            <li class="stage-insert-advantages__list-item">
                <svg class="icon stage-insert-advantages__list-icon icon--checkmark-circle icon--before" id="icon-e3b5" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg>250 Euro Sofortbonus für Gesundheitsaktivitäten im Jahr
            </li>
        </ul>
    </div>
</div>

<!-- Unorder List -->
<div class="stage-insert-advantages u-inverted">
    <div class="stage-insert-advantages__side stage-insert-advantages--default-style">
        <h1 class="headline headline--headline-1">Günstige Beiträge
        </h1>
        <ul class="stage-insert-advantages__list">
            <li class="stage-insert-advantages__list-item">
                <svg class="icon stage-insert-advantages__list-icon icon--checkmark-circle icon--before" id="icon-3853" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg>Günstigste deutschlandweite Krankenkasse
            </li>
            <li class="stage-insert-advantages__list-item">
                <svg class="icon stage-insert-advantages__list-icon icon--checkmark-circle icon--before" id="icon-81b1" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg>Überdurchschnittliche Leistungen für Versicherte
            </li>
            <li class="stage-insert-advantages__list-item">
                <svg class="icon stage-insert-advantages__list-icon icon--checkmark-circle icon--before" id="icon-5bf5" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg>250 Euro Sofortbonus für Gesundheitsaktivitäten im Jahr
            </li>
        </ul>
    </div>
    <div class="stage-insert-advantages__side">
        <h1 class="headline headline--headline-1">Bestes Preis-Leistungs-Verhältnis
        </h1>
        <div class="stage-insert-advantages__content">
            <p>Als Angestellter beträgt Ihr Beitragssatz bei der hkk 15,19 Prozent. Und darin ist Ihr Anspruch auf Krankengeld bereits enthalten.</p>
        </div>
    </div>
</div>

<!-- Order List -->
<div class="stage-insert-advantages u-inverted">
    <div class="stage-insert-advantages__side">
        <h1 class="headline headline--headline-1">Günstige Beiträge
        </h1>
        <div class="stage-insert-advantages__content">
            <p>Als Angestellter beträgt Ihr Beitragssatz bei der hkk 15,19 Prozent. Und darin ist Ihr Anspruch auf Krankengeld bereits enthalten.</p>
        </div>
    </div>
    <div class="stage-insert-advantages__side stage-insert-advantages--default-style">
        <h1 class="headline headline--headline-1">Bestes Preis-Leistungs-Verhältnis
        </h1>
        <ol class="stage-insert-advantages__list">
            <li class="stage-insert-advantages__list-item">
                <svg class="icon stage-insert-advantages__list-icon icon--checkmark-circle icon--before" id="icon-77cd" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg>Günstigste deutschlandweite Krankenkasse
            </li>
            <li class="stage-insert-advantages__list-item">
                <svg class="icon stage-insert-advantages__list-icon icon--checkmark-circle icon--before" id="icon-5a63" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg>Überdurchschnittliche Leistungen für Versicherte
            </li>
            <li class="stage-insert-advantages__list-item">
                <svg class="icon stage-insert-advantages__list-icon icon--checkmark-circle icon--before" id="icon-7cf9" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg>250 Euro Sofortbonus für Gesundheitsaktivitäten im Jahr
            </li>
        </ol>
    </div>
</div>

<!-- Both Listing -->
<div class="stage-insert-advantages u-inverted">
    <div class="stage-insert-advantages__side stage-insert-advantages--default-style">
        <h1 class="headline headline--headline-1">Günstige Beiträge
        </h1>
        <ul class="stage-insert-advantages__list">
            <li class="stage-insert-advantages__list-item">
                <svg class="icon stage-insert-advantages__list-icon icon--checkmark-circle icon--before" id="icon-a9f7" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg>Günstigste deutschlandweite Krankenkasse
            </li>
            <li class="stage-insert-advantages__list-item">
                <svg class="icon stage-insert-advantages__list-icon icon--checkmark-circle icon--before" id="icon-12c3" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg>Überdurchschnittliche Leistungen für Versicherte
            </li>
            <li class="stage-insert-advantages__list-item">
                <svg class="icon stage-insert-advantages__list-icon icon--checkmark-circle icon--before" id="icon-c8d9" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg>250 Euro Sofortbonus für Gesundheitsaktivitäten im Jahr
            </li>
        </ul>
    </div>
    <div class="stage-insert-advantages__side stage-insert-advantages--default-style">
        <h1 class="headline headline--headline-1">Bestes Preis-Leistungs-Verhältnis
        </h1>
        <ol class="stage-insert-advantages__list">
            <li class="stage-insert-advantages__list-item">
                <svg class="icon stage-insert-advantages__list-icon icon--checkmark-circle icon--before" id="icon-7223" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg>Günstigste deutschlandweite Krankenkasse
            </li>
            <li class="stage-insert-advantages__list-item">
                <svg class="icon stage-insert-advantages__list-icon icon--checkmark-circle icon--before" id="icon-a7a7" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg>Überdurchschnittliche Leistungen für Versicherte
            </li>
            <li class="stage-insert-advantages__list-item">
                <svg class="icon stage-insert-advantages__list-icon icon--checkmark-circle icon--before" id="icon-197a" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg>250 Euro Sofortbonus für Gesundheitsaktivitäten im Jahr
            </li>
        </ol>
    </div>
</div>

-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

//- Render stage insert
.stage-insert-advantages.u-inverted&attributes(attr)
  //- Side
  each side in {left, right}
    if side
      if side.defaultOrderStyle
        -
          side.itemAttr = side.itemAttr || {};
          side.itemAttr.class = classList(side.itemAttr.class);
          side.itemAttr.class.push('stage-insert-advantages--default-style');

      .stage-insert-advantages__side&attributes(side.itemAttr)
        //- Headline
        if side.headline
          - side.headlineOptions = Object.assign({}, {text: side.headline}, side.headlineOptions)
          != include('@headline--headline-1', side.headlineOptions)

        //- Content
        if side.content
          .stage-insert-advantages__content
            != renderPug(side.content)

        //- List
        if side.list
          - listType = side.order ? 'ol' : 'ul'
          #{listType}.stage-insert-advantages__list
            each item in side.list
              li.stage-insert-advantages__list-item
                | #[!= include('@icon', {icon: 'checkmark-circle', before: true, attr: {class: 'stage-insert-advantages__list-icon'}})]#{item}
/* Default */
{
  "left": {
    "headline": "Günstige Beiträge",
    "content": "p Als Angestellter beträgt Ihr Beitragssatz bei der hkk 15,19 Prozent. Und darin ist Ihr Anspruch auf Krankengeld bereits enthalten.\n"
  },
  "right": {
    "headline": "Bestes Preis-Leistungs-Verhältnis",
    "list": [
      "Günstigste deutschlandweite Krankenkasse",
      "Überdurchschnittliche Leistungen für Versicherte",
      "250 Euro Sofortbonus für Gesundheitsaktivitäten im Jahr"
    ]
  }
}

/* Unorder List */
{
  "left": {
    "headline": "Günstige Beiträge",
    "content": null,
    "defaultOrderStyle": true,
    "list": [
      "Günstigste deutschlandweite Krankenkasse",
      "Überdurchschnittliche Leistungen für Versicherte",
      "250 Euro Sofortbonus für Gesundheitsaktivitäten im Jahr"
    ]
  },
  "right": {
    "headline": "Bestes Preis-Leistungs-Verhältnis",
    "list": null,
    "content": "p Als Angestellter beträgt Ihr Beitragssatz bei der hkk 15,19 Prozent. Und darin ist Ihr Anspruch auf Krankengeld bereits enthalten.\n"
  }
}

/* Order List */
{
  "left": {
    "headline": "Günstige Beiträge",
    "content": "p Als Angestellter beträgt Ihr Beitragssatz bei der hkk 15,19 Prozent. Und darin ist Ihr Anspruch auf Krankengeld bereits enthalten.\n"
  },
  "right": {
    "headline": "Bestes Preis-Leistungs-Verhältnis",
    "list": [
      "Günstigste deutschlandweite Krankenkasse",
      "Überdurchschnittliche Leistungen für Versicherte",
      "250 Euro Sofortbonus für Gesundheitsaktivitäten im Jahr"
    ],
    "defaultOrderStyle": true,
    "order": true
  }
}

/* Both Listing */
{
  "left": {
    "headline": "Günstige Beiträge",
    "content": null,
    "defaultOrderStyle": true,
    "list": [
      "Günstigste deutschlandweite Krankenkasse",
      "Überdurchschnittliche Leistungen für Versicherte",
      "250 Euro Sofortbonus für Gesundheitsaktivitäten im Jahr"
    ]
  },
  "right": {
    "headline": "Bestes Preis-Leistungs-Verhältnis",
    "list": [
      "Günstigste deutschlandweite Krankenkasse",
      "Überdurchschnittliche Leistungen für Versicherte",
      "250 Euro Sofortbonus für Gesundheitsaktivitäten im Jahr"
    ],
    "defaultOrderStyle": true,
    "content": null,
    "order": true
  }
}

  • Content:
    .stage-insert-advantages {
      color: rgba(#fff, 0.9);
    
      @include mq($from: m) {
        display: flex;
      }
    }
    
    .stage-insert-advantages__side {
      background-color: $color-blue;
      padding: 2rem 2.5rem 2.5rem;
    
      &:first-child {
        background-color: $color-red;
      }
    
      @include mq($from: m) {
        width: 50%;
      }
    
      @include mq($from: l) {
        padding: 3rem 3.5rem 3.5rem;
        width: 60%;
    
        &:first-child {
          width: 40%;
        }
      }
    
      @include mq($from: xl) {
        padding: 4rem 4.5rem 4.5rem;
        width: 66.66%;
    
        &:first-child {
          width: 33.33%;
        }
      }
    }
    
    .stage-insert-advantages__content {
      > :last-child {
        margin-bottom: 0;
      }
    }
    
    .stage-insert-advantages__list {
      @include list-reset();
    
      padding-top: 1rem;
    }
    
    .stage-insert-advantages__list-item {
      margin-bottom: 1rem;
      padding-left: 2.5rem;
      position: relative;
    
      &:last-child {
        margin-bottom: 0;
      }
    
      @include mq($from: l) {
        padding-left: 3.5rem;
      }
    }
    
    .stage-insert-advantages__list-icon {
      color: #fff;
      left: 0;
      position: absolute;
      top: 0.2em;
    }
    
    
    .stage-insert-advantages--default-style {
      .stage-insert-advantages__list-item {
        padding-left: 0;
    
        @include mq($from: m) {
          padding-left: 0.5rem;
        }
      }
    
      .stage-insert-advantages__list-icon {
        display: none;
      }
    
      // stylelint-disable selector-no-qualifying-type
      ul.stage-insert-advantages__list {
        list-style: disc;
        padding-left: 2rem;
      }
    
      ol.stage-insert-advantages__list {
        list-style: decimal;
        padding-left: 2rem;
      }
    }
    
  • URL: /components/raw/stage-insert-advantages/stage-insert-advantages.scss
  • Filesystem Path: src/components/organisms/stage-insert-advantages/stage-insert-advantages.scss
  • Size: 1.5 KB

There are no notes for this item.