Story Detail Page

Ready

HTML
View
Context
Assets
Info
Notes


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

        <a href="#" class="case-list-teaser bg-image-edition-12">
            <div class="case-list-teaser__wrapper">
                <div class="case-list-teaser__body">
                    <div class="case-list-teaser__caption">case study</div>
                    <h2 class="case-list-teaser__title punch-in bg-image-edition-12">
                        case study headline eggs
                    </h2>
                    <div class="case-list-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>
                <div class="case-list-teaser__footer">
                    <span class="link-teaser">mehr erfahren</span>
                </div>
            </div>
        </a>

        <a href="#" class="case-list-teaser bg-image-edition-12">
            <div class="case-list-teaser__wrapper">
                <div class="case-list-teaser__body">
                    <div class="case-list-teaser__caption">case study</div>
                    <h2 class="case-list-teaser__title punch-in bg-image-edition-12">
                        case study headline eggs
                    </h2>
                    <div class="case-list-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>
                <div class="case-list-teaser__footer">
                    <span class="link-teaser">mehr erfahren</span>
                </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="stripe stripe--gray">
    <div class="container-xl container-vertical-spacing-xl">
        <h2 class="teaser-section-heading">INNOQ Stories</h2>

        <a href="#" class="case-list-teaser bg-image-edition-12">
            <div class="case-list-teaser__wrapper">
                <div class="case-list-teaser__body">
                    <div class="case-list-teaser__caption">case study</div>
                    <h2 class="case-list-teaser__title punch-in bg-image-edition-12">
                        case study headline eggs
                    </h2>
                    <div class="case-list-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>
                <div class="case-list-teaser__footer">
                    <span class="link-teaser">mehr erfahren</span>
                </div>
            </div>
        </a>

        <a href="#" class="case-list-teaser bg-image-edition-12">
            <div class="case-list-teaser__wrapper">
                <div class="case-list-teaser__body">
                    <div class="case-list-teaser__caption">case study</div>
                    <h2 class="case-list-teaser__title punch-in bg-image-edition-12">
                        case study headline eggs
                    </h2>
                    <div class="case-list-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>
                <div class="case-list-teaser__footer">
                    <span class="link-teaser">mehr erfahren</span>
                </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"
}

File:

Content:


                                .story-detail-page {
  @extend %article-layout;

  align-items: center;
  margin-bottom: $spacer-lg;

  // Centered elements that are a bit wider than the textwurst
  figure,
  .two-column-image-divider-asymmetric,
  .case-list-teaser {
    grid-column: 3/ 8;
  }

  .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: 466 Bytes

Handle: @story-detail-page
Preview:
- With layout
- Component only
Filesystem Path: components/01-pages/story-pages/story-detail-page/story-detail-page.html

No notes defined.