hkk Frontend 2017

Störer 

<!-- 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-c2b7" 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-553f" href="#">Infos anfordern
</a>
                </div>
                <div class="breaker__button">
                    <a class="button button--white-blue" id="button-a62e" 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-8b4d" 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-d639" href="#">Infos anfordern
</a>
                </div>
                <div class="breaker__button">
                    <a class="button button--white-blue" id="button-ad44" 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-2586" 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-c058" 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-38bd" 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-847d" 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-eae4" 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-923a" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-mail"></use>
</svg>
            </div>
        </div>
    </div>
</div>


<!-- Text/Button (Auswahlfeld mit Suche) -->
<div class="breaker breaker--autocomplete-search">
    <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-72ec" 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-choices js-select-choices select-choices--autocomplete-search" id="current-health-insurance" name="current-health-insurance" data-url="/data/krankenkasse.json">
  <option value="none" placeholder="placeholder">Aktuelle Krankenkasse</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>


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

  if (autocomplete) {
    attr.class.push('breaker--autocomplete-search');
  }

//- 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
  }
}


/* Text/Button (Auswahlfeld mit Suche) */
{
  "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-autocomplete-search', { submitOptions: { modifier: 'blue', nextLine: true }})\n"
  },
  "autocomplete": true
}
  • 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;
  }

  @include mq($from: xl) {
    &:last-child {
      margin-bottom: 0;
    }
  }
}

// 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;
}

.breaker--autocomplete-search {
  overflow: visible;

  .form__inner .form-group {
    width: 100%;

    @include mq($from: m) { 
      width: 50%;
    }
  }
}
  • URL: /components/raw/breaker/breaker.scss
  • Filesystem Path: src/components/organisms/breaker/breaker.scss
  • Size: 4.7 KB

There are no notes for this item.