<div class="stage-insert u-inverted stage-insert--default">
    <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__toc">
            <ul class="stage-insert__toc-list" aria-label="Zum Bereich springen">
                <li class="stage-insert__toc-item">
                    <a class="stage-insert__toc-link" href="">
                        <svg class="icon icon--arrow-down icon--before" id="icon-c5af" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-down"></use>
</svg>Lorem ipsum dolor sit amet</a>
                </li>
                <li class="stage-insert__toc-item">
                    <a class="stage-insert__toc-link" href="">
                        <svg class="icon icon--arrow-down icon--before" id="icon-878e" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-down"></use>
</svg>nascetur ridiculus mus</a>
                </li>
                <li class="stage-insert__toc-item">
                    <a class="stage-insert__toc-link" href="">
                        <svg class="icon icon--arrow-down icon--before" id="icon-0d8d" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-down"></use>
</svg>onsectetuer adipiscing elit</a>
                </li>
                <li class="stage-insert__toc-item">
                    <a class="stage-insert__toc-link" href="">
                        <svg class="icon icon--arrow-down icon--before" id="icon-33b8" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-down"></use>
</svg>Aenean commodo</a>
                </li>
            </ul>
        </div>
        <div class="stage-insert__links"><a class="teaser-link stage-insert__link teaser-link--big" href=""><span class="teaser-link__inner">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</span>
<svg class="icon icon--arrow-right" id="icon-eeb9" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></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",
  "toc": [
    "Lorem ipsum dolor sit amet",
    "nascetur ridiculus mus",
    "onsectetuer adipiscing elit",
    "Aenean commodo"
  ],
  "links": [
    "Lorem ipsum dolor sit amet, consectetuer adipiscing elit"
  ]
}
  • 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.