hkk Frontend 2017

Bühnen-Einschub: Stage Insert Teaser 

<div class="stage-insert u-inverted stage-insert--teaser">
    <div class="stage-insert__inner">
        <div class="stage-insert__section">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
                pretium quis, sem.</p>
        </div>
        <div class="stage-insert__teaser">
            <figure class="figure" aria-labelledby="figure-ffaf">
                <div class="figure__media">
                    <img class="image" alt="Das ist ein Platzhalter-Bild" width="226" height="288" src="/images/dummy/figure-480x320.jpg" />
                </div>
            </figure>
            <div class="stage-insert__teaser-title">Suchutz vor Burn-Out</div>
            <div class="stage-insert__teaser-link"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren</span>
<svg class="icon icon--arrow-right" id="icon-4963" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
            </div>
            <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
        </div>
    </div>
</div>
 
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);
  attr.class.push(`stage-insert--${variants || 'default'}`);

//- Render stage insert
.stage-insert.u-inverted&attributes(attr)
  .stage-insert__inner
    //- Description
    if description
      .stage-insert__section
        != renderPug(description)

    //- Table of contents
    if toc
      .stage-insert__toc
        ul.stage-insert__toc-list(aria-label='Zum Bereich springen')
          each item in toc
            li.stage-insert__toc-item
              a.stage-insert__toc-link(href='') #[!= include('@icon', {icon: 'arrow-down', before: true})]#{item}

    //- Links
    if links
      .stage-insert__links
        each link in links
          != include('@teaser-link--big-white', { text: link, attr: { class: 'stage-insert__link' } })

    if teaser
      .stage-insert__teaser
        if teaser.figure
          != include('@figure', teaser.figure)

        if teaser.icon
          .stage-insert__teaser-icon
            != include('@icon', { icon: teaser.icon })

        if teaser.title
          .stage-insert__teaser-title #{teaser.title}

        if teaser.link
          .stage-insert__teaser-link
            != include('@teaser-link', {link: teaser.link, text: 'Mehr erfahren'})
          //- Faux link
          a.teaser__overlay-link(href=teaser.link, tabindex='-1', aria-hidden='true')
 
