# Aggregator Page

Ready

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

`

    <main role="main" class="stripe stripe--gray">
        <header class="topic-header bg-image-edition-21">
            <div class="topic-header__body">
                <h3 class="topic-header__type">Schwerpunktthema <span class="topic-header__tag">Microservices</span></h3>
                <div>
                    <h1 class="topic-header__title bg-image-edition-21">
                        Microservices und Self-Contained Systems
                    </h1>
                </div>
                <div class="topic-header__text">
                    Artikel, Vorträge, Schulungen und mehr zu den Themen Microservices und Self-Contained Systems.
                </div>
                <span class="icon icon-arrow-long-down icon--brand-secondary"></span>
            </div>
        </header>

        <article class="page-layout-xl--default">
            <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">Artikel Headline</h2>
                        <h3 class="list-teaser__subheadline">
                            Artikel 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" 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" 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" 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-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.
                            <span class="icon icon-arrow-long-right icon--brand-white"></span>
                        </p>
                    </div>
                    <div class="list-teaser__footer">
                        <div rel="author" class="author-bio author-bio--short" 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-abstract secondary">
                    <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
                            <span class="icon icon-arrow-long-right icon--brand-white"></span>
                        </p>
                    </div>
                    <div class="list-teaser__footer">
                        <div rel="author" class="author-bio author-bio--short" 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-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
                                <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" 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">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
                                <span class="icon icon-arrow-long-right icon--brand-primary"></span>
                            </h3>
                        </div>
                        <div class="list-teaser-event__footer">
                            <div class="link-teaser">Mehr erfahren</div>
                        </div>
                    </div>
                </a>
            </div>
            <nav class="paginator">
                <div class="paginator__prevs">
                    <a href="#" class="paginator__item paginator__link">First</a>
                    <a href="#" class="paginator__item paginator__link">Previous</a>
                </div>
                <ul class="paginator__list">
                    <li class="paginator__item paginator__item--active"><a href="#" class="paginator__link">1</a></li>
                    <li class="paginator__item"><a href="#" class="paginator__link">2</a></li>
                    <li class="paginator__item"><a href="#" class="paginator__link">3</a></li>
                    <li class="paginator__item"><a href="#" class="paginator__link">4</a></li>
                    <li class="paginator__item"><a href="#" class="paginator__link">5</a></li>
                    <li class="paginator__item paginator__dots">…</li>
                </ul>
                <div class="paginator__nexts">
                    <a href="#" class="paginator__item paginator__link">Next</a>
                    <a href="#" class="paginator__item paginator__link">Last</a>
                </div>
            </nav>
        </article>
    </main>

`
`

    <main role="main" class="stripe stripe--gray">
        <header class="topic-header bg-image-edition-21">
            <div class="topic-header__body">
                <h3 class="topic-header__type">Schwerpunktthema <span class="topic-header__tag">Microservices</span></h3>
                <div>
                    <h1 class="topic-header__title bg-image-edition-21">
                        Microservices und Self-Contained Systems
                    </h1>
                </div>
                <div class="topic-header__text">
                    Artikel, Vorträge, Schulungen und mehr zu den Themen Microservices und Self-Contained Systems.
                </div>
                <span class="icon icon-arrow-long-down icon--brand-secondary"></span>
            </div>
        </header>

        <article class="page-layout-xl--default">
            <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">Artikel Headline</h2>
                        <h3 class="list-teaser__subheadline">
                            Artikel 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" itemscope itemtype="http://schema.org/Person">
                            <div class="author-bio__image avatar avatar--sm">
                                <img itemprop="photo" class="avatar__image" src="{{ path '/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" itemscope itemtype="http://schema.org/Person">
                            <div class="author-bio__image avatar avatar--sm">
                                <img itemprop="photo" class="avatar__image" src="{{ path '/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" itemscope itemtype="http://schema.org/Person">
                            <div class="author-bio__image avatar avatar--sm">
                                <img itemprop="photo" class="avatar__image" src="{{ path '/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-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.
                            <span class="icon icon-arrow-long-right icon--brand-white"></span>
                        </p>
                    </div>
                    <div class="list-teaser__footer">
                        <div rel="author" class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                            <div class="author-bio__image avatar avatar--sm">
                                <img itemprop="photo" class="avatar__image" src="{{ path '/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-abstract secondary">
                    <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
                            <span class="icon icon-arrow-long-right icon--brand-white"></span>
                        </p>
                    </div>
                    <div class="list-teaser__footer">
                        <div rel="author" class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                            <div class="author-bio__image avatar avatar--sm">
                                <img itemprop="photo" class="avatar__image" src="{{ path '/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-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
                                <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" itemscope itemtype="http://schema.org/Person">
                                <div class="author-bio__image avatar avatar--sm">
                                    <img itemprop="photo" class="avatar__image" src="{{ path '/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">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
                                <span class="icon icon-arrow-long-right icon--brand-primary"></span>
                            </h3>
                        </div>
                        <div class="list-teaser-event__footer">
                            <div class="link-teaser">Mehr erfahren</div>
                        </div>
                    </div>
                </a>
            </div>
            <nav class="paginator">
                <div class="paginator__prevs">
                    <a href="#" class="paginator__item paginator__link">First</a>
                    <a href="#" class="paginator__item paginator__link">Previous</a>
                </div>
                <ul class="paginator__list">
                    <li class="paginator__item paginator__item--active"><a href="#" class="paginator__link">1</a></li>
                    <li class="paginator__item"><a href="#" class="paginator__link">2</a></li>
                    <li class="paginator__item"><a href="#" class="paginator__link">3</a></li>
                    <li class="paginator__item"><a href="#" class="paginator__link">4</a></li>
                    <li class="paginator__item"><a href="#" class="paginator__link">5</a></li>
                    <li class="paginator__item paginator__dots">…</li>
                </ul>
                <div class="paginator__nexts">
                    <a href="#" class="paginator__item paginator__link">Next</a>
                    <a href="#" class="paginator__item paginator__link">Last</a>
                </div>
            </nav>
        </article>
    </main>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      //TODO

  `
- URL: /components/raw/aggregator-page/_aggregator-page.scss
- Filesystem Path: components/01-pages/aggregator-page/_aggregator-page.scss
- Size: 7 Bytes

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

No notes defined.