<!-- Text/Button (ohne Labels) -->
<div class="breaker">
    <div class="breaker__inner">
        <div class="breaker__side breaker__side--red u-inverted breaker__side--small">
            <div class="breaker__headline">
                <h2 class="headline headline--display-2">Krankenkasse wechseln?
                </h2>
            </div>
            <div class="breaker__content">
                <p>Lorem ipsum dolor sit amet, conetetur sadipscing elitr, adipscing elitr, sed diam nonumyd diam nonumy eirmod tempor invidunt ut labore et.</p>
            </div>
        </div>
        <div class="breaker__side breaker__side--blue u-inverted breaker__side--large">
            <div class="breaker__icon">
                <svg class="icon icon--big-anchor" id="icon-142c" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-big-anchor"></use>
</svg>
            </div>
            <div class="breaker__headline">
                <h2 class="headline headline--display-2">Die hkk ist die günstigste Krankenkasse bei überdurchschnittlicher Leistung
                </h2>
            </div>
            <div class="breaker__buttons">
                <div class="breaker__button">
                    <a class="button button--white-blue button--outline" id="button-6b3c" href="#">Infos anfordern
</a>
                </div>
                <div class="breaker__button">
                    <a class="button button--white-blue" id="button-463d" href="#">Mitglied werden
</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Text/Button (mit kleinen Überschriften) -->
<div class="breaker">
    <div class="breaker__inner">
        <div class="breaker__side breaker__side--red u-inverted breaker__side--small">
            <div class="breaker__headline">
                <h2 class="headline headline--display-3">Krankenkasse wechseln?
                </h2>
            </div>
            <div class="breaker__content">
                <p>Lorem ipsum dolor sit amet, conetetur sadipscing elitr, adipscing elitr, sed diam nonumyd diam nonumy eirmod tempor invidunt ut labore et.</p>
            </div>
        </div>
        <div class="breaker__side breaker__side--blue u-inverted breaker__side--large">
            <div class="breaker__icon">
                <svg class="icon icon--big-anchor" id="icon-0e01" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-big-anchor"></use>
</svg>
            </div>
            <div class="breaker__headline">
                <h2 class="headline headline--display-3">Die hkk ist die günstigste Krankenkasse bei überdurchschnittlicher Leistung
                </h2>
            </div>
            <div class="breaker__buttons">
                <div class="breaker__button">
                    <a class="button button--white-blue button--outline" id="button-77a7" href="#">Infos anfordern
</a>
                </div>
                <div class="breaker__button">
                    <a class="button button--white-blue" id="button-7ec2" href="#">Mitglied werden
</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Text/Button (mit Labels) -->
<div class="breaker">
    <div class="breaker__inner">
        <div class="breaker__side breaker__side--red u-inverted breaker__side--small">
            <div class="breaker__headline">
                <h2 class="headline headline--display-2">Krankenkasse wechseln?
                </h2>
            </div>
            <div class="breaker__content">
                <p>Lorem ipsum dolor sit amet, conetetur sadipscing elitr, adipscing elitr, sed diam nonumyd diam nonumy eirmod tempor invidunt ut labore et.</p>
            </div>
        </div>
        <div class="breaker__side breaker__side--blue u-inverted breaker__side--large">
            <div class="breaker__icon">
                <svg class="icon icon--big-anchor" id="icon-c0a1" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-big-anchor"></use>
</svg>
            </div>
            <div class="breaker__headline">
                <h2 class="headline headline--display-2">So einfach geht der Wechsel zur hkk
                </h2>
            </div>
            <div class="breaker__buttons">
                <div class="breaker__button">
                    <div class="breaker__button-label">Online-Mitgliedsantrag ausfüllen</div>
                    <a class="button button--white-blue button--outline" id="button-3209" href="#">Zum Mitgliedsantrag
</a>
                </div>
                <div class="breaker__button">
                    <div class="breaker__button-label">Alte Krankenkasse kündigen</div>
                    <a class="button button--white-blue" id="button-23a5" href="#">Musterkündigung (PDF)
</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Text/Formular -->
<div class="breaker">
    <div class="breaker__inner">
        <div class="breaker__side breaker__side--red u-inverted breaker__side--small">
            <div class="breaker__headline">
                <h2 class="headline headline--display-2">Krankenkasse wechseln
                </h2>
            </div>
            <div class="breaker__content">
                <p>Das geht einfacher als man denkt.</p>
            </div>
            <div class="breaker__buttons">
                <div class="breaker__button">
                    <a class="button button--white-red" id="button-8bfb" href="#">Alle Infos
