<header class="standard-header" style="background-image: url(../../assets/bg-images/general/visual-trainings-01.webp); background-color: var(--overlay-standard-color);">
    <h1 class="standard-header__title">Hey ho, let's go</h1>
    <h2 class="standard-header__subtitle">...</h2>
    <div class="standard-header__intro">
        <span class="standard-header__intro__label">fintech</span>
        <div class="standard-header__intro__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.
        </div>
        <div class="content-separator content-seperator--inverted">
            <time class="content-separator__date date" datetime="2017-06-26">26. Juni 2017</time>
            <hr class="content-separator__separator" />
            <time class="content-separator__duration duration" datetime="P8M">8 Min. Lesedauer</time>
        </div>
    </div>
</header>
<main role="main">
    <article class="case-study-page">

        <div class="customerlogo">
            <img src="../../assets/logos/edition-02/svg/innoq-logo--petrolapricot.svg" alt="Bild Groß" />
        </div>

        <p>
            <a href="#">Der Text auch in Englisch</a>
        </p>

        <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>

        <blockquote class="pullquote">Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</blockquote>

        <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>

        <ul class="checklist">
            <li>Ich bin ein kleines Listitem</li>
            <li>Ich bin ein kleines Listitem</li>
            <li>Ich bin ein kleines Listitem</li>
        </ul>

        <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ß" />
            <figcaption>
                Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
            </figcaption>
        </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>

        <info-box>
            <details>
                <summary class="infobox__teaser">
                    <div class="infobox__teaser__left">
                        <span class="infobox__teaser__heading">Ich bin eine Infobox</span>
                        <span class="icon icon-info"></span>
                    </div>
                    <div class="infobox__teaser__right">
                        <span class="icon icon-chevron-down icon--small"></span>
                    </div>
                </summary>
                <div class="infobox__content">
                    <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>
                </div>
            </details>
        </info-box>

        <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>
    </article>

    <section class="conclusion">
        <div class="conclusion-wrapper">
            <h1 class="conclusion-headline">Fazit</h1>
            <h3 class="conclusion-subheadline">Ich bin eine Headline</h3>
            <div class="conclusion-text">
                <p>
                    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <a href="https://de.wikipedia.org/wiki/Ansatz">Link</a> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
                </p>
                <p><strong>Kurz:</strong> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
            </div>

            <a class="btn btn--large btn--inverted" data-label="Sprechen Sie mit uns" href="#">Sprechen Sie mit uns</a>
        </div>
    </section>

    <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>
</main>
<header class="standard-header" style="background-image: url({{ path '/assets/bg-images/general/visual-trainings-01.webp' }}); background-color: var(--overlay-standard-color);">
    <h1 class="standard-header__title">Hey ho, let's go</h1>
    <h2 class="standard-header__subtitle">...</h2>
    <div class="standard-header__intro">
        <span class="standard-header__intro__label">fintech</span>
        <div class="standard-header__intro__text">
            {{text}}
        </div>
        <div class="content-separator content-seperator--inverted">
            <time class="content-separator__date date" datetime="2017-06-26">26. Juni 2017</time>
            <hr class="content-separator__separator" />
            <time class="content-separator__duration duration" datetime="P8M">8 Min. Lesedauer</time>
        </div>
    </div>
</header>
<main role="main">
    <article class="case-study-page">

        <div class="customerlogo">
            <img src="{{ path '/assets/logos/edition-02/svg/innoq-logo--petrolapricot.svg'}}" alt="Bild Groß" />
        </div>

        <p>
            <a href="#">Der Text auch in Englisch</a>
        </p>

        <h3>{{headline}}</h3>

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

        <blockquote class="pullquote">{{quote}}</blockquote>

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

        <ul class="checklist">
            <li>{{listitem}}</li>
            <li>{{listitem}}</li>
            <li>{{listitem}}</li>
        </ul>

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

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

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

        <info-box>
            <details>
                <summary class="infobox__teaser">
                    <div class="infobox__teaser__left">
                        <span class="infobox__teaser__heading">Ich bin eine Infobox</span>
                        <span class="icon icon-info"></span>
                    </div>
                    <div class="infobox__teaser__right">
                        <span class="icon icon-chevron-down icon--small"></span>
                    </div>
                </summary>
                <div class="infobox__content">
                    <p>{{text}}</p>
                    <p>{{text}}</p>
                </div>
            </details>
        </info-box>

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

    <section class="conclusion">
        <div class="conclusion-wrapper">
            <h1 class="conclusion-headline">Fazit</h1>
            <h3 class="conclusion-subheadline">{{headline}}</h3>
            <div class="conclusion-text">
                <p>
                    {{text_short}} <a href="https://de.wikipedia.org/wiki/Ansatz">Link</a> {{text_short}}
                </p>
                <p><strong>Kurz:</strong> {{text_short}}</p>
            </div>


            <a class="btn btn--large btn--inverted" data-label="Sprechen Sie mit uns" href="#">Sprechen Sie mit uns</a>
        </div>
    </section>

    <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>
</main>
{
  "code": "pick(:love) do |something|\n    n.times do\n        result = play(something)\n        result.publish\n    end\nend\n",
  "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.",
  "text_short": "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.",
  "headline": "Ich bin eine Headline",
  "listitem": "Ich bin ein kleines Listitem",
  "quote": "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr."
}
  • Content:
    .case-study-page {
      @extend %article-layout-simple;
    
      .customerlogo {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: $spacer-lg;
        margin-bottom: $spacer-lg;
    
        @media screen and (min-width: $grid-breakpoint-lg-xl) {
          grid-column: 3 / 4;
        }
    
        img {
          max-width: 40%;
        }
      }
    }
    
  • URL: /components/raw/case-study-page/_case-study-page.scss
  • Filesystem Path: components/01-pages/case-study-pages/case-study-page/_case-study-page.scss
  • Size: 342 Bytes
  • Handle: @case-study-page
  • Preview:
  • Filesystem Path: components/01-pages/case-study-pages/case-study-page/case-study-page.html

No notes defined.