<main role="main" class="staff-page">
    <header class="staff-header">
        <div class="staff-header-content">
            <div class="staff-header-quote">
                <h2 class="staff-header-quote--text">"Wir lösen das persönlich."</h2><cite class="staff-header-quote--author" itemprop="name">Heribert Innoq</cite>
            </div>
            <img class="staff-header-image" itemprop="photo" src="../../assets/heribert.jpg" alt="Portrait von Heribert Innoq">
        </div>
    </header>
    <div class="staff-intro">
        <h2 class="staff-intro--name" itemprop="name">Heribert Inooq</h2>
        <h3 class="staff-intro--job-title" itemprop="jobTitle">Senior Consultant</h3>
        <div class="staff-intro--text">Filet mignon sausage tongue, hamburger porchetta fatback kielbasa flank
            ribeye. Pastrami t-bone pork chop sirloin ham swine cupim brisket prosciutto
            buffalo drumstick strip steak capicola short loin. Frankfurter fatback
            turkey pork chop prosciutto pork ground round tongue chuck doner. Pig venison
            pork chop shoulder corned beef capicola meatball.</div>
        <section class="staff-intro--social">
            <ul class="share-section__list">
                <li><a class="share-section__link" target="_blank" href="http://twitter.com/share?url=https%3A%2F%2Fwww.innoq.com%2Fde%2Farticles%2F2017%2F06%2Finnovation-tokens%2F&amp;text=Innovation+Tokens+%E2%80%93+Gegen+Informatikerromantik+und+Technologie%C3%BCberflutung+von+%40heribert_innoq&amp;via=innoq"><i class="icon icon-twitter"></i></a>
                </li>
                <li><a class="share-section__link" href="mailto:?subject=Innovation+Tokens+%E2%80%93+Gegen+Informatikerromantik+und+Technologie%C3%BCberflutung&amp;body=https%3A%2F%2Fwww.innoq.com%2Fde%2Farticles%2F2017%2F06%2Finnovation-tokens%2F"><i class="icon icon-email"></i></a>
                </li>
            </ul>
        </section>
    </div>
    <section class="stripe stripe--primary">
        <div class="page-layout-md--default">
            <h2 class="section-heading--primary ">Vorträge</h2><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">Vortrag Titel</h2>
                        <h3 class="list-teaser-event__subheadline">Vortragsort / 10-12 Uhr<img class="arrow-right" src="../../assets/arrow-long-right-red.svg"></h3>
                    </div>
                    <div class="list-teaser__footer">
                        <div class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                            <div class="author-bio__image avatar avatar--small"><img class="avatar__image" itemprop="photo" src="../../assets/heribert.jpg" alt="Portrait von Heribert Innoq"></div>
                            <div class="author-bio__text">
                                <div class="author-bio__name" itemprop="name">Heribert Innoq</div>
                                <div class="author-bio__info" itemprop="jobTitle">Senior Consultant</div>
                            </div>
                        </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">Vortrag Titel</h2>
                        <h3 class="list-teaser-event__subheadline">Vortragsort / 10-12 Uhr<img class="arrow-right" src="../../assets/arrow-long-right-red.svg"></h3>
                    </div>
                    <div class="list-teaser__footer">
                        <div class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                            <div class="author-bio__image avatar avatar--small">
                                <img class="avatar__image" itemprop="photo" src="../../assets/heribert.jpg" alt="Portrait von Heribert Innoq">
                            </div>
                            <div class="author-bio__text">
                                <div class="author-bio__name" itemprop="name">Heribert Innoq</div>
                                <div class="author-bio__info" itemprop="jobTitle">Senior Consultant</div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <div class="staff-page--link"><a class="link-teaser" href="#">Alles Vorträge ansehen</a>
            </div>
            <h2 class="section-heading--primary ">Trainings</h2><a href="#" class="list-teaser-event">
                <div class="event-date-section">
                    <div class="label talk">Training</div>
                    <div class="event-date-wrapper"><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></time>
                        <hr class="event-date-separator"><time class="event-date" datetime="2017-06-24"><span class="event-day-month"><span class="event-day">24</span><span class="event-month">Jun</span></span><span class="event-year">2017</span></time></div>
                </div>
                <div class="list-teaser__content">
                    <div class="list-teaser__body">
                        <div class="label training">Training</div>
                        <h2 class="list-teaser-event__headline">Training Titel</h2>
                        <h3 class="list-teaser-event__subheadline">Trainingsort<img class="arrow-right" src="../../assets/arrow-long-right-red.svg"></h3>
                    </div>
                    <div class="list-teaser-event__footer">
                        <div class="link-teaser">Mehr erfahren</div>
                    </div>
                </div>
            </a>
            <a href="#" class="list-teaser-event">
                <div class="event-date-section">
                    <div class="label talk">Training</div>
                    <div class="event-date-wrapper">
                        <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>
                        </time>
                        <hr class="event-date-separator">
                        <time class="event-date" datetime="2017-06-24"><span class="event-day-month"><span class="event-day">24</span><span class="event-month">Jun</span></span>
                            <span class="event-year">2017</span>
                        </time>
                    </div>
                </div>
                <div class="list-teaser__content">
                    <div class="list-teaser__body">
                        <div class="label training">Training</div>
                        <h2 class="list-teaser-event__headline">Training Titel</h2>
                        <h3 class="list-teaser-event__subheadline">Trainingsort<img class="arrow-right" src="../../assets/arrow-long-right-red.svg"></h3>
                    </div>
                    <div class="list-teaser-event__footer">
                        <div class="link-teaser">Mehr erfahren</div>
                    </div>
                </div>
            </a>
            <div class="staff-page--link"><a class="link-teaser" href="#">Alle Trainings ansehen</a>
            </div>
            <h2 class="section-heading--primary ">Weitere Inhalte</h2><a href="#" class="list-teaser-abstract primary">
                <div class="list-teaser__body">
                    <div class="list-teaser-abstract__caption">Artikel</div>
                    <h2 class="list-teaser-abstract__headline">Artikel Headline</h2>
                    <p class="list-teaser-abstract__text">Lorem gibson dermatrodes boy nodality neural office sprawl futurity Lado-Acheson count zero interrupt Night City tanto papier-mache kanji corporation meta-lights neurosurgery. Lorem gibson Chiba neon neon motion Mycotoxin Metro Holografix boat RAM AI disposable lights saturation point stimulate boat systemic vehicle.<img class="arrow-right" src="../../assets/arrow-long-right-white.svg"></p>
                </div>
                <div class="list-teaser__footer">
                    <div class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                        <div class="author-bio__image avatar avatar--small"><img class="avatar__image" itemprop="photo" src="../../assets/heribert.jpg" alt="Portrait von Heribert Innoq"></div>
                        <div class="author-bio__text">
                            <div class="author-bio__name" itemprop="name">Heribert Innoq</div>
                            <div class="author-bio__info" itemprop="jobTitle">Senior Consultant</div>
                        </div>
                    </div>
                </div>
            </a>
            <a href="#" class="list-teaser-podcast list-teaser-podcast--avatar--overlay--big" style="background-image: url(../../assets/heribert-rechts.png), url(../../assets/heribert-links.png);">
                <div class="list-teaser-podcast__body">
                    <div class="list-teaser-podcast__caption">Podcast</div>
                    <h2 class="list-teaser-podcast__headline">Podcast Headline</h2>
                    <h3 class="list-teaser-podcast__subheadline">Podcast Subheadline</h3>
                    <img src="../../assets/arrow-long-right-white.svg">
                </div>
                <div class="list-teaser-podcast__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 class="staff-page--link"><a class="link-teaser" href="#">Weitere Inhalte ansehen</a>
            </div>
        </div>
    </section>
