Störer: Text/Formular

HTML
View
Context
Assets
Info
Notes


        
        <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-7c32" 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>


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


        
            
            {
  "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"
  }
}

File:

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

Handle: @breaker--text-with-form
Variants (7): Text/Button (ohne Labels) , Text/Button (mit kleinen Überschriften) , Text/Button (mit Labels) , Text/Formular , Kleine Variante , Formular (wide) , Text/Button (Auswahlfeld mit Suche)
Preview:
- With layout
- Component only
Filesystem Path: src/components/organisms/breaker/breaker.pug
References (2): @icon, @button

There are no notes for this item.

Störer: Text/Formular

Eingabefeld

Sternebewertung

Mitglied Werden Link

Tabelle

Figure

Eingabegruppe

Vorteilsrechner

Contacts

Slider

WFFM Formular