<div>
    <div class="page-layout-xl--default">
        <h2 class="teaser-section-heading">Hightlights</h2>
        <div class="blocks">
            <a href="#" class="case-tile-teaser case-tile-teaser-bg-image-demo">
                <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>
                        <p class="case-tile-teaser__text">
                            Lorem gibson 8-bit Freeside denim otaku sign boy neon warp
                            long-chain hydrocarbons car. Qui excepteur laborum ea est culpa
                            reprehenderit enim ex amet veniam excepteur. Minim aliqua amet
                            reprehenderit id velit id dolor quis et ea anim in. Cillum nisi ex
                            incididunt id adipisicing reprehenderit id dolor qui anim non
                            velit. Laboris esse ex duis sit labore culpa quis duis. Irure
                            tempor deserunt et velit labore excepteur pariatur aute
                            adipisicing eu do cupidatat nisi. Cupidatat officia aliquip
                            excepteur Lorem in. Cillum amet enim anim do ut do adipisicing
                            excepteur proident aute.
                        </p>
                    </div>
                    <div class="case-tile-teaser__goto">
                        <span class="link-teaser">zum Projekt</span>
                    </div>
                </div>
            </a><a href="#" class="case-tile-teaser case-tile-teaser-bg-image-demo">
                <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>
                        <p class="case-tile-teaser__text">
                            Lorem gibson 8-bit Freeside denim otaku sign boy neon warp
                            long-chain hydrocarbons car.
                        </p>
                    </div>
                    <div class="case-tile-teaser__goto">
                        <span class="link-teaser">zum Projekt</span>
                    </div>
                </div>
            </a>
        </div>
        <div class="blocks">
            <a href="#" class="case-tile-teaser case-tile-teaser--sm case-tile-teaser-bg-image-demo">
                <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                    <div class="case-tile-teaser__body">
                        <h2 class="case-tile-teaser__caption">Case Study</h2>
                        <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                            Dies ist eine Headline
                        </h2>
                        <p class="case-tile-teaser__text case-tile-teaser__text--sm">
                            Lorem gibson 8-bit Freeside denim otaku sign boy neon warp
                            long-chain hydrocarbons car.
                        </p>
                    </div>
                    <div class="case-tile-teaser__goto">
                        <span class="link-teaser">zum Projekt</span>
                    </div>
                </div>
            </a><a href="#" class="case-tile-teaser case-tile-teaser--sm case-tile-teaser-bg-image-demo">
                <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                    <div class="case-tile-teaser__body">
                        <h2 class="case-tile-teaser__caption">Case Study</h2>
                        <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                            Dies ist eine Headline
                        </h2>
                        <p class="case-tile-teaser__text case-tile-teaser__text--sm">
                            Lorem gibson 8-bit Freeside denim otaku sign boy neon warp
                            long-chain hydrocarbons car.
                        </p>
                    </div>
                    <div class="case-tile-teaser__goto">
                        <span class="link-teaser">zum Projekt</span>
                    </div>
                </div>
            </a><a href="#" class="case-tile-teaser case-tile-teaser--sm case-tile-teaser-bg-image-demo">
                <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                    <div class="case-tile-teaser__body">
                        <h2 class="case-tile-teaser__caption">Case Study</h2>
                        <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">
                            Dies ist eine Headline
                        </h2>
                        <p class="case-tile-teaser__text case-tile-teaser__text--sm">
                            Lorem gibson 8-bit Freeside denim otaku sign boy neon warp
                            long-chain hydrocarbons car.
                        </p>
                    </div>
                    <div class="case-tile-teaser__goto">
                        <span class="link-teaser">zum Projekt</span>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="page-layout--grid">
        <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
                                    <img src="../../assets/icons/plus-red.svg" /></span><span class="collapse-toggler__flip">weniger anzeigen
                                    <img src="../../assets/icons/minus-red.svg" /></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>
    </div>
</div>
<div>


    <div class="page-layout-xl--default">
        <h2 class="teaser-section-heading">Hightlights</h2>
        <div class="blocks">
            <a href="#" class="case-tile-teaser case-tile-teaser-bg-image-demo">
                <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>
                        <p class="case-tile-teaser__text">
                            Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.
                            Qui excepteur laborum ea est culpa reprehenderit enim ex amet veniam excepteur. Minim aliqua amet reprehenderit id velit id dolor quis et ea anim in. Cillum nisi ex incididunt id adipisicing reprehenderit id dolor qui anim non velit. Laboris esse ex duis sit labore culpa quis duis. Irure tempor deserunt et velit labore excepteur pariatur aute adipisicing eu do cupidatat nisi. Cupidatat officia aliquip excepteur Lorem in. Cillum amet enim anim do ut do adipisicing excepteur proident aute.
                        </p>
                    </div>
                    <div class="case-tile-teaser__goto">
                        <span class="link-teaser">zum Projekt</span>
                    </div>
                </div>
            </a>
            <a href="#" class="case-tile-teaser case-tile-teaser-bg-image-demo">
                <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>
                        <p class="case-tile-teaser__text">
                            Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.
                        </p>
                    </div>
                    <div class="case-tile-teaser__goto">
                        <span class="link-teaser">zum Projekt</span>
                    </div>
                </div>
            </a>
        </div>

        <div class="blocks">
            <a href="#" class="case-tile-teaser case-tile-teaser--sm case-tile-teaser-bg-image-demo">
                <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                    <div class="case-tile-teaser__body">
                        <h2 class="case-tile-teaser__caption">Case Study</h2>
                        <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">Dies ist eine Headline</h2>
                        <p class="case-tile-teaser__text case-tile-teaser__text--sm">
                            Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.
                        </p>
                    </div>
                    <div class="case-tile-teaser__goto">
                        <span class="link-teaser">zum Projekt</span>
                    </div>
                </div>
            </a>
            <a href="#" class="case-tile-teaser case-tile-teaser--sm case-tile-teaser-bg-image-demo">
                <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                    <div class="case-tile-teaser__body">
                        <h2 class="case-tile-teaser__caption">Case Study</h2>
                        <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">Dies ist eine Headline</h2>
                        <p class="case-tile-teaser__text case-tile-teaser__text--sm">
                            Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.
                        </p>
                    </div>
                    <div class="case-tile-teaser__goto">
                        <span class="link-teaser">zum Projekt</span>
                    </div>
                </div>
            </a>
            <a href="#" class="case-tile-teaser case-tile-teaser--sm case-tile-teaser-bg-image-demo">
                <div class="case-tile-teaser__content case-tile-teaser__content--sm">
                    <div class="case-tile-teaser__body">
                        <h2 class="case-tile-teaser__caption">Case Study</h2>
                        <h2 class="case-tile-teaser__headline case-tile-teaser__headline--sm">Dies ist eine Headline</h2>
                        <p class="case-tile-teaser__text case-tile-teaser__text--sm">
                            Lorem gibson 8-bit Freeside denim otaku sign boy neon warp long-chain hydrocarbons car.
                        </p>
                    </div>
                    <div class="case-tile-teaser__goto">
                        <span class="link-teaser">zum Projekt</span>
                    </div>
                </div>
            </a>
        </div>
    </div>


    <div class="page-layout--grid">
        <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 <img src={context.app.uri('assets/icons/plus-red.svg')} /></span>
                                <span class="collapse-toggler__flip">weniger anzeigen <img src={context.app.uri('assets/icons/minus-red.svg')} /></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>
    </div>


</div>
/* No context defined for this component. */
  • Handle: @case-study-overview
  • Preview:
  • Filesystem Path: components/04-pages/case-study-pages/case-study-overview/case-study-overview.html

There are no notes for this item.