<main class="main-layout">
    <h2 class="teaser-section-heading">Success Stories unserer Kunden</h2>
    <div class="icon-divider icon-divider--transparent">
        <span class="
        icon-svg icon-arrow-long-down icon--brand-primary
        icon-divider__image
      "></span>
    </div>
    <section class="stripe stripe--gray">
        <div class="container-xl container-xl-vertical-whitespace">
            <div class="masonry-grid">
                <a href="#" class="case-tile-teaser bg-image-edition-12 span-4">
                    <div class="case-tile-teaser__content">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Case Study</h2>
                            <h2 class="case-tile-teaser__headline">Dies ist eine Headline</h2>
                            <div class="case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp
                                long-chain hydrocarbons car.
                            </div>
                            <img class="case-tile-teaser__logo" src="../../assets/logos/edition-02/svg/innoq-logo--apricotpetrol.svg" />
                        </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 span-4">
                    <div class="case-tile-teaser__content">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Case Study</h2>
                            <h2 class="case-tile-teaser__headline">Dies ist eine Headline</h2>
                            <div class="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 span-3">
                    <div class="case-tile-teaser__content">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Case Study</h2>
                            <h2 class="case-tile-teaser__headline">Dies ist eine Headline</h2>
                            <div class="case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp
                                long-chain hydrocarbons car.
                            </div>
                            <img class="case-tile-teaser__logo" src="../../assets/logos/edition-02/svg/innoq-logo--apricotpetrol.svg" />
                        </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 span-5">
                    <div class="case-tile-teaser__content">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Case Study</h2>
                            <h2 class="case-tile-teaser__headline">Dies ist eine Headline</h2>
                            <div class="case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp
                                long-chain hydrocarbons car.
                            </div>
                            <img class="case-tile-teaser__logo" src="../../assets/logos/edition-02/svg/innoq-logo--apricotpetrol.svg" />
                        </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 span-4">
                    <div class="case-tile-teaser__content">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Case Study</h2>
                            <h2 class="case-tile-teaser__headline">Dies ist eine Headline</h2>
                            <div class="case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp
                                long-chain hydrocarbons car.
                            </div>
                            <img class="case-tile-teaser__logo" src="../../assets/logos/edition-02/svg/innoq-logo--apricotpetrol.svg" />
                        </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 span-4">
                    <div class="case-tile-teaser__content">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Case Study</h2>
                            <h2 class="case-tile-teaser__headline">Dies ist eine Headline</h2>
                            <div class="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 span-5">
                    <div class="case-tile-teaser__content">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Case Study</h2>
                            <h2 class="case-tile-teaser__headline">Dies ist eine Headline</h2>
                            <div class="case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp
                                long-chain hydrocarbons car.
                            </div>
                            <img class="case-tile-teaser__logo" src="../../assets/logos/edition-02/svg/innoq-logo--apricotpetrol.svg" />
                        </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 span-3">
                    <div class="case-tile-teaser__content">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Case Study</h2>
                            <h2 class="case-tile-teaser__headline">Dies ist eine Headline</h2>
                            <div class="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>
        </div>
    </section>
    <section class="container-xl">
        <div class="center">
            <h2 class="teaser-section-heading">Projektliste</h2>
            <div class="project-index__entry">
                <header class="project-index__header">
                    <h2 class="project-index__title">A</h2>
                </header>
                <ul class="project-index__client-projects client-projects">
                    <li class="client-projects__client">
                        <header class="client-projects__header">
                            <h2 class="client-projects__client-name">Allianz</h2>
                        </header>
                        <div class="client-projects__project">
                            <div class="client-projects__intro">
                                <h2 class="client-projects__project-title">
                                    Frische neue Ideen
                                </h2>
                                <p class="client-projects__intro-text">
                                    Dolor commodo dolor id consequat elit cillum tempor ad culpa
                                    ipsum ea sint. Minim anim esse proident sint sit laborum
                                    tempor dolore cillum aliqua aliqua. Nisi ipsum deserunt minim
                                    commodo est ut aliqua.
                                </p>
                            </div>
                            <a href="#" class="link-teaser client-projects__goto-btn">zum Projekt</a>
                        </div>
                        <div class="client-projects__project">
                            <div class="client-projects__intro">
                                <h2 class="client-projects__project-title">
                                    Meteoriteneinschlag in der IT
                                </h2>
                                <p class="client-projects__intro-text">
                                    Dolor commodo dolor id consequat elit cillum tempor dolore
                                    cillum aliqua aliqua.
                                </p>
                            </div>
                            <multi-toggler aria-hidden="true" class="collapse-toggler client-projects__show-more-btn" data-target-next data-toggle-class="sr-only" data-toggle-self-class="collapsed" data-toggle-on-init><span class="collapse-toggler__flop">mehr anzeigen<span class="icon-svg icon-plus icon--brand-primary"></span></span><span class="collapse-toggler__flip">weniger anzeigen<span class="icon-svg icon-minus icon--brand-primary"></span></span></multi-toggler>
                            <p class="client-projects__text">
                                Ipsum ex nisi cillum voluptate qui sunt voluptate nostrud
                                consequat adipisicing in occaecat sit qui. Irure excepteur
                                tempor eu consectetur proident laborum commodo ullamco deserunt
                                excepteur culpa. Excepteur dolore ad veniam et in culpa dolore
                                irure aliqua. Ea fugiat minim cillum exercitation. Culpa ex
                                nulla id consequat pariatur quis non veniam qui consequat ipsum
                                cillum. Sint eiusmod nulla veniam mollit sunt cillum ea
                                adipisicing adipisicing laborum quis ea aliqua. Et sit mollit
                                aliqua irure minim do deserunt proident consectetur consequat.
                            </p>
                        </div>
                    </li>
                    <li class="client-projects__client">
                        <header class="client-projects__header">
                            <h2 class="client-projects__client-name">AXA</h2>
                        </header>
                        <div class="client-projects__project">
                            <div class="client-projects__intro">
                                <h2 class="client-projects__project-title">
                                    Benutzerfreundlich und Agil
                                </h2>
                                <p class="client-projects__intro-text">
                                    Dolor commodo dolor id consequat elit cillum tempor ad culpa
                                    ipsum ea sint. Minim anim esse proident sint sit laborum
                                    tempor dolore cillum aliqua aliqua. Nisi ipsum deserunt minim
                                    commodo est ut aliqua.
                                </p>
                            </div>
                            <a href="#" class="link-teaser client-projects__goto-btn">zum Projekt</a>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="project-index__entry">
                <header class="project-index__header">
                    <h2 class="project-index__title">B</h2>
                </header>
                <ul class="project-index__client-projects client-projects">
                    <li class="client-projects__client">
                        <header class="client-projects__header">
                            <h2 class="client-projects__client-name">Client</h2>
                        </header>
                        <div class="client-projects__project">
                            <div class="client-projects__intro">
                                <h2 class="client-projects__project-title">
                                    A very nice project
                                </h2>
                                <p class="client-projects__intro-text">
                                    Dolor commodo dolor id consequat elit cillum tempor ad culpa
                                    ipsum ea sint. Minim anim esse proident sint sit laborum
                                    tempor dolore cillum aliqua aliqua. Nisi ipsum deserunt minim
                                    commodo est ut aliqua.
                                </p>
                            </div>
                            <a href="#" class="link-teaser client-projects__goto-btn">zum Projekt</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </section>