{
  "description": "p Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.\n",
  "variants": "teaser",
  "teaser": {
    "link": "#",
    "title": "Suchutz vor Burn-Out",
    "figure": {
      "caption": null,
      "copyright": null,
      "width": 226,
      "height": 288
    }
  }
}
  • Content: 
    .stage-insert {
  background-color: $color-blue;
  color: rgba(#fff, 0.9);
}

.stage-insert__inner {
  @include mq($from: m) {
    display: flex;
    flex-wrap: wrap;
  }

  @include mq($from: l) {
    flex-wrap: nowrap;
    justify-content: space-between;
  }
}

.stage-insert__section,
.stage-insert__toc {
  padding: 2rem 2.5rem 1.5rem;

  @include mq($from: m) {
    width: 50%;
  }

  @include mq($from: l) {
    padding: 3rem 3.5rem 2.5rem;
  }

  @include mq($from: xl) {
    padding: 4rem 4.5rem 3.5rem;
  }
}

.stage-insert__section {
  @include mq($from: l) {
    flex-shrink: 1;
    max-width: 60%;
    width: auto;
  }
}

.stage-insert__section:only-child {
  max-width: 100%;
  width: 100%;
}

.stage-insert__toc {
  margin-top: -1rem;
  padding-top: 0;

  @include mq($from: m) {
    margin-top: 0;
    padding-top: 2rem;
  }

  @include mq($from: l) {
    max-width: 40%;
    min-width: 30%;
    padding-top: 2.5rem;
    width: auto;

    &:last-child {
      min-width: 40%;
    }
  }

  @include mq($from: xl) {
    max-width: 33.33%;
    min-width: 33.33%;
    padding-top: 3.5rem;

    &:last-child {
      min-width: 33.33%;
    }
  }
}

.stage-insert__toc-list {
  @include list-reset();

  font-size: 1.5rem;
  margin-bottom: 2rem;
}

.stage-insert__toc-item {
  border-bottom: 1px solid rgba($color-steelgrey-light, 0.2);
  color: #fff;
  display: block;
  font-weight: bold;
}

.stage-insert__toc-link {
  display: block;
  padding-bottom: 1rem;
  padding-top: 1rem;
}

.stage-insert__links {
  @include mq($from: m) {
    display: flex;
    flex-wrap: wrap;
    width: 50%;
  }

  @include mq($from: l) {
    max-width: 40%;
    min-width: 30%;
    width: auto;
  }

  @include mq($from: l) {
    max-width: 33.33%;
    min-width: 33.33%;
  }
}

@include mq($from: m, $until: l) {
  .stage-insert__links:nth-child(3) {
    flex-wrap: nowrap;
    width: 100%;
  }
}

.stage-insert__link {
  background-color: $color-blue-light;
  display: block;
  flex-shrink: 1;
  margin-top: 1px;
  padding: 2rem 2.5rem;
  width: 100%;

  &:first-child {
    margin-top: 0;
  }

  @include mq($from: l) {
    padding: 3rem 3.5rem;
  }

  @include mq($from: xl) {
    padding: 4rem 4.5rem;
  }

  @include mq($from: m, $until: l) {
    .stage-insert__links:nth-child(3) & {
      margin-left: 1px;
      margin-top: 0;
      width: 50%;

      &:first-child,
      &:only-child {
        margin-left: 0;
      }

      &:only-child {
        width: 100%;
      }
    }
  }
}

.stage-insert--text {
  .stage-insert__links,
  .stage-insert__link {
    display: inline-block;
  }

  .stage-insert__link {
    margin-bottom: 1.5rem;
    padding: 2rem;
  }

  .stage-insert__links {
    padding: 2rem 2.5rem 1.5rem;

    @include mq($from: l) {
      padding: 3rem 3.5rem 2.5rem;
    }

    @include mq($from: xl) {
      padding: 4rem 4.5rem 3.5rem;
    }
  }
}

.stage-insert__teaser {
  background-color: $color-blue-light;
  display: inline-block;
  padding: 2rem 2.5rem 1.5rem;
  position: relative;
  width: 100%;

  .figure {
    margin-bottom: 1.5rem;
  }

  .stage-insert__teaser-title {
    font-weight: bold;
    margin-bottom: 0.5rem;

    @include mq($from: m) {
      margin-bottom: 1rem;
    }
  }

  .stage-insert__teaser-link {
    font-size: 1.5rem;
    font-weight: bold;
  }

  &:hover .stage-insert__teaser-link,
  &:focus .stage-insert__teaser-link {
    text-decoration: underline;
  }

  &:hover,
  &:focus {
    text-decoration: none;
  }

  @include mq($from: m) {
    max-width: 50%;
  }

  @include mq($from: l) {
    max-width: 33.33%;
    min-width: 33.33%;
    padding: 3rem 3.5rem 2.5rem;
  }

  @include mq($from: xl) {
    padding: 4rem 4.5rem 3.5rem;
  }
}

.stage-insert--icon,
.stage-insert--image {
  .stage-insert__teaser {
    background-color: transparent;
  }

  .stage-insert__section {
    @include mq($from: m) {
      max-width: 66%;
    }
  }
}

.stage-insert--icon {
  .stage-insert__teaser {
    text-align: center;
  }
}

.stage-insert__teaser-icon {
  color: rgba(#fff, 0.9);
  display: block;
  font-size: 20rem;
  line-height: 1.5rem;
  opacity: 0.1;
  user-select: none;
}
  • URL: /components/raw/stage-insert/stage-insert.scss
  • Filesystem Path: src/components/organisms/stage-insert/stage-insert.scss
  • Size: 4.1 KB

There are no notes for this item.