</a>
                </div>
            </div>
        </div>
        <div class="breaker__side breaker__side--large">
            <div class="breaker__headline">
                <h2 class="headline headline--display-2">Mit der hkk kann jeder Beiträge sparen
                </h2>
            </div>
            <div class="breaker__content">
                <form class="form form--inline" action="/templates/vorteilsrechner.html" method="get">
                    <div class="form__inner">
                        <div class="form-group">
                            <label class="label" for="current-health-insurance">Aktuelle Krankenkasse</label>
                            <div class="form-group__inner">
                                <select class="select" required="required" id="current-health-insurance" name="current-health-insurance">
  <option class="select__hint" disabled="disabled" selected="selected" value="">Auswählen</option>
  <option value="aok-bayern">AOK Bayern</option>
  <option value="bkk-akzo-nobel-bayern">BKK Akzo Nobel Bayern</option>
</select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="label" for="gross-income">Mtl. Bruttoeinkommen</label>
                            <div class="form-group__inner">
                                <input class="input input--text" type="text" required="required" id="gross-income" name="gross-income" />
                            </div>
                        </div>
                        <div class="form__submit form__submit--nextline">
                            <input class="button button--blue" type="submit" value="Vorteil berechnen" />
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Kleine Variante -->
<div class="breaker">
    <div class="breaker__inner">
        <div class="breaker__side breaker__side--red u-inverted">
            <div class="breaker__headline">
                <h2 class="headline headline--display-2">Warum wechseln?
                </h2>
            </div>
            <div class="breaker__content">
                <p>Die hkk ist die günstigste Krankenkasse in ganz Deutschland.</p>
            </div>
            <div class="breaker__buttons">
                <div class="breaker__button">
                    <a class="button button--white-red" id="button-9a37" href="#">Vorteil berechnen
</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Formular (wide) -->
<div class="breaker">
    <div class="breaker__inner">
        <div class="breaker__side breaker__side--large breaker__side--wide">
            <div class="breaker__headline">
                <h2 class="headline headline--display-2"><span class="headline__kicker"><span class="headline__kicker-text">Newsletter<span class="u-hidden-visually">: </span></span>
                    </span>Kostenlos alle 14 Tage die interessantesten Gesundheitsinfos
                </h2>
            </div>
            <div class="breaker__content">
                <form class="form form--inline" action="/templates/vorteilsrechner.html" method="get">
                    <div class="form__inner">
                        <div class="form-group">
                            <label class="label" for="email-address"></label>
                            <div class="form-group__inner">
                                <input class="input input--text" type="text" placeholder="Ihre E-Mail-Adresse" required="required" id="email-address" name="email-address" />
                            </div>
                        </div>
                        <div class="form__submit">
                            <input class="button button--blue" type="submit" value="Weiter" />
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="breaker__side breaker__side--small breaker__side--wide">
            <div class="breaker__icon">
                <svg class="icon icon--mail" id="icon-be2c" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-mail"></use>
</svg>
            </div>
        </div>
    </div>
</div>

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

//- Render breaker
.breaker&attributes(attr)
  //- Inner
  .breaker__inner
    //- Render left and right side
    each options in {left, right}
      //- Render side
      if options
        - var classes = [];
        - if (options.color) classes.push(`breaker__side--${options.color}`);
        - if (options.color && ['red', 'blue'].includes(options.color)) classes.push('u-inverted');
        - if (left && right && options.size == 'small') classes.push('breaker__side--small');
        - if (left && right && options.size == 'large') classes.push('breaker__side--large');
        - if (left && right && options.wide) classes.push('breaker__side--wide');

        .breaker__side(class=classes)
          //- Icon
          if options.icon
            .breaker__icon
              != include('@icon', { icon: options.icon })

          //- Headline
          if options.headline
            .breaker__headline
              != include(`@headline--display-${options.headline.size || 2}`, { text: options.headline.text, kicker: options.kicker, level: 2, attr: headlineAttr })

          //- Content
          if options.content
            .breaker__content
              != renderPug(options.content)

          //- Buttons
          if options.buttons
            //- Button group
            .breaker__buttons
              each button in options.buttons
                //- Single button with/without label
                .breaker__button
                  //- Button label
                  if button.label
                    .breaker__button-label #{button.label}

                  //- Button
                  != include('@button', button)
/* Text/Button (ohne Labels) */
{
  "left": {
    "size": "small",
    "color": "red",
    "headline": {
      "text": "Krankenkasse wechseln?"
    },
    "content": "p Lorem ipsum dolor sit amet, conetetur sadipscing elitr, adipscing elitr, sed diam nonumyd diam nonumy eirmod tempor invidunt ut labore et.\n"
  },
  "right": {
    "size": "large",
    "icon": "big-anchor",
    "color": "blue",
    "headline": {
      "text": "Die hkk ist die günstigste Krankenkasse bei überdurchschnittlicher Leistung"
    },
    "buttons": [
      {
        "text": "Infos anfordern",
        "link": "#",
        "color": "white-blue",
        "outline": true
      },
      {
        "text": "Mitglied werden",
        "link": "#",
        "color": "white-blue"
      }
    ]
  }
}

