hkk Frontend 2017

Bühnen-Einschub 

<!-- Description Only -->
<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>
</div>


<!-- Description With Toc -->
<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-2a36" 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-e663" 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-4b37" 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-628f" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-down"></use>
</svg>Aenean commodo</a>
                </li>
            </ul>
        </div>
    </div>
</div>


<!-- Description With Link -->
<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__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-4a69" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
        </div>
    </div>
</div>


<!-- Description With Links -->
<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__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-84ec" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a><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-d295" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
        </div>
    </div>
</div>


<!-- Description With Toc And Link -->
<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-6147" 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-4174" 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-ec4d" 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-6b28" 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-0a7c" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
        </div>
    </div>
</div>


<!-- Description With Toc And Links -->
<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-fb09" 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-3e29" 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-8e5b" 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-5466" 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-4c1e" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a><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-f364" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
        </div>
    </div>
</div>


<!-- Description With Toc And Short Links -->
<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-ae56" 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-026c" 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-f89c" 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-474d" 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</span>
<svg class="icon icon--arrow-right" id="icon-4e9a" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a><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-860a" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
        </div>
    </div>
</div>


<!-- Stage Insert Text -->
<div class="stage-insert u-inverted stage-insert--text">
    <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__links"><a class="teaser-link stage-insert__link teaser-link--big" href=""><span class="teaser-link__inner">Lorem ipsum</span>
<svg class="icon icon--arrow-right" id="icon-0561" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
        </div>
    </div>
</div>


<!-- Stage Insert Text -->
<div class="stage-insert u-inverted stage-insert--text">
    <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__links"><a class="teaser-link stage-insert__link teaser-link--big" href=""><span class="teaser-link__inner">Lorem ipsum</span>
<svg class="icon icon--arrow-right" id="icon-6157" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a><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-a7c3" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
        </div>
    </div>
</div>


<!-- Stage Insert Text Teaser -->
<div class="stage-insert u-inverted stage-insert--text">
    <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__links"><a class="teaser-link stage-insert__link teaser-link--big" href=""><span class="teaser-link__inner">Lorem ipsum</span>
<svg class="icon icon--arrow-right" id="icon-6055" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a><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-5da7" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a><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-8c44" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
        </div>
    </div>
</div>


<!-- 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-53b5">
                <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-79dd" 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>


<!-- Stage Insert Icon -->
<div class="stage-insert u-inverted stage-insert--icon">
    <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">
            <div class="stage-insert__teaser-icon">
                <svg class="icon icon--big-anchor" id="icon-4c38" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-big-anchor"></use>
</svg>
            </div>
        </div>
    </div>
</div>


<!-- Stage Insert Image -->
<div class="stage-insert u-inverted stage-insert--image">
    <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-f544">
                <div class="figure__media">
                    <img class="image" alt="Das ist ein Platzhalter-Bild" width="155" height="170" src="/images/dummy/figure-480x320.jpg" />
                </div>
            </figure>
        </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 Only */
{
  "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"
}


/* Description With Toc */
{
  "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"
  ]
}


/* Description With Link */
{
  "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",
  "links": [
    "Lorem ipsum dolor sit amet, consectetuer adipiscing elit"
  ]
}


/* Description With Links */
{
  "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",
  "links": [
    "Lorem ipsum dolor sit amet, consectetuer adipiscing elit",
    "Lorem ipsum dolor sit amet, consectetuer adipiscing elit"
  ]
}


/* Description With Toc And Link */
{
  "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"
  ]
}


/* Description With Toc And Links */
{
  "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",
    "Lorem ipsum dolor sit amet, consectetuer adipiscing elit"
  ]
}


/* Description With Toc And Short Links */
{
  "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",
    "Lorem ipsum dolor sit amet, consectetuer adipiscing elit"
  ]
}


/* Stage Insert Text */
{
  "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": "text",
  "links": [
    "Lorem ipsum"
  ]
}


/* Stage Insert Text */
{
  "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": "text",
  "links": [
    "Lorem ipsum",
    "Lorem ipsum dolor sit amet, consectetuer adipiscing elit"
  ]
}


/* Stage Insert Text Teaser */
{
  "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": "text",
  "links": [
    "Lorem ipsum",
    "Lorem ipsum dolor sit amet, consectetuer adipiscing elit",
    "Lorem ipsum dolor sit amet, consectetuer adipiscing elit"
  ]
}


/* Stage Insert Teaser */
{
  "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
    }
  }
}


/* Stage Insert Icon */
{
  "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": "icon",
  "teaser": {
    "icon": "big-anchor"
  }
}


/* Stage Insert Image */
{
  "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": "image",
  "teaser": {
    "figure": {
      "caption": null,
      "copyright": null,
      "width": 155,
      "height": 170
    }
  }
}
  • 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.