hkk Frontend 2017

Bühnen-Einschub (Vorteile) 

<!-- 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-58c5" 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-d85f" 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-a992" 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-360d" 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-2e6a" 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-9e17" 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-7e4b" 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-9fcf" 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-dca8" 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-af3e" 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-9046" 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-7ab9" 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-c8b8" 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-80a6" 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-1c83" 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.