/* Text/Button (mit kleinen Überschriften) */
{
  "left": {
    "size": "small",
    "color": "red",
    "headline": {
      "text": "Krankenkasse wechseln?",
      "size": 3
    },
    "content": "p Lorem ipsum dolor sit amet, conetetur sadipscing elitr, adipscing elitr, sed diam nonumyd diam nonumy eirmod tempor invidunt ut labore et.\n"
  },
  "right": {
    "size": "large",
    "icon": "big-anchor",
    "color": "blue",
    "headline": {
      "text": "Die hkk ist die günstigste Krankenkasse bei überdurchschnittlicher Leistung",
      "size": 3
    },
    "buttons": [
      {
        "text": "Infos anfordern",
        "link": "#",
        "color": "white-blue",
        "outline": true
      },
      {
        "text": "Mitglied werden",
        "link": "#",
        "color": "white-blue"
      }
    ]
  }
}

/* Text/Button (mit Labels) */
{
  "left": {
    "size": "small",
    "color": "red",
    "headline": {
      "text": "Krankenkasse wechseln?"
    },
    "content": "p Lorem ipsum dolor sit amet, conetetur sadipscing elitr, adipscing elitr, sed diam nonumyd diam nonumy eirmod tempor invidunt ut labore et.\n"
  },
  "right": {
    "size": "large",
    "icon": "big-anchor",
    "color": "blue",
    "headline": {
      "text": "So einfach geht der Wechsel zur hkk"
    },
    "buttons": [
      {
        "text": "Zum Mitgliedsantrag",
        "label": "Online-Mitgliedsantrag ausfüllen",
        "outline": true,
        "color": "white-blue",
        "link": "#"
      },
      {
        "text": "Musterkündigung (PDF)",
        "label": "Alte Krankenkasse kündigen",
        "color": "white-blue",
        "link": "#"
      }
    ]
  }
}

/* Text/Formular */
{
  "left": {
    "size": "small",
    "color": "red",
    "headline": {
      "text": "Krankenkasse wechseln"
    },
    "content": "p Das geht einfacher als man denkt.\n",
    "buttons": [
      {
        "text": "Alle Infos",
        "color": "white-red",
        "link": "#"
      }
    ]
  },
  "right": {
    "size": "large",
    "icon": null,
    "color": null,
    "headline": {
      "text": "Mit der hkk kann jeder Beiträge sparen"
    },
    "buttons": null,
    "content": "!= include('@form--inline', { submitOptions: { modifier: 'blue', nextLine: true }})\n"
  }
}

/* Kleine Variante */
{
  "left": {
    "size": "small",
    "color": "red",
    "headline": {
      "text": "Warum wechseln?"
    },
    "content": "p Die hkk ist die günstigste Krankenkasse in ganz Deutschland.\n",
    "buttons": [
      {
        "text": "Vorteil berechnen",
        "color": "white-red",
        "link": "#"
      }
    ]
  },
  "right": null
}

