Talk Page

<main role="main" class="talk-page">
    <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>

    <article class="page-layout-md--default">
        <h1>Ich bin eine Headline</h1>
        <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>

        <h2>Ich bin eine Headline</h2>

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

        <ul>
            <li>
                <p>Ich bin ein kleines Listitem</p>
            </li>
            <li>Ich bin ein kleines Listitem</li>
            <li>Ich bin ein kleines Listitem</li>
        </ul>

        <dl class="date-location-section">
            <dt>Datum</dt>
            <dd>24.12.2018</dd>
            <dt>Uhrzeit</dt>
            <dd>13 - 15 Uhr</dd>
            <dt>Ort</dt>
            <dd>INNOQ Monheim</dd>
        </dl>
    </article>

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

    <aside class="container-md container-vertical-spacing-lg">
        <h2 class='teaser-section-heading'>Speaker:in</h2>
        <div class="tile-grid-sm">
            <div id="author-bio" class="author-bio author-bio--long" itemscope itemtype="http://schema.org/Person">
                <a rel="author" class="author-bio__head" itemprop="url" href="#">
                    <div class="author-bio__image avatar avatar--base">
                        <img itemprop="photo" class="avatar__image" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
                    </div>
                    <address class="author">
                        <span rel="author" class="author-bio__name" itemprop="fullName">Heribert Innoq</span>
                        <span class="author-bio__info" itemprop="jobTitle">Senior Consultant</span>
                    </address>
                </a>
                <address class="author-bio__social">
                    <a rel="author" class="author-bio__social-profile" href="#" title="Twitter">
                        <span class="icon icon--small icon-twitter icon--brand-secondary"></span>
                    </a>
                    <a rel="author" class="author-bio__social-profile" href="#" title="GitHub">
                        <span class="icon icon--small icon-github icon--brand-secondary"></span>
                    </a>
                </address>
                <div class="author-bio__text">
                    <p>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>
        </div>
        <a class="link-teaser" href="#">Mehr Vorträge von Heribert Innoq</a>
    </aside>
</main>