</main>
import { cssBoth } from "./components/02-molecules/visual-elements/teaser/list-teaser/podcast-list-teaser/config";
<main role="main" class="staff-page">
    <header class="staff-header">
        <div class="staff-header-content">
            <div class="staff-header-quote">
                <h2 class="staff-header-quote--text">"Wir lösen das persönlich."</h2>
                <cite class="staff-header-quote--author" itemprop="name">Heribert Innoq</cite>
            </div>
            <img class="staff-header-image" itemprop="photo" src={context.app.uri("assets/heribert.jpg")} alt="Portrait von Heribert Innoq" />
        </div>
    </header>
    <div class="staff-intro">
        <h2 class="staff-intro--name" itemprop="name">Heribert Inooq</h2>
        <h3 class="staff-intro--job-title" itemprop="jobTitle">Senior Consultant</h3>
        <div class="staff-intro--text">
            Filet mignon sausage tongue, hamburger porchetta fatback kielbasa flank
            ribeye. Pastrami t-bone pork chop sirloin ham swine cupim brisket
            prosciutto buffalo drumstick strip steak capicola short loin.
            Frankfurter fatback turkey pork chop prosciutto pork ground round tongue
            chuck doner. Pig venison pork chop shoulder corned beef capicola
            meatball.
        </div>
        <section class="staff-intro--social">
            <ul class="share-section__list">
                <li>
                    <a class="share-section__link" target="_blank" href="http://twitter.com/share?url=https%3A%2F%2Fwww.innoq.com%2Fde%2Farticles%2F2017%2F06%2Finnovation-tokens%2F&amp;text=Innovation+Tokens+%E2%80%93+Gegen+Informatikerromantik+und+Technologie%C3%BCberflutung+von+%40heribert_innoq&amp;via=innoq">
                        <i class="icon icon-twitter"></i>
                    </a>
                </li>
                <li>
                    <a class="share-section__link" href="mailto:?subject=Innovation+Tokens+%E2%80%93+Gegen+Informatikerromantik+und+Technologie%C3%BCberflutung&amp;body=https%3A%2F%2Fwww.innoq.com%2Fde%2Farticles%2F2017%2F06%2Finnovation-tokens%2F">
                        <i class="icon icon-email"></i>
                    </a>
                </li>
            </ul>
        </section>
    </div>

    <section class="stripe stripe--primary">
        <div class="page-layout-md--default">
            <h2 class="section-heading--primary ">Vorträge</h2>

            <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">Vortrag Titel</h2>
                        <h3 class="list-teaser-event__subheadline">
                            Vortragsort / 10-12 Uhr
                            <img class="arrow-right" src={context.app.uri("assets/arrow-long-right-red.svg")} />
                        </h3>
                    </div>
                    <div class="list-teaser__footer">
                        <div class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                            <div class="author-bio__image avatar avatar--small">
                                <img class="avatar__image" itemprop="photo" src={context.app.uri("assets/heribert.jpg")} alt="Portrait von Heribert Innoq" />
                            </div>
                            <div class="author-bio__text">
                                <div class="author-bio__name" itemprop="name">
                                    Heribert Innoq
                                </div>
                                <div class="author-bio__info" itemprop="jobTitle" >Senior Consultant</div>
                            </div>
                        </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">Vortrag Titel</h2>
                        <h3 class="list-teaser-event__subheadline">
                            Vortragsort / 10-12 Uhr
                            <img class="arrow-right" src={context.app.uri("assets/arrow-long-right-red.svg")} />
                        </h3>
                    </div>
                    <div class="list-teaser__footer">
                        <div class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                            <div class="author-bio__image avatar avatar--small">
                                <img class="avatar__image" itemprop="photo" src={context.app.uri("assets/heribert.jpg")} alt="Portrait von Heribert Innoq" />
                            </div>
                            <div class="author-bio__text">
                                <div class="author-bio__name" itemprop="name">
                                    Heribert Innoq
                                </div>
                                <div class="author-bio__info" itemprop="jobTitle" >Senior Consultant</div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <div class="staff-page--link"><a class="link-teaser" href="#">Alles Vorträge ansehen</a></div>

            <h2 class="section-heading--primary ">Trainings</h2>
            <a href="#" class="list-teaser-event">
              <div class="event-date-section">
                  <div class="label talk">Training</div>
                  <div class="event-date-wrapper">
                      <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>
                      </time>
                      <hr class="event-date-separator" />
                      <time class="event-date" datetime="2017-06-24">
                          <span class="event-day-month">
                              <span class='event-day'>24</span>
                              <span class='event-month'>Jun</span>
                          </span>
                          <span class='event-year'>2017</span>
                      </time>
                  </div>
              </div>
              <div class="list-teaser__content">
                  <div class="list-teaser__body">
                      <div class="label training">Training</div>
                      <h2 class="list-teaser-event__headline">Training Titel</h2>
                      <h3 class="list-teaser-event__subheadline">
                          Trainingsort
                          <img class="arrow-right" src={context.app.uri("assets/arrow-long-right-red.svg")} />
                      </h3>
                  </div>
                  <div class="list-teaser-event__footer">
                      <div class="link-teaser">Mehr erfahren</div>
                  </div>
              </div>
            </a>
            <a href="#" class="list-teaser-event">
              <div class="event-date-section">
                  <div class="label talk">Training</div>
                  <div class="event-date-wrapper">
                      <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>
                      </time>
                      <hr class="event-date-separator" />
                      <time class="event-date" datetime="2017-06-24">
                          <span class="event-day-month">
                              <span class='event-day'>24</span>
                              <span class='event-month'>Jun</span>
                          </span>
                          <span class='event-year'>2017</span>
                      </time>
                  </div>
              </div>
              <div class="list-teaser__content">
                  <div class="list-teaser__body">
                      <div class="label training">Training</div>
                      <h2 class="list-teaser-event__headline">Training Titel</h2>
                      <h3 class="list-teaser-event__subheadline">
                          Trainingsort
                          <img class="arrow-right" src={context.app.uri("assets/arrow-long-right-red.svg")} />
                      </h3>
                  </div>
                  <div class="list-teaser-event__footer">
                      <div class="link-teaser">Mehr erfahren</div>
                  </div>
              </div>
            </a>
            <div class="staff-page--link"><a class="link-teaser" href="#">Alle Trainings ansehen</a></div>

            <h2 class="section-heading--primary ">Weitere Inhalte</h2>
            <a href="#" class="list-teaser-abstract primary">
                <div class="list-teaser__body">
                    <div class="list-teaser-abstract__caption">Artikel</div>
                    <h2 class="list-teaser-abstract__headline">Artikel Headline</h2>
                    <p class="list-teaser-abstract__text">
                        Lorem gibson dermatrodes boy nodality neural office sprawl futurity Lado-Acheson count zero interrupt Night City tanto papier-mache kanji corporation meta-lights neurosurgery.
                        Lorem gibson Chiba neon neon motion Mycotoxin Metro Holografix boat RAM AI disposable lights saturation point stimulate boat systemic vehicle.
                        <img class="arrow-right" src={context.app.uri("assets/arrow-long-right-white.svg")} />
                    </p>
                </div>
                <div class="list-teaser__footer">
                    <div class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                        <div class="author-bio__image avatar avatar--small">
                            <img class="avatar__image" itemprop="photo" src={context.app.uri("assets/heribert.jpg")} alt="Portrait von Heribert Innoq" />
                        </div>
                        <div class="author-bio__text">
                            <div class="author-bio__name" itemprop="name">
                                Heribert Innoq
                            </div>
                            <div class="author-bio__info" itemprop="jobTitle" >Senior Consultant</div>
                        </div>
                    </div>
                </div>
            </a>
            <a href="#" class="list-teaser-podcast list-teaser-podcast--avatar--overlay--big" style={cssBoth}>
                <div class="list-teaser-podcast__body">
                    <div class="list-teaser-podcast__caption">Podcast</div>
                    <h2 class="list-teaser-podcast__headline">Podcast Headline</h2>
                    <h3 class="list-teaser-podcast__subheadline">
                        Podcast Subheadline
                    </h3>
                    <img src={context.app.uri("assets/arrow-long-right-white.svg")} />
                </div>
                <div class="list-teaser-podcast__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 class="staff-page--link"><a class="link-teaser" href="#">Weitere Inhalte ansehen</a></div>
        </div>
    </section>
</main>
/* No context defined for this component. */

There are no notes for this item.