/* Formular (wide) */
{
  "left": {
    "size": "large",
    "color": null,
    "headline": {
      "text": "Kostenlos alle 14 Tage die interessantesten Gesundheitsinfos"
    },
    "content": "!= include('@form--inline', { submit: 'Weiter', submitOptions: { modifier: 'blue' }, elements: [{ label: '', id: 'email-address', use: 'input--text', settings: { placeholder: 'Ihre E-Mail-Adresse', required: true }}] })\n",
    "wide": true,
    "kicker": "Newsletter"
  },
  "right": {
    "size": "small",
    "icon": "mail",
    "color": null,
    "headline": null,
    "buttons": null,
    "wide": true,
    "content": null
  }
}

  • Content:
    $breaker-breakpoint: 768px;
    
    // Breaker container
    .breaker {
      margin-bottom: 1rem;
      overflow: hidden;
    
      @include mq($from: m) {
        margin-bottom: 2rem;
      }
    
      @include mq($from: l) {
        margin-bottom: 6rem;
      }
    }
    
    // Hacky non-BEM-way because of backend integration
    // TODO: Refactor
    .breaker-full-width {
      margin-bottom: 1rem;
    
      @include mq($from: m) {
        margin-bottom: 2rem;
      }
    
      @include mq($from: l) {
        margin-bottom: 6rem;
      }
    }
    
    // Inner max-width container
    .breaker__inner {
      margin-left: auto;
      margin-right: auto;
      max-width: $page-inner-max-width;
    
      @include mq($from: $breaker-breakpoint) {
        display: flex;
      }
    }
    
    // Side
    .breaker__side {
      background-color: $color-steelgrey-light;
      padding: 2rem 2rem 1rem;
      position: relative;
    
      &:not(:only-child) {
        padding: 3rem 3.5rem 2rem;
      }
    
      @include mq($from: $breaker-breakpoint) {
        display: flex;
        flex-basis: 100%;
        flex-direction: column;
        justify-content: flex-start;
        max-width: 100%;
      }
    
      @include mq($from: l) {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    
        &:not(:only-child) {
          padding-left: 5rem;
          padding-right: 5rem;
        }
      }
    
      @include mq($from: xl) {
        &:not(:only-child) {
          padding-left: 6rem;
          padding-right: 6rem;
        }
    
        // Pseudo-backgrounds which fill the empty space on both edges
        &::before,
        &::after {
          background-color: $color-steelgrey-light;
        }
    
        &:nth-child(odd)::before,
        &:only-child::after,
        &:nth-child(even)::after {
          content: '';
          height: 100%;
          position: absolute;
          top: 0;
          width: 100vw;
        }
    
        &:nth-child(odd)::before {
          left: 0;
          transform: translateX(-100%) translateX(1px);
        }
    
        &:only-child::after,
        &:nth-child(even)::after {
          right: 0;
          transform: translateX(100%) translateX(-1px);
        }
      }
    }
    
    .breaker__side--small {
      @include mq($from: $breaker-breakpoint) {
        flex-basis: 33.33%;
        max-width: 33.33%;
      }
    }
    
    .breaker__side--large {
      @include mq($from: $breaker-breakpoint) {
        flex-basis: 66.66%;
        max-width: 66.66%;
      }
    }
    
    // Wide version
    .breaker__side--wide {
      @include mq($from: xl) {
        .breaker__icon {
          right: 15rem;
        }
    
        &:not(:only-child) {
          padding-left: 9rem;
          padding-right: 9rem;
        }
      }
    }
    
    .breaker__side--wide.breaker__side--small {
      @include mq($until: $breaker-breakpoint) {
        padding: 0;
      }
    
      @include mq($from: $breaker-breakpoint) {
        flex-basis: 33.33%;
        max-width: 33.33%;
      }
    }
    
    .breaker__side--wide.breaker__side--large {
      .breaker__headline {
        max-width: 100%;
      }
    
      @include mq($from: $breaker-breakpoint) {
        flex-basis: 66.66%;
        max-width: 66.66%;
      }
    }
    
    // Side colors
    .breaker__side--blue {
      color: rgba(#fff, 0.9);
    
      &,
      &::before,
      &::after {
        background-color: $color-blue;
      }
    }
    
    .breaker__side--red {
      color: rgba(#fff, 0.9);
    
      &,
      &::before,
      &::after {
        background-color: $color-red;
      }
    }
    
    // Icon
    .breaker__icon {
      display: none;
    
      @include mq($from: $breaker-breakpoint) {
        display: block;
        font-size: 20rem;
        opacity: 0.1;
        position: absolute;
        right: 3.5rem;
        top: 50%;
        transform: translate(0, -50%);
        user-select: none;
      }
    }
    
    // Headline, content, buttons
    .breaker__headline {
      .headline__kicker {
        color: $color-blue;
        margin: 1rem 0;
      }
    }
    
    .breaker__headline,
    .breaker__content {
      margin-bottom: 1.5rem;
    
      @include mq($from: $breaker-breakpoint) {
        margin-bottom: 0;
      }
    }
    
    .breaker__side--large .breaker__headline {
      @include mq($from: $breaker-breakpoint) {
        max-width: 80%;
      }
    
      @include mq($from: xl) {
        max-width: 60%;
      }
    }
    
    .breaker__headline ~ .breaker__content > :first-child:not(p),
    .breaker__headline + .breaker__buttons {
      @include mq($from: $breaker-breakpoint) {
        padding-top: 0.5rem;
      }
    }
    
    .breaker__content {
      @include mq($from: $breaker-breakpoint) {
        margin-bottom: 2rem;
    
        > p:last-child {
          margin-bottom: 0;
        }
      }
    }
    
    .breaker__buttons {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 1rem;
      margin-top: 3rem;
    
      @include mq($from: $breaker-breakpoint) {
        margin-top: auto;
      }
    }
    
    .breaker__button {
      margin-right: 1.5rem;
    
      &:not(:last-child) {
        margin-bottom: 1rem;
      }
    
      @include mq($from: $breaker-breakpoint) {
        margin-bottom: 1rem;
      }
    }
    
    .breaker__button-label {
      font-size: 1.5rem;
      margin-bottom: 1rem;
      margin-top: 1rem;
    }
    
  • URL: /components/raw/breaker/breaker.scss
  • Filesystem Path: src/components/organisms/breaker/breaker.scss
  • Size: 4.4 KB

There are no notes for this item.