Case Study Page

Ready

HTML
View
Context
Assets
Info
Notes


        
        <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">
        <aside class="toc">
            <h3 class="toc__heading">Inhalt</h3>
            <ol class="toc__list">
                <li><a class="toc__anchor" href="#">Ich bin ein kleines Listitem</a></li>
                <li><a class="toc__anchor" href="#">Ich bin ein kleines Listitem</a></li>
                <li><a class="toc__anchor" href="#">Ich bin ein kleines Listitem</a></li>
                <li><a class="toc__anchor" href="#">Ich bin ein kleines Listitem</a></li>
                <li><a class="toc__anchor" href="#">Ich bin ein kleines Listitem</a></li>
                <li><a class="toc__anchor" href="#">Ich bin ein kleines Listitem</a></li>
            </ol>
        </aside>

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

        <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>
    <div class="container-md container-vertical-spacing-xl">
        <div class="cta-section-long" itemscope itemtype="http://schema.org/Person">
            <a rel="author" class="cta-section-long__head" itemprop="url" href="#">
                <div class="cta-section-long__image avatar avatar--xl">
                    <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                </div>
                <div>
                    <span rel="author" class="cta-section-long__name" itemprop="fullName">Heribert Innoq</span>
                    <span class="cta-section-long__info" itemprop="jobTitle">Senior Consultant</span>
                </div>
            </a>
            <div class="cta-section-long-body">
                <p class="lead">Unser Principal Heribert Innoq steht Ihnen bei Fragen mit Rat und Tat zur Seite. Er freut
                    sich, wenn
                    sie sich bei ihm melden...
                </p>
                <h3 class="cta-section-long__headline">Termin bei Heribert buchen</h3>
                <button class="btn btn--cta btn--cta--inverted btn--small" data-label="Termin vereinbaren">Termin
                    vereinbarewn</button>
                <h3 class="cta-section-long__headline m-t-lg">Kontakt aufnehmen</h3>
                <form class="form" novalidate="novalidate" accept-charset="UTF-8" method="post" style="width: 100%;">
                    <div class="form-group">
                        <label class="form-label" for="contact_message_company">Firma</label>
                        <input required="required" class="form-control" type="text" name="contact_message[name]" id="contact_message_company">
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="contact_message_name">Name</label>
                        <input required="required" class="form-control" type="text" name="contact_message[name]" id="contact_message_name">
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="contact_message_email">E-Mail</label>
                        <input required="required" class="form-control" type="email" name="contact_message[email]" id="contact_message_email">
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="contact_message_content">Bemerkungen</label>
                        <textarea required="required" class="form-control" rows="5" name="contact_message[content]" id="contact_message_content" placeholder="Nennen Sie uns gerne Ihre Anforderungen, wie etwa Anzahl der Teilnehmer:innen, Ausrichtungsort und Terminwünsche."></textarea>
                    </div>
                    <button name="button" type="submit" class="btn btn--cta btn--cta--inverted btn--small" data-label="Abschicken">Abschicken</button>
                </form>
            </div>
        </div>
    </div>
    <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>
        </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>
</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">
        <aside class="toc">
            <h3 class="toc__heading">Inhalt</h3>
            <ol class="toc__list">
                <li><a class="toc__anchor" href="#">{{listitem}}</a></li>
                <li><a class="toc__anchor" href="#">{{listitem}}</a></li>
                <li><a class="toc__anchor" href="#">{{listitem}}</a></li>
                <li><a class="toc__anchor" href="#">{{listitem}}</a></li>
                <li><a class="toc__anchor" href="#">{{listitem}}</a></li>
                <li><a class="toc__anchor" href="#">{{listitem}}</a></li>
            </ol>
        </aside>

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

        <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>
    <div class="container-md container-vertical-spacing-xl">
        <div class="cta-section-long" itemscope itemtype="http://schema.org/Person">
            <a rel="author" class="cta-section-long__head" itemprop="url" href="#">
                <div class="cta-section-long__image avatar avatar--xl">
                    <img itemprop="photo" class="avatar__image" src="{{ path '/assets/example-content/heribert.jpg' }}"
                        alt="Portrait von Heribert Innoq" />
                </div>
                <div>
                    <span rel="author" class="cta-section-long__name" itemprop="fullName">Heribert Innoq</span>
                    <span class="cta-section-long__info" itemprop="jobTitle">Senior Consultant</span>
                </div>
            </a>
            <div class="cta-section-long-body">
                <p class="lead">Unser Principal Heribert Innoq steht Ihnen bei Fragen mit Rat und Tat zur Seite. Er freut
                    sich, wenn
                    sie sich bei ihm melden...
                </p>
                <h3 class="cta-section-long__headline">Termin bei Heribert buchen</h3>
                <button class="btn btn--cta btn--cta--inverted btn--small" data-label="Termin vereinbaren">Termin
                    vereinbarewn</button>
                <h3 class="cta-section-long__headline m-t-lg">Kontakt aufnehmen</h3>
                <form class="form" novalidate="novalidate" accept-charset="UTF-8" method="post" style="width: 100%;">
                    <div class="form-group">
                        <label class="form-label" for="contact_message_company">Firma</label>
                        <input required="required" class="form-control" type="text" name="contact_message[name]"
                            id="contact_message_company">
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="contact_message_name">Name</label>
                        <input required="required" class="form-control" type="text" name="contact_message[name]"
                            id="contact_message_name">
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="contact_message_email">E-Mail</label>
                        <input required="required" class="form-control" type="email" name="contact_message[email]"
                            id="contact_message_email">
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="contact_message_content">Bemerkungen</label>
                        <textarea required="required" class="form-control" rows="5" name="contact_message[content]"
                            id="contact_message_content"
                            placeholder="Nennen Sie uns gerne Ihre Anforderungen, wie etwa Anzahl der Teilnehmer:innen, Ausrichtungsort und Terminwünsche."></textarea>
                    </div>
                    <button name="button" type="submit" class="btn btn--cta btn--cta--inverted btn--small"
                        data-label="Abschicken">Abschicken</button>
                </form>
            </div>
        </div>
    </div>
    <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>
        </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>
</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."
}

File:

Content:


                                .case-study-page {
  @extend %article-layout;

  .customerlogo {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: $spacer-lg;
    margin-bottom: $spacer-lg;

    img {
      max-width: 40%;
    }

    @media screen and (min-width: $grid-breakpoint-lg-xl) {
      grid-column: 5 / 6;
    }
  }
}

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: 336 Bytes

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

No notes defined.