# Magazine Page

Ready

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

`

    <main role="main">
        <div class="page-layout-xl--default">
            <h2 class="teaser-section-heading">Magazin</h2>
            <div class="tile-grid-sm">
                <a href="#" class="topic-teaser bg-image-edition-02">
                    <div class="topic-teaser__body">
                        <div class="topic-teaser__caption">Schwerpunktthema</div>
                        <h1 class="topic-teaser__header">Microservices – der aktuelle Stand</h1>
                        <div class="topic-teaser__text">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
                        </div>
                        <div class="topic-teaser__cta">Zum Schwerpunktthema
                            <span class="icon icon-arrow-long-right icon--brand-primary"></span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
        <section class="stripe stripe--gray">
            <div class="page-layout-xl--default">
                <h2 class="teaser-section-heading">Artikel</h2>
                <div class="tile-grid-sm">
                    <a href="#" class="content-teaser content-teaser--inverted">
                        <div class="content-teaser__body">
                            <div class="content-teaser__caption">Artikel</div>
                            <h2 class="content-teaser__header">Artikel Headline</h2>
                            <p class="content-teaser__text">
                                Artikel Intro Text
                            </p>
                        </div>
                        <div class="content-teaser__footer">
                            <div class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                                <div class="author-bio__image avatar avatar--xs">
                                    <img class="avatar__image" itemprop="photo" src="../../assets/example-content/heribert.jpg" alt="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="content-teaser content-teaser--inverted">
                        <div class="content-teaser__body">
                            <div class="content-teaser__caption">Artikel</div>
                            <h2 class="content-teaser__header">Artikel Headline</h2>
                            <p class="content-teaser__text">
                                Artikel Intro Text
                            </p>
                        </div>
                        <div class="content-teaser__footer">
                            <div class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                                <div class="author-bio__image avatar avatar--xs">
                                    <img class="avatar__image" itemprop="photo" 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="content-teaser content-teaser--inverted">
                        <div class="content-teaser__body">
                            <div class="content-teaser__caption">Artikel</div>
                            <h2 class="content-teaser__header">Artikel Headline</h2>
                            <p class="content-teaser__text">
                                Artikel Intro Text
                            </p>
                        </div>
                        <div class="content-teaser__footer">
                            <div class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                                <div class="author-bio__image avatar avatar--xs">
                                    <img class="avatar__image" itemprop="photo" 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>
                <div class="magazine-page--link">
                    <a class="link-teaser" href="#">Alle Artikel ansehen</a>
                </div>
                <h2 class="teaser-section-heading">Podcast</h2>
                <div class="tile-grid-sm">
                    <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">Podcast Headline</h2>
                            <h3 class="podcast-teaser__subheadline">
                                Podcast 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" 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">Podcast Headline</h2>
                            <h3 class="podcast-teaser__subheadline">
                                Podcast 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" 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">Podcast Headline</h2>
                            <h3 class="podcast-teaser__subheadline">
                                Podcast 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>
                </div>
                <div class="magazine-page--link">
                    <a class="link-teaser" href="#">Alle Podcasts ansehen</a>
                </div>
                <h2 class="teaser-section-heading">News</h2>
                <div class="tile-grid-sm">
                    <a href="#" class="content-teaser content-teaser--inverted">
                        <div class="content-teaser__body">
                            <div class="content-teaser__caption">News</div>
                            <h2 class="content-teaser__header">News Headline</h2>
                            <p class="content-teaser__text">
                                News Intro Text
                            </p>
                        </div>
                    </a>
                    <a href="#" class="content-teaser content-teaser--inverted">
                        <div class="content-teaser__body">
                            <div class="content-teaser__caption">News</div>
                            <h2 class="content-teaser__header">News Headline</h2>
                            <p class="content-teaser__text">
                                News Intro Text
                            </p>
                        </div>
                    </a>
                    <a href="#" class="content-teaser content-teaser--inverted">
                        <div class="content-teaser__body">
                            <div class="content-teaser__caption">News</div>
                            <h2 class="content-teaser__header">News Headline</h2>
                            <p class="content-teaser__text">
                                News Intro Text
                            </p>
                        </div>
                    </a>
                </div>
                <div class="magazine-page--link">
                    <a class="link-teaser" href="#">Alle News ansehen</a>
                </div>
            </div>
        </section>
        <div class="default-full-width-teaser bg-image-edition-19">
            <div class="default-full-width-teaser__wrapper">
                <div class="default-full-width-teaser__body">
                    <div class="default-full-width-teaser__caption">case study</div>
                    <div class="default-full-width-teaser__header">
                        <h2 class="punch-in bg-image-edition-19">
                            case study headline eggs
                        </h2>
                    </div>
                    <div class="default-full-width-teaser__text">
                        lorem ipsum dolor sit amet, consectetur adipisicing elit. velit
                        doloremque culpa minima vero quod, optio itaque nisi deserunt,
                        debitis ad laudantium libero, quia nemo!
                    </div>
                    <div class="default-full-width-teaser__footer">
                        <a href="#" class="link-teaser">mehr erfahren</a>
                    </div>
                </div>
            </div>
        </div>
    </main>

`
`

    <main role="main">
        <div class="page-layout-xl--default">
            <h2 class="teaser-section-heading">Magazin</h2>
            <div class="tile-grid-sm">
                <a href="#" class="topic-teaser bg-image-edition-02">
                    <div class="topic-teaser__body">
                        <div class="topic-teaser__caption">Schwerpunktthema</div>
                        <h1 class="topic-teaser__header">Microservices – der aktuelle Stand</h1>
                        <div class="topic-teaser__text">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit doloremque culpa minima vero quod, optio itaque nisi deserunt, debitis ad laudantium libero, quia nemo!
                        </div>
                        <div class="topic-teaser__cta">Zum Schwerpunktthema
                            <span class="icon icon-arrow-long-right icon--brand-primary"></span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
        <section class="stripe stripe--gray">
            <div class="page-layout-xl--default">
                <h2 class="teaser-section-heading">Artikel</h2>
                <div class="tile-grid-sm">
                    <a href="#" class="content-teaser content-teaser--inverted">
                        <div class="content-teaser__body">
                            <div class="content-teaser__caption">Artikel</div>
                            <h2 class="content-teaser__header">Artikel Headline</h2>
                            <p class="content-teaser__text">
                                Artikel Intro Text
                            </p>
                        </div>
                        <div class="content-teaser__footer">
                            <div class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                                <div class="author-bio__image avatar avatar--xs">
                                    <img class="avatar__image" itemprop="photo" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="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="content-teaser content-teaser--inverted">
                        <div class="content-teaser__body">
                            <div class="content-teaser__caption">Artikel</div>
                            <h2 class="content-teaser__header">Artikel Headline</h2>
                            <p class="content-teaser__text">
                                Artikel Intro Text
                            </p>
                        </div>
                        <div class="content-teaser__footer">
                            <div class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                                <div class="author-bio__image avatar avatar--xs">
                                    <img class="avatar__image" itemprop="photo" 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="content-teaser content-teaser--inverted">
                        <div class="content-teaser__body">
                            <div class="content-teaser__caption">Artikel</div>
                            <h2 class="content-teaser__header">Artikel Headline</h2>
                            <p class="content-teaser__text">
                                Artikel Intro Text
                            </p>
                        </div>
                        <div class="content-teaser__footer">
                            <div class="author-bio author-bio--short" itemscope itemtype="http://schema.org/Person">
                                <div class="author-bio__image avatar avatar--xs">
                                    <img class="avatar__image" itemprop="photo" 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>
                </div>
                <div class="magazine-page--link">
                    <a class="link-teaser" href="#">Alle Artikel ansehen</a>
                </div>
                <h2 class="teaser-section-heading">Podcast</h2>
                <div class="tile-grid-sm">
                    <a href="#" class="podcast-teaser podcast-teaser--avatar--overlay" style="background-image: url({{ path '/assets/example-content/heribert-rechts.png' }})">
                        <div class="podcast-teaser__body">
                            <div class="podcast-teaser__caption">Podcast</div>
                            <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                            <h3 class="podcast-teaser__subheadline">
                                Podcast 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" style="background-image: url({{ path '/assets/example-content/heribert-rechts.png' }})">
                        <div class="podcast-teaser__body">
                            <div class="podcast-teaser__caption">Podcast</div>
                            <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                            <h3 class="podcast-teaser__subheadline">
                                Podcast 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" style="background-image: url({{ path '/assets/example-content/heribert-rechts.png' }})">
                        <div class="podcast-teaser__body">
                            <div class="podcast-teaser__caption">Podcast</div>
                            <h2 class="podcast-teaser__headline">Podcast Headline</h2>
                            <h3 class="podcast-teaser__subheadline">
                                Podcast 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>
                </div>
                <div class="magazine-page--link">
                    <a class="link-teaser" href="#">Alle Podcasts ansehen</a>
                </div>
                <h2 class="teaser-section-heading">News</h2>
                <div class="tile-grid-sm">
                    <a href="#" class="content-teaser content-teaser--inverted">
                        <div class="content-teaser__body">
                            <div class="content-teaser__caption">News</div>
                            <h2 class="content-teaser__header">News Headline</h2>
                            <p class="content-teaser__text">
                                News Intro Text
                            </p>
                        </div>
                    </a>
                    <a href="#" class="content-teaser content-teaser--inverted">
                        <div class="content-teaser__body">
                            <div class="content-teaser__caption">News</div>
                            <h2 class="content-teaser__header">News Headline</h2>
                            <p class="content-teaser__text">
                                News Intro Text
                            </p>
                        </div>
                    </a>
                    <a href="#" class="content-teaser content-teaser--inverted">
                        <div class="content-teaser__body">
                            <div class="content-teaser__caption">News</div>
                            <h2 class="content-teaser__header">News Headline</h2>
                            <p class="content-teaser__text">
                                News Intro Text
                            </p>
                        </div>
                    </a>
                </div>
                <div class="magazine-page--link">
                    <a class="link-teaser" href="#">Alle News ansehen</a>
                </div>
            </div>
        </section>
        <div class="default-full-width-teaser bg-image-edition-19">
            <div class="default-full-width-teaser__wrapper">
                <div class="default-full-width-teaser__body">
                    <div class="default-full-width-teaser__caption">case study</div>
                    <div class="default-full-width-teaser__header">
                        <h2 class="punch-in bg-image-edition-19">
                            case study headline eggs
                        </h2>
                    </div>
                    <div class="default-full-width-teaser__text">
                        lorem ipsum dolor sit amet, consectetur adipisicing elit. velit
                        doloremque culpa minima vero quod, optio itaque nisi deserunt,
                        debitis ad laudantium libero, quia nemo!
                    </div>
                    <div class="default-full-width-teaser__footer">
                        <a href="#" class="link-teaser">mehr erfahren</a>
                    </div>
                </div>
            </div>
        </div>
    </main>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      .magazine-page--link {
        margin-bottom: $spacer-xl;
        text-align: center;
      }

  `
- URL: /components/raw/magazine-page/_magazine-page.scss
- Filesystem Path: components/01-pages/magazine-page/_magazine-page.scss
- Size: 76 Bytes

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

No notes defined.