hkk Frontend 2017

Bühnen-Einschub (Career) 

<div class="stage-insert-career u-inverted">
    <div class="stage-insert-career__inner">
        <div class="stage-insert-career__img">
            <figure class="figure" aria-labelledby="figure-0e73">
                <div class="figure__media">
                    <img class="image" alt="Das ist ein Platzhalter-Bild" width="386" height="386" src="/images/dummy/stage-insert-career-img.png" />
                </div>
            </figure>
        </div>
        <div class="stage-insert-career__content">
            <div class="stage-insert-career__content-headline">
                <h1 class="headline headline--display-1">Top arbeitgeber. Top möglichkeiten.
                </h1>
            </div>
            <div class="stage-insert-career__content-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
            <a class="button button--white-blue button--outline" id="button-ea7f" href="#">Zu den Stellenangeboten
</a>
        </div>
    </div>
</div>
 
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

//- Render stage insert
.stage-insert-career.u-inverted&attributes(attr)
  .stage-insert-career__inner
    if figure
      .stage-insert-career__img
        != include('@figure', figure)

    if headline || text || button
      .stage-insert-career__content
        if headline
          .stage-insert-career__content-headline
            != include('@headline', headline)

        if text
          .stage-insert-career__content-text #{text}
          
        if button
          != include('@button--white-blue-outline', button)
 
{
  "headline": {
    "text": "Top arbeitgeber. Top möglichkeiten."
  },
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
  "button": {
    "link": "#",
    "text": "Zu den Stellenangeboten"
  },
  "figure": {
    "caption": null,
    "copyright": null,
    "height": 386,
    "image": "/images/dummy/stage-insert-career-img.png",
    "width": 386
  }
}
  • Content: 
    .stage-insert-career {
  background-color: $color-blue;

  @include mq($until: m) {
    margin-bottom: 15.5rem;
  }
}

.stage-insert-career__inner {
  @include make-container();
  display: flex;
  flex-direction: column;
  padding-top: 4.5rem;

  @include mq($from: m) {
    flex-direction: row-reverse;
    justify-content: space-between;
    padding-bottom: 4rem;
  }

  @include mq($from: l) {
    height: 48rem;
  }

  @include mq($from: xl) { 
    padding-top: 6rem;
  }

  @include mq($until: m) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.stage-insert-career__img {
  margin-bottom: 3.5rem;

  .figure {
    @include mq($until: m) {
      margin-left: auto;
      margin-right: auto;
      max-width: 20rem;
    }
  }
}

.stage-insert-career__content {
  background-color: $color-steelgrey-light;
  padding: 3rem 2rem;

  .button {
    @include mq($until: m) {
      background-color: transparent;
      border-color: $color-blue;
      color: $color-blue;

      &:hover,
      &:focus {
        background-color: $color-blue;
        color: #fff;
      }
    }
  }

  .headline,
  .stage-insert-career__content-text {
    @include mq($until: m) {
      color: $color-blue;
    }
  }

  @include mq($from: m) { 
    background-color: transparent;
    padding: 0 1.5rem;
  }

  @include mq($from: xl) { 
    padding-left: 4rem;
    padding-right: 4rem;
  }

  @include mq($until: m) {
    margin-bottom: -13.5rem;
    text-align: center;
  }
}

.stage-insert-career__img + .stage-insert-career__content {
  @include mq($from: m) {
    max-width: 56%;
  }
  
  @include mq($from: xl) { 
    max-width: 52%;
  }
}

.stage-insert-career__content-headline,
.stage-insert-career__content-text {
  @include mq($until: m) {
    text-align: left;
  }
}

.stage-insert-career__content-headline {
  margin-bottom: 1.5rem;

  .headline {
    text-transform: uppercase;
  }

  @include mq($from: l) {
    margin-bottom: 3.5rem;
  }
}

.stage-insert-career__content-text {
  color: #fff;
  margin-bottom: 3rem;

  @include mq($from: l) {
    margin-bottom: 5rem;
  }
}
  • URL: /components/raw/stage-insert-career/stage-insert-career.scss
  • Filesystem Path: src/components/organisms/stage-insert-career/stage-insert-career.scss
  • Size: 2.1 KB

There are no notes for this item.