# Talk Page

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

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

`
`

    <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>{{headline}}</h1>
            <p>{{text_short}}</p>

            <h2>{{headline}}</h2>

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

            <ul>
                <li><p>{{listitem}}</p></li>
                <li>{{listitem}}</li>
                <li>{{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="{{ path '/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>{{text_short}}</p>
                    </div>
                </div>
            </div>
            <a class="link-teaser" href="#">Mehr Vorträge von Heribert Innoq</a>
        </aside>
    </main>

`
`

    {
      "listitem": "Ich bin ein kleines Listitem",
      "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"
    }

`
File:

- Content:
  `

      .talk-page {
        display: flex;
        flex-direction: column;
        margin-top: $spacer-xl;

        .event-date-section {
          align-self: center;
        }
      }

  `
- URL: /components/raw/talk-page/_talk-page.scss
- Filesystem Path: components/01-pages/talk-pages/talk-page/_talk-page.scss
- Size: 137 Bytes

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

No notes defined.