</main>
<main class="main-layout">
    <h2 class="teaser-section-heading">Success Stories unserer Kunden</h2>
    <div class="icon-divider icon-divider--transparent">
        <span class="icon-svg icon-arrow-long-down icon--brand-primary icon-divider__image"></span>
    </div>

    <section class="stripe stripe--gray">
        <div class="container-xl container-xl-vertical-whitespace">
            <div class="masonry-grid">
                <a href="#" class="case-tile-teaser bg-image-edition-12 span-4">
                    <div class="case-tile-teaser__content">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Case Study</h2>
                            <h2 class="case-tile-teaser__headline">Dies ist eine Headline</h2>
                            <div class="case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                            </div>
                            <img class="case-tile-teaser__logo"
                                src={context.app.uri('assets/logos/edition-02/svg/innoq-logo--apricotpetrol.svg')} />
                        </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 span-4">
                    <div class="case-tile-teaser__content">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Case Study</h2>
                            <h2 class="case-tile-teaser__headline">Dies ist eine Headline</h2>
                            <div class="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 span-3">
                    <div class="case-tile-teaser__content">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Case Study</h2>
                            <h2 class="case-tile-teaser__headline">Dies ist eine Headline</h2>
                            <div class="case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                            </div>
                            <img class="case-tile-teaser__logo"
                                src={context.app.uri('assets/logos/edition-02/svg/innoq-logo--apricotpetrol.svg')} />
                        </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 span-5">
                    <div class="case-tile-teaser__content">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Case Study</h2>
                            <h2 class="case-tile-teaser__headline">Dies ist eine Headline</h2>
                            <div class="case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                            </div>
                            <img class="case-tile-teaser__logo"
                                src={context.app.uri('assets/logos/edition-02/svg/innoq-logo--apricotpetrol.svg')} />
                        </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 span-4">
                    <div class="case-tile-teaser__content">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Case Study</h2>
                            <h2 class="case-tile-teaser__headline">Dies ist eine Headline</h2>
                            <div class="case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                            </div>
                            <img class="case-tile-teaser__logo"
                                src={context.app.uri('assets/logos/edition-02/svg/innoq-logo--apricotpetrol.svg')} />
                        </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 span-4">
                    <div class="case-tile-teaser__content">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Case Study</h2>
                            <h2 class="case-tile-teaser__headline">Dies ist eine Headline</h2>
                            <div class="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 span-5">
                    <div class="case-tile-teaser__content">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Case Study</h2>
                            <h2 class="case-tile-teaser__headline">Dies ist eine Headline</h2>
                            <div class="case-tile-teaser__text">
                                Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain
                                hydrocarbons car.
                            </div>
                            <img class="case-tile-teaser__logo"
                                src={context.app.uri('assets/logos/edition-02/svg/innoq-logo--apricotpetrol.svg')} />
                        </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 span-3">
                    <div class="case-tile-teaser__content">
                        <div class="case-tile-teaser__body">
                            <h2 class="case-tile-teaser__caption">Case Study</h2>
                            <h2 class="case-tile-teaser__headline">Dies ist eine Headline</h2>
                            <div class="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>
        </div>
    </section>

    <section class="container-xl">
        <div class="center">
            <h2 class="teaser-section-heading">Projektliste</h2>
            <div class="project-index__entry">
                <header class="project-index__header">
                    <h2 class="project-index__title">A</h2>
                </header>
                <ul class="project-index__client-projects client-projects">
                    <li class="client-projects__client">
                        <header class="client-projects__header">
                            <h2 class="client-projects__client-name">Allianz</h2>
                        </header>
                        <div class="client-projects__project">
                            <div class="client-projects__intro">
                                <h2 class="client-projects__project-title">Frische neue Ideen</h2>
                                <p class="client-projects__intro-text">Dolor commodo dolor id consequat elit cillum tempor
                                    ad culpa ipsum ea sint. Minim anim esse proident sint sit laborum tempor dolore cillum
                                    aliqua aliqua. Nisi ipsum deserunt minim commodo est ut aliqua.</p>
                            </div>
                            <a href="#" class="link-teaser client-projects__goto-btn">zum Projekt</a>
                        </div>
                        <div class="client-projects__project">
                            <div class="client-projects__intro">
                                <h2 class="client-projects__project-title">Meteoriteneinschlag in der IT</h2>
                                <p class="client-projects__intro-text">Dolor commodo dolor id consequat elit cillum tempor
                                    dolore cillum aliqua aliqua.</p>
                            </div>
                            <multi-toggler aria-hidden="true" class="collapse-toggler client-projects__show-more-btn"
                                data-target-next data-toggle-class="sr-only" data-toggle-self-class="collapsed"
                                data-toggle-on-init>
                                <span class="collapse-toggler__flop">mehr anzeigen
                                    <span class="icon-svg icon-plus icon--brand-primary"></span>
                                </span>
                                <span class="collapse-toggler__flip">weniger anzeigen
                                    <span class="icon-svg icon-minus icon--brand-primary"></span>
                                </span>
                            </multi-toggler>
                            <p class="client-projects__text">Ipsum ex nisi cillum voluptate qui sunt voluptate nostrud
                                consequat adipisicing in occaecat sit qui. Irure excepteur tempor eu consectetur proident
                                laborum commodo ullamco deserunt excepteur culpa. Excepteur dolore ad veniam et in culpa
                                dolore irure aliqua. Ea fugiat minim cillum exercitation. Culpa ex nulla id consequat
                                pariatur quis non veniam qui consequat ipsum cillum. Sint eiusmod nulla veniam mollit sunt
                                cillum ea adipisicing adipisicing laborum quis ea aliqua. Et sit mollit aliqua irure minim
                                do deserunt proident consectetur consequat.</p>
                        </div>
                    </li>
                    <li class="client-projects__client">
                        <header class="client-projects__header">
                            <h2 class="client-projects__client-name">AXA</h2>
                        </header>
                        <div class="client-projects__project">
                            <div class="client-projects__intro">
                                <h2 class="client-projects__project-title">Benutzerfreundlich und Agil</h2>
                                <p class="client-projects__intro-text">Dolor commodo dolor id consequat elit cillum tempor
                                    ad culpa ipsum ea sint. Minim anim esse proident sint sit laborum tempor dolore cillum
                                    aliqua aliqua. Nisi ipsum deserunt minim commodo est ut aliqua.</p>
                            </div>
                            <a href="#" class="link-teaser client-projects__goto-btn">zum Projekt</a>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="project-index__entry">
                <header class="project-index__header">
                    <h2 class="project-index__title">B</h2>
                </header>
                <ul class="project-index__client-projects client-projects">
                    <li class="client-projects__client">
                        <header class="client-projects__header">
                            <h2 class="client-projects__client-name">Client</h2>
                        </header>
                        <div class="client-projects__project">
                            <div class="client-projects__intro">
                                <h2 class="client-projects__project-title">A very nice project</h2>
                                <p class="client-projects__intro-text">Dolor commodo dolor id consequat elit cillum tempor
                                    ad culpa ipsum ea sint. Minim anim esse proident sint sit laborum tempor dolore cillum
                                    aliqua aliqua. Nisi ipsum deserunt minim commodo est ut aliqua.</p>
                            </div>
                            <a href="#" class="link-teaser client-projects__goto-btn">zum Projekt</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </section>
</main>
/* No context defined. */
  • Handle: @case-study-overview
  • Preview:
  • Filesystem Path: components/01-pages/case-study-pages/case-study-overview/case-study-overview.html

No notes defined.