Staff Page

<main role="main" class="staff-page">
    <header class="staff-header">
        <div class="staff-header__body">
            <div class="staff-header__profile" itemscope itemtype="http://schema.org/Person">
                <div class="staff-header__profile__person">
                    <h1 class="staff-header__profile__person__name" itemprop="fullName">Dr. Heribert Innoq</h1>
                    <p class="staff-header__profile__person__role" itemprop="jobTitle">Fellow</p>
                    <p class="staff-header__profile__person__link" itemprop="url"><a class="link-teaser" href="#">Trainerprofil</a> bei Socreatory</p>
                </div>
                <div class="avatar avatar--xxl">
                    <img class="avatar__image" itemprop="photo" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                </div>
            </div>
            <p class="staff-header__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.</p>
            <ul class="social-media-bar">
                <li class="social-media-bar__item">
                    <a href="#" class="social-media-bar__link" title="Twitter">
                        <span class="icon icon-twitter icon--brand-secondary"></span>
                    </a>
                </li>
                <li class="social-media-bar__item">
                    <a href="#" class="social-media-bar__link" title="Bluesky">
                        <span class="icon icon-bluesky icon--brand-secondary"></span>
                    </a>
                </li>
                <li class="social-media-bar__item">
                    <a href="#" class="social-media-bar__link" title="Youtube">
                        <span class="icon icon-youtube icon--brand-secondary"></span>
                    </a>
                </li>
                <li class="social-media-bar__item">
                    <a href="#" class="social-media-bar__link" title="Linkedin">
                        <span class="icon icon-linkedin icon--brand-secondary"></span>
                    </a>
                </li>
                <li class="social-media-bar__item">
                    <a href="#" class="social-media-bar__link" title="Xing">
                        <span class="icon icon-xing icon--brand-secondary"></span>
                    </a>
                </li>
                <li class="social-media-bar__item">
                    <a href="#" class="social-media-bar__link" title="Speakerdeck">
                        <span class="icon icon-speakerdeck icon--brand-secondary"></span>
                    </a>
                </li>
            </ul>
        </div>
    </header>

    <div class="container-xl container-vertical-spacing-lg">
        <h2 class="section-heading--secondary ">Shortlist</h2>
        <div class="tile-grid-sm">

            <a href="#" class="small-tile-teaser">
                <div>
                    <p class="small-tile-teaser__type">Blogpost</p>
                    <h4 class="small-tile-teaser__title">Ich bin eine Headline</h4>
                    <h5 class="small-tile-teaser__subtitle">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</h5>
                </div>
                <span class="icon icon-arrow-long-right icon--brand-primary"></span>
            </a>

            <a href="#" class="small-tile-teaser">
                <div>
                    <p class="small-tile-teaser__type">Blogpost</p>
                    <h4 class="small-tile-teaser__title">Ich bin eine Headline</h4>
                    <h5 class="small-tile-teaser__subtitle">ich bin eine subheadline</h5>
                </div>
                <span class="icon icon-arrow-long-right icon--brand-primary"></span>
            </a>

            <a href="#" class="small-tile-teaser">
                <div>
                    <p class="small-tile-teaser__type">Blogpost</p>
                    <h4 class="small-tile-teaser__title">Ich bin eine Headline</h4>
                    <h5 class="small-tile-teaser__subtitle">ich bin eine subheadline</h5>
                </div>
                <span class="icon icon-arrow-long-right icon--brand-primary"></span>
            </a>

            <a href="#" class="small-tile-teaser">
                <div>
                    <p class="small-tile-teaser__type">Blogpost</p>
                    <h4 class="small-tile-teaser__title">Ich bin eine Headline</h4>
                    <h5 class="small-tile-teaser__subtitle">ich bin eine subheadline</h5>
                </div>
                <span class="icon icon-arrow-long-right icon--brand-primary"></span>
            </a>
        </div>
        <a class="link-teaser" href="#">Mehr erfahren</a>
    </div>

    <section class="stripe stripe--gray">
        <div class="container-xl container-vertical-spacing-lg">
            <h2 class="section-heading--secondary">Vorträge</h2>
            <div class="tile-grid-md">
                <a href="#" class="list-teaser-event">
                    <div class="event-date-section">
                        <div class="label talk">Vortrag</div>
                        <time class="event-date" datetime="2017-06-23">
                            <span class="event-day-month">
                                <span class='event-day'>23</span>
                                <span class='event-month'>Jun</span>
                            </span>
                            <span class='event-year'>2017</span>
                        </time>
                    </div>
                    <div class="list-teaser__content">
                        <div class="list-teaser__body">
                            <div class="label talk">Vortrag</div>
                            <div class="label slides">Folien verfügbar</div>
                            <h2 class="list-teaser-event__headline">Ich bin eine Headline</h2>
                            <h3 class="list-teaser-event__subheadline">
                                Vortragsort / 10-12 Uhr
                                <span class="icon icon-arrow-long-right icon--brand-primary"></span>
                            </h3>
                        </div>
                        <div class="list-teaser__footer">
                            <div rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                                <div class="author-bio__image avatar avatar--sm">
                                    <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                                </div>
                                <address>
                                    <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                                    <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                                </address>
                            </div>
                            <div rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                                <div class="author-bio__image avatar avatar--sm">
                                    <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                                </div>
                                <address>
                                    <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                                    <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                                </address>
                            </div>
                        </div>
                    </div>
                </a>
                <a href="#" class="list-teaser-event">
                    <div class="event-date-section">
                        <div class="label talk">Vortrag</div>
                        <time class="event-date" datetime="2017-06-23">
                            <span class="event-day-month">
                                <span class='event-day'>23</span>
                                <span class='event-month'>Jun</span>
                            </span>
                            <span class='event-year'>2017</span>
                        </time>
                    </div>
                    <div class="list-teaser__content">
                        <div class="list-teaser__body">
                            <div class="label talk">Vortrag</div>
                            <div class="label slides">Folien verfügbar</div>
                            <h2 class="list-teaser-event__headline">Ich bin eine Headline</h2>
                            <h3 class="list-teaser-event__subheadline">
                                Vortragsort / 10-12 Uhr
                                <span class="icon icon-arrow-long-right icon--brand-primary"></span>
                            </h3>
                        </div>
                        <div class="list-teaser__footer">
                            <div rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                                <div class="author-bio__image avatar avatar--sm">
                                    <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                                </div>
                                <address>
                                    <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                                    <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                                </address>
                            </div>
                            <div rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                                <div class="author-bio__image avatar avatar--sm">
                                    <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                                </div>
                                <address>
                                    <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                                    <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                                </address>
                            </div>
                        </div>
                    </div>
                </a>
                <a href="#" class="list-teaser-event">
                    <div class="event-date-section">
                        <div class="label talk">Vortrag</div>
                        <time class="event-date" datetime="2017-06-23">
                            <span class="event-day-month">
                                <span class='event-day'>23</span>
                                <span class='event-month'>Jun</span>
                            </span>
                            <span class='event-year'>2017</span>
                        </time>
                    </div>
                    <div class="list-teaser__content">
                        <div class="list-teaser__body">
                            <div class="label talk">Vortrag</div>
                            <div class="label slides">Folien verfügbar</div>
                            <h2 class="list-teaser-event__headline">Ich bin eine Headline</h2>
                            <h3 class="list-teaser-event__subheadline">
                                Vortragsort / 10-12 Uhr
                                <span class="icon icon-arrow-long-right icon--brand-primary"></span>
                            </h3>
                        </div>
                        <div class="list-teaser__footer">
                            <div rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                                <div class="author-bio__image avatar avatar--sm">
                                    <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                                </div>
                                <address>
                                    <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                                    <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                                </address>
                            </div>
                            <div rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                                <div class="author-bio__image avatar avatar--sm">
                                    <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                                </div>
                                <address>
                                    <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                                    <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                                </address>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <a class="link-teaser" href="#">Mehr erfahren</a>
        </div>
    </section>

    <div class="container-xl container-vertical-spacing-lg">
        <h2 class="section-heading--primary">Podcasts</h2>
        <div class="podcast-grid">
            <a href="#" class="podcast-teaser podcast-teaser--avatar--overlay" style="background-image: url(../../assets/example-content/heribert-rechts.png)">
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Podcast</div>
                    <h2 class="podcast-teaser__headline">Ich bin eine Headline</h2>
                    <h3 class="podcast-teaser__subheadline">ich bin eine subheadline</h3>
                    <span class="icon icon-arrow-long-right icon--brand-white"></span>
                </div>
                <div class="podcast-teaser__footer">
                    <div class="podcast-author" itemscope itemtype="http://schema.org/Person">
                        Heribert Innoq
                    </div>
                </div>
            </a>

            <a href="#" class="podcast-teaser podcast-teaser--default">
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Podcast</div>
                    <h2 class="podcast-teaser__headline">Ich bin eine Headline</h2>
                    <h3 class="podcast-teaser__subheadline">ich bin eine subheadline</h3>
                    <span class="icon icon-arrow-long-right icon--brand-white"></span>
                </div>
                <div class="podcast-teaser__footer">
                    <div class="podcast-author" itemscope itemtype="http://schema.org/Person">
                        Heribert Innoq
                    </div>
                    <div class="podcast-author" itemscope itemtype="http://schema.org/Person">
                        Heribert Innoq
                    </div>
                </div>
            </a>

            <a href="#" class="podcast-teaser podcast-teaser--avatar" style="background-image: url(../../assets/example-content/heribert-rechts.png)">
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Podcast</div>
                    <h2 class="podcast-teaser__headline">Ich bin eine Headline</h2>
                    <h3 class="podcast-teaser__subheadline">ich bin eine subheadline</h3>
                    <span class="icon icon-arrow-long-right icon--brand-primary"></span>
                </div>
                <div class="podcast-teaser__footer">
                    <div class="podcast-author" itemscope itemtype="http://schema.org/Person">
                        Heribert Innoq
                    </div>
                </div>
            </a>

            <a href="#" class="podcast-teaser podcast-teaser--default">
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Podcast</div>
                    <h2 class="podcast-teaser__headline">Ich bin eine Headline</h2>
                    <h3 class="podcast-teaser__subheadline">ich bin eine subheadline</h3>
                    <span class="icon icon-arrow-long-right icon--brand-white"></span>
                </div>
                <div class="podcast-teaser__footer">
                    <div class="podcast-author" itemscope itemtype="http://schema.org/Person">
                        Heribert Innoq
                    </div>
                </div>
            </a>

            <a href="#" class="podcast-teaser podcast-teaser--avatar--overlay--big" style="background-image: url(../../assets/example-content/heribert-rechts.png), url(../../assets/example-content/heribert-links.png) ">
                <div class="podcast-teaser__body">
                    <div class="podcast-teaser__caption">Podcast</div>
                    <h2 class="podcast-teaser__headline">Ich bin eine Headline</h2>
                    <h3 class="podcast-teaser__subheadline">ich bin eine subheadline</h3>
                    <span class="icon icon-arrow-long-right icon--brand-white"></span>
                </div>
                <div class="podcast-teaser__footer">
                    <div class="podcast-author" itemscope itemtype="http://schema.org/Person">
                        Heribert Innoq
                    </div>
                    <div class="podcast-author" itemscope itemtype="http://schema.org/Person">
                        Heribert Innoq
                    </div>
                </div>
            </a>
        </div>
        <a class="link-teaser" href="#">Mehr erfahren</a>
    </div>

    <section class="stripe stripe--bg-image bg-image-edition-11">
        <div class="container-xl container-vertical-spacing-xl">
            <h2 class="section-heading--secondary section-heading--inverted">Artikel</h2>
            <div class="tile-grid-md">
                <a href="#" class="list-teaser">
                    <div class="list-teaser__body">
                        <div class="list-teaser__caption">Artikel</div>
                        <h2 class="list-teaser__headline">Ich bin eine Headline</h2>
                        <h3 class="list-teaser__subheadline">
                            ich bin eine subheadline
                            <span class="icon icon-arrow-long-right icon--brand-primary"></span>
                        </h3>
                    </div>
                    <div class="list-teaser__footer">
                        <div rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                            <div class="author-bio__image avatar avatar--sm">
                                <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                            </div>
                            <address>
                                <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                                <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                            </address>
                        </div>
                    </div>
                </a>
                <a href="#" class="list-teaser">
                    <div class="list-teaser__body">
                        <div class="list-teaser__caption">Artikel</div>
                        <h2 class="list-teaser__headline">Ich bin eine Headline</h2>
                        <h3 class="list-teaser__subheadline">
                            ich bin eine subheadline
                            <span class="icon icon-arrow-long-right icon--brand-primary"></span>
                        </h3>
                    </div>
                    <div class="list-teaser__footer">
                        <div rel="author" class="author-bio author-bio--short" href="#author-bio" itemscope itemtype="http://schema.org/Person">
                            <div class="author-bio__image avatar avatar--sm">
                                <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                            </div>
                            <address>
                                <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                                <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                            </address>
                        </div>
                    </div>
                </a>
            </div>
            <a class="link-teaser inverted-interaction-color" href="#">Mehr erfahren</a>
        </div>
    </section>

    <div class="container-md container-vertical-spacing-lg">
        <h2 class="section-heading--secondary">Was ich noch sagen wollte</h2>
        <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>
</main>