# Story Overview Page

WIP

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <main role="main" class="story-overview-page container-vertical-spacing-xxl">
        <h1 class="section-heading--primary">INNOQ Stories</h1>

        <section class="container-md container-vertical-spacing-xl">
            <super-quote>
                <blockquote class="superquote" itemscope itemtype="http://schema.org/Person">
                    <span class="superquote__zigzag"></span>
                    <p>Wertschöpfung findet statt, wenn unsere Änderung oder das neue Feature in unserem Produktionssystem genutzt wird.</p>
                    <cite class="superquote__author" itemprop="name">Heribert Innoq</cite>
                    <span class="superquote__role" itemprop="jobTitle">Senior Consultant</span>
                </blockquote>
            </super-quote>
        </section>

        <section class="container-xl container-vertical-spacing-xl">
            <div class="tile-grid-md">
                <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                    <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">INNOQ Story</h2>
                            <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                Dies ist eine Headline
                            </h2>
                            <div class="case-tile-teaser__text case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                            </div>
                        </div>
                        <div class="case-tile-teaser__goto">
                            <span class="link-teaser">zum Projekt</span>
                        </div>
                    </div>
                </a>
                <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                    <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">INNOQ Story</h2>
                            <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                Dies ist eine Headline
                            </h2>
                            <div class="case-tile-teaser__text case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                            </div>
                        </div>
                        <div class="case-tile-teaser__goto">
                            <span class="link-teaser">zum Projekt</span>
                        </div>
                    </div>
                </a>
                <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                    <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">INNOQ Story</h2>
                            <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                Dies ist eine Headline
                            </h2>
                            <div class="case-tile-teaser__text case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                            </div>
                        </div>
                        <div class="case-tile-teaser__goto">
                            <span class="link-teaser">zum Projekt</span>
                        </div>
                    </div>
                </a>
                <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                    <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">INNOQ Story</h2>
                            <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                Dies ist eine Headline
                            </h2>
                            <div class="case-tile-teaser__text case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                            </div>
                        </div>
                        <div class="case-tile-teaser__goto">
                            <span class="link-teaser">zum Projekt</span>
                        </div>
                    </div>
                </a>
                <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                    <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">INNOQ Story</h2>
                            <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                Dies ist eine Headline
                            </h2>
                            <div class="case-tile-teaser__text case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                            </div>
                        </div>
                        <div class="case-tile-teaser__goto">
                            <span class="link-teaser">zum Projekt</span>
                        </div>
                    </div>
                </a>
                <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                    <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">INNOQ Story</h2>
                            <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                Dies ist eine Headline
                            </h2>
                            <div class="case-tile-teaser__text case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                            </div>
                        </div>
                        <div class="case-tile-teaser__goto">
                            <span class="link-teaser">zum Projekt</span>
                        </div>
                    </div>
                </a>
                <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                    <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">INNOQ Story</h2>
                            <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                Dies ist eine Headline
                            </h2>
                            <div class="case-tile-teaser__text case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                            </div>
                        </div>
                        <div class="case-tile-teaser__goto">
                            <span class="link-teaser">zum Projekt</span>
                        </div>
                    </div>
                </a>
            </div>
        </section>
    </main>

`
`

    <main role="main" class="story-overview-page container-vertical-spacing-xxl">
        <h1 class="section-heading--primary">INNOQ Stories</h1>

        <section class="container-md container-vertical-spacing-xl">
            <super-quote>
                <blockquote class="superquote" itemscope itemtype="http://schema.org/Person">
                    <span class="superquote__zigzag"></span>
                    <p>Wertschöpfung findet statt, wenn unsere Änderung oder das neue Feature in unserem Produktionssystem genutzt wird.</p>
                    <cite class="superquote__author" itemprop="name">Heribert Innoq</cite>
                    <span class="superquote__role" itemprop="jobTitle">Senior Consultant</span>
                </blockquote>
            </super-quote>
        </section>

        <section class="container-xl container-vertical-spacing-xl">
            <div class="tile-grid-md">
                <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                    <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">INNOQ Story</h2>
                            <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                Dies ist eine Headline
                            </h2>
                            <div class="case-tile-teaser__text case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                            </div>
                        </div>
                        <div class="case-tile-teaser__goto">
                            <span class="link-teaser">zum Projekt</span>
                        </div>
                    </div>
                </a>
                <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                    <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">INNOQ Story</h2>
                            <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                Dies ist eine Headline
                            </h2>
                            <div class="case-tile-teaser__text case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                            </div>
                        </div>
                        <div class="case-tile-teaser__goto">
                            <span class="link-teaser">zum Projekt</span>
                        </div>
                    </div>
                </a>
                <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                    <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">INNOQ Story</h2>
                            <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                Dies ist eine Headline
                            </h2>
                            <div class="case-tile-teaser__text case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                            </div>
                        </div>
                        <div class="case-tile-teaser__goto">
                            <span class="link-teaser">zum Projekt</span>
                        </div>
                    </div>
                </a>
                <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                    <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">INNOQ Story</h2>
                            <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                Dies ist eine Headline
                            </h2>
                            <div class="case-tile-teaser__text case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                            </div>
                        </div>
                        <div class="case-tile-teaser__goto">
                            <span class="link-teaser">zum Projekt</span>
                        </div>
                    </div>
                </a>
                <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                    <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">INNOQ Story</h2>
                            <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                Dies ist eine Headline
                            </h2>
                            <div class="case-tile-teaser__text case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                            </div>
                        </div>
                        <div class="case-tile-teaser__goto">
                            <span class="link-teaser">zum Projekt</span>
                        </div>
                    </div>
                </a>
                <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                    <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">INNOQ Story</h2>
                            <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                Dies ist eine Headline
                            </h2>
                            <div class="case-tile-teaser__text case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                            </div>
                        </div>
                        <div class="case-tile-teaser__goto">
                            <span class="link-teaser">zum Projekt</span>
                        </div>
                    </div>
                </a>
                <a href="#" class="case-tile-teaser bg-image-edition-12 case-tile-teaser--sm">
                    <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">INNOQ Story</h2>
                            <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                                Dies ist eine Headline
                            </h2>
                            <div class="case-tile-teaser__text case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                            </div>
                        </div>
                        <div class="case-tile-teaser__goto">
                            <span class="link-teaser">zum Projekt</span>
                        </div>
                    </div>
                </a>
            </div>
        </section>
    </main>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      .story-overview-page {
        background: $gradient-2;

        .superquote__zigzag {
          @include zigzag($gradient-header-background-color);
        }
      }

  `
- URL: /components/raw/story-overview-page/_story-overview-page.scss
- Filesystem Path: components/01-pages/story-pages/story-overview-page/_story-overview-page.scss
- Size: 137 Bytes

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

No notes defined.