<header class="gradient-header">
    <div class="gradient-header__body">
        <h3 class="gradient-header__type">INNOQ Story</h3>
        <h3 class="gradient-header__author">Mika Majoran</h3>
        <h1 class="gradient-header__title">Ich bin eine Headline</h1>
        <img class="gradient-header__img" src="../../assets/bg-images/edition-02/edition02-canyon-01.webp" alt="Bild mit Umrandung" />
    </div>
</header>

<main role="main" class="story-detail-page">
    <super-quote>
        <blockquote class="superquote" itemscope itemtype="http://schema.org/Person">
            <span class="superquote__zigzag"></span>
            <p>
                Mein beruflicher Werdegang gleicht einer Serpentine – erst bei INNOQ habe ich verstanden, dass das ein
                Vorteil sein kann.
            </p>
            <cite class="superquote__author" itemprop="name">Mika Majoran</cite>
            <span class="superquote__role" itemprop="jobTitle">Senior Consultant</span>
        </blockquote>
    </super-quote>

    <info-note class="info-note">
        <div class="info-note__content">
            <h3 class="info-note__title">Mika Majoran</h3>
            <p class="info-note__text"><span class="info-note__highlight">Bei INNOQ seit</span> 2018.</p>
            <p class="info-note__text">
                <span class="info-note__highlight">Tätig als</span> Product Owner in der Produktentwicklung.
            </p>
            <div class="info-note__text">
                <p>Bei INNOQ seit 2018. Mika wohnt mit seiner Lebensgefährtin und Hündin Luna in der Nähe von Hamburg. Er
                    arbeitet vor allem von Zuhause, gelegentlich auch im Hamburger Büro.</p>
            </div>
        </div>
    </info-note>

    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

    <super-quote>
        <blockquote class="superquote" itemscope itemtype="http://schema.org/Person">
            <span class="superquote__zigzag"></span>
            <p>Ich möchte mich nicht nur fachlich, sondern auch als Mensch weiterentwickeln.</p>
            <cite class="superquote__author" itemprop="name">Mika Majoran</cite>
            <span class="superquote__role" itemprop="jobTitle">Senior Consultant</span>
        </blockquote>
    </super-quote>

    <figure>
        <img src="../../assets/bg-images/edition-02/edition02-canyon-01.webp" alt="Bild Groß" />
    </figure>

    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

    <section class="two-column-image-divider-asymmetric">
        <figure>
            <img class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__left-image--hoch" src="../../assets/example-content/hochformat.jpg" alt="Bild mit Umrandung" />
        </figure>
        <figure>
            <img class="two-column-image-divider-asymmetric__right-image two-column-image-divider-asymmetric__right-image--hoch" src="../../assets/example-content/hochformat.jpg" alt="Bild mit Umrandung" />
        </figure>
    </section>

    <h3>Ich bin eine Headline</h3>
    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

    <section class="two-column-image-divider-asymmetric">
        <figure>
            <img class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__left-image--quer" src="../../assets/example-content/querformat.jpg" alt="Bild mit Umrandung" />
        </figure>
        <figure>
            <img class="two-column-image-divider-asymmetric__right-image two-column-image-divider-asymmetric__right-image--quer" src="../../assets/example-content/querformat.jpg" alt="Bild mit Umrandung" />
        </figure>
    </section>

    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

    <figure>
        <img src="../../assets/bg-images/edition-02/edition02-canyon-01.webp" alt="Bild Groß" />
    </figure>

    <h3>Ich bin eine Headline</h3>
    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

    <span class="zigzag"></span>
</main>

<section class="stripe stripe--gray">
    <div class="tag-section">
        <h3 class="tag-section__headline">TAGS</h3>
        <ul class="tag-list">
            <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 1</a></li>
            <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 2</a></li>
            <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 3</a></li>
            <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 4</a></li>
            <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 5</a></li>
            <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 6</a></li>
        </ul>
    </div>
</section>

<section class="share-section">
    <span class="icon icon-arrow-long-down icon--brand-secondary"></span>
    <h3 class="share-section__heading">Share on</h3>
    <ul class="share-section__list">
        <li>
            <a class="share-section__link" target="_blank" href="" title="Facebook">
                <span class="icon icon-facebook icon--brand-secondary"></span>
            </a>
        </li>
        <li>
            <a class="share-section__link" target="_blank" href="" title="Twitter">
                <span class="icon icon-twitter icon--brand-secondary"></span>
            </a>
        </li>
        <li>
            <a class="share-section__link" href="">
                <span class="icon icon-email icon--brand-secondary" title="Email"></span>
            </a>
        </li>
    </ul>
</section>

<section class="stripe stripe--gray">
    <div class="container-xl container-vertical-spacing-xl">
        <h2 class="teaser-section-heading">INNOQ Stories</h2>

        <a href="#" class="case-teaser bg-image-edition-12">
            <div class="case-teaser__wrapper">
                <div class="case-teaser__body">
                    <div class="case-teaser__caption">INNOQ Story</div>
                    <div class="case-teaser__header">
                        <h2 class="punch-in bg-image-edition-12">INNOQ Story headline</h2>
                    </div>
                    <div class="case-teaser__text">
                        lorem ipsum dolor sit amet, consectetur adipisicing elit. velit doloremque culpa minima vero
                        quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
                    </div>
                    <div class="case-teaser__footer">
                        <span class="link-teaser">mehr erfahren</span>
                    </div>
                </div>
            </div>
        </a>

        <a href="#" class="case-teaser bg-image-edition-12">
            <div class="case-teaser__wrapper">
                <div class="case-teaser__body">
                    <div class="case-teaser__caption">INNOQ Story</div>
                    <div class="case-teaser__header">
                        <h2 class="punch-in bg-image-edition-12">INNOQ Story headline</h2>
                    </div>
                    <div class="case-teaser__text">
                        lorem ipsum dolor sit amet, consectetur adipisicing elit. velit doloremque culpa minima vero
                        quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
                    </div>
                    <div class="case-teaser__footer">
                        <span class="link-teaser">mehr erfahren</span>
                    </div>
                </div>
            </div>
        </a>

        <div class="container-md text-align-center">
            <a class="link-teaser" href="#">Mehr INNOQ Stories lesen</a>
        </div>
    </div>
</section>
<header class="gradient-header">
    <div class="gradient-header__body">
        <h3 class="gradient-header__type">INNOQ Story</h3>
        <h3 class="gradient-header__author">Mika Majoran</h3>
        <h1 class="gradient-header__title">{{headline}}</h1>
        <img
            class="gradient-header__img"
            src="{{ path '/assets/bg-images/edition-02/edition02-canyon-01.webp'}}"
            alt="Bild mit Umrandung"
        />
    </div>
</header>

<main role="main" class="story-detail-page">
    <super-quote>
        <blockquote class="superquote" itemscope itemtype="http://schema.org/Person">
            <span class="superquote__zigzag"></span>
            <p>
                Mein beruflicher Werdegang gleicht einer Serpentine – erst bei INNOQ habe ich verstanden, dass das ein
                Vorteil sein kann.
            </p>
            <cite class="superquote__author" itemprop="name">Mika Majoran</cite>
            <span class="superquote__role" itemprop="jobTitle">Senior Consultant</span>
        </blockquote>
    </super-quote>

    <info-note class="info-note">
        <div class="info-note__content">
            <h3 class="info-note__title">Mika Majoran</h3>
            <p class="info-note__text"><span class="info-note__highlight">Bei INNOQ seit</span> 2018.</p>
            <p class="info-note__text">
                <span class="info-note__highlight">Tätig als</span> Product Owner in der Produktentwicklung.
            </p>
            <div class="info-note__text">
                <p>Bei INNOQ seit 2018. Mika wohnt mit seiner Lebensgefährtin und Hündin Luna in der Nähe von Hamburg. Er
                arbeitet vor allem von Zuhause, gelegentlich auch im Hamburger Büro.</p>
            </div>
        </div>
    </info-note>

    <p>{{text}}</p>
    <p>{{text}}</p>
    <p>{{text}}</p>

    <super-quote>
        <blockquote class="superquote" itemscope itemtype="http://schema.org/Person">
            <span class="superquote__zigzag"></span>
            <p>Ich möchte mich nicht nur fachlich, sondern auch als Mensch weiterentwickeln.</p>
            <cite class="superquote__author" itemprop="name">Mika Majoran</cite>
            <span class="superquote__role" itemprop="jobTitle">Senior Consultant</span>
        </blockquote>
    </super-quote>

    <figure>
        <img src="{{ path '/assets/bg-images/edition-02/edition02-canyon-01.webp'}}" alt="Bild Groß" />
    </figure>

    <p>{{text}}</p>

    <section class="two-column-image-divider-asymmetric">
        <figure>
            <img class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__left-image--hoch" src="{{ path '/assets/example-content/hochformat.jpg'}}" alt="Bild mit Umrandung" />
        </figure>
        <figure>
            <img class="two-column-image-divider-asymmetric__right-image two-column-image-divider-asymmetric__right-image--hoch" src="{{ path '/assets/example-content/hochformat.jpg'}}"  alt="Bild mit Umrandung" />
        </figure>
    </section>

    <h3>{{headline}}</h3>
    <p>{{text}}</p>

    <section class="two-column-image-divider-asymmetric">
        <figure>
            <img class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__left-image--quer" src="{{ path '/assets/example-content/querformat.jpg'}}"  alt="Bild mit Umrandung" />
        </figure>
        <figure>
            <img class="two-column-image-divider-asymmetric__right-image two-column-image-divider-asymmetric__right-image--quer" src="{{ path '/assets/example-content/querformat.jpg'}}"  alt="Bild mit Umrandung" />
        </figure>
    </section>

    <p>{{text}}</p>

    <figure>
        <img src="{{ path '/assets/bg-images/edition-02/edition02-canyon-01.webp'}}" alt="Bild Groß" />
    </figure>

    <h3>{{headline}}</h3>
    <p>{{text}}</p>
    <p>{{text}}</p>

    <span class="zigzag"></span>
</main>

<section class="stripe stripe--gray">
    <div class="tag-section">
        <h3 class="tag-section__headline">TAGS</h3>
        <ul class="tag-list">
            <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 1</a></li>
            <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 2</a></li>
            <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 3</a></li>
            <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 4</a></li>
            <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 5</a></li>
            <li class="tag-list__item"><a class="tag-list__link" href="#">Tag 6</a></li>
        </ul>
    </div>
</section>

<section class="share-section">
    <span class="icon icon-arrow-long-down icon--brand-secondary"></span>
    <h3 class="share-section__heading">Share on</h3>
    <ul class="share-section__list">
        <li>
            <a class="share-section__link" target="_blank" href="" title="Facebook">
                <span class="icon icon-facebook icon--brand-secondary"></span>
            </a>
        </li>
        <li>
            <a class="share-section__link" target="_blank" href="" title="Twitter">
                <span class="icon icon-twitter icon--brand-secondary"></span>
            </a>
        </li>
        <li>
            <a class="share-section__link" href="">
                <span class="icon icon-email icon--brand-secondary" title="Email"></span>
            </a>
        </li>
    </ul>
</section>

<section class="stripe stripe--gray">
    <div class="container-xl container-vertical-spacing-xl">
        <h2 class="teaser-section-heading">INNOQ Stories</h2>

        <a href="#" class="case-teaser bg-image-edition-12">
            <div class="case-teaser__wrapper">
                <div class="case-teaser__body">
                    <div class="case-teaser__caption">INNOQ Story</div>
                    <div class="case-teaser__header">
                        <h2 class="punch-in bg-image-edition-12">INNOQ Story headline</h2>
                    </div>
                    <div class="case-teaser__text">
                        lorem ipsum dolor sit amet, consectetur adipisicing elit. velit doloremque culpa minima vero
                        quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
                    </div>
                    <div class="case-teaser__footer">
                        <span class="link-teaser">mehr erfahren</span>
                    </div>
                </div>
            </div>
        </a>

        <a href="#" class="case-teaser bg-image-edition-12">
            <div class="case-teaser__wrapper">
                <div class="case-teaser__body">
                    <div class="case-teaser__caption">INNOQ Story</div>
                    <div class="case-teaser__header">
                        <h2 class="punch-in bg-image-edition-12">INNOQ Story headline</h2>
                    </div>
                    <div class="case-teaser__text">
                        lorem ipsum dolor sit amet, consectetur adipisicing elit. velit doloremque culpa minima vero
                        quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
                    </div>
                    <div class="case-teaser__footer">
                        <span class="link-teaser">mehr erfahren</span>
                    </div>
                </div>
            </div>
        </a>

        <div class="container-md text-align-center">
            <a class="link-teaser" href="#">Mehr INNOQ Stories lesen</a>
        </div>
    </div>
</section>
{
  "text": "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
  "headline": "Ich bin eine Headline"
}
  • Content:
    .story-detail-page {
      @extend %article-layout;
    
      align-items: center;
      margin-bottom: $spacer-lg;
    
      .zigzag {
        width: 40%;
        margin: $spacer-xl auto 0 auto;
      }
    
      img,
      > img {
        @extend %box-shadow-primary-25-right-bottom;
      }
    
    
      figure {
        @extend %container-vertical-spacing-lg;
      }
    }
    
  • URL: /components/raw/story-detail-page/_story-detail-page.scss
  • Filesystem Path: components/01-pages/story-pages/story-detail-page/_story-detail-page.scss
  • Size: 304 Bytes
  • Handle: @story-detail-page
  • Preview:
  • Filesystem Path: components/01-pages/story-pages/story-detail-page/story-detail-page.html

No notes defined.