Teaser Grid

TIP

Combination of teasers in a 2x2 grid.

.c-teaser-grid > .c-teaser-grid__row

Example

Studenten

1. Stex 2. Stex

PhiP

MediCheck Labor+ 3. Stex

PTA

MediCheck Labor+

Apotheker

MediCheck Labor+

hide code

<div class="c-teaser-grid">
    <div class="c-teaser-grid__row">
        <div class="c-teaser -home -student m-r-s">
            <a href="/studenten/" class="c-teaser__link -student c-link -icon-right -icon-arrow">
                <span class="c-teaser__link__text">Studenten</span>
            </a>
            <a href="/studenten/" class="h-clickable-area"></a>
            <div class="h-flex h-flex-row">
                <a href="/kommentar/" class="c-pill">1. Stex</a>
                <a href="/trainer-web/" class="c-pill">2. Stex</a>
            </div>
        </div>
        <div class="c-teaser -home -phip">
            <a href="/praktikanten/" class="c-teaser__link -phip c-link -icon-right -icon-arrow">
                <span class="c-teaser__link__text">PhiP</span>
            </a>
            <a href="/praktikanten/" class="h-clickable-area"></a>
            <div class="h-flex h-flex-row">
                <a href="/medicheck/" class="c-pill">MediCheck</a>
                <a href="/apotheker/labor-plus/intro/" class="c-pill">Labor+</a>
                <a href="/trainer-3stex-web/" class="c-pill">3. Stex</a>
            </div>
        </div>
    </div>
    <div class="c-teaser-grid__row">
        <div class="c-teaser -home -pta m-r-s">
            <a href="/pta/" class="c-teaser__link -pta c-link -icon-right -icon-arrow">
                <span class="c-teaser__link__text">PTA</span>
            </a>
            <a href="/pta/" class="h-clickable-area"></a>
            <div class="h-flex h-flex-row">
                <a href="/medicheck/" class="c-pill">MediCheck</a>
                <a href="/apotheker/labor-plus/intro/" class="c-pill">Labor+</a>
            </div>
        </div>
        <div class="c-teaser -home -apothecary">
            <a href="/apotheker/" class="c-teaser__link -apothecary c-link -icon-right -icon-arrow">
                <span class="c-teaser__link__text">Apotheker</span>
            </a>
            <a href="/apotheker/" class="h-clickable-area"></a>
            <div class="h-flex h-flex-row">
                <a href="/medicheck/" class="c-pill">MediCheck</a>
                <a href="/apotheker/labor-plus/intro/" class="c-pill">Labor+</a>
            </div>
        </div>
    </div>
</div>