51751ABB-5214-4D7F-AB7F-8A7599AC7751 Created with sketchtool.

Teaser: Card

100% 
<article class="c-teaser c-teaser--card">
    <div class="c-teaser__media">
        <a href="#" class="c-teaser__link">
            <picture class="" title="Picture Element title">
                <source data-srcset="https://via.placeholder.com/768x640" media="(min-width: 640px)">
                <source data-srcset="https://via.placeholder.com/640x480" media="(min-width: 480px)">
                <source data-srcset="https://via.placeholder.com/480x320" media="(min-width: 0px)">
                <img itemprop="image" class="lazy lazyload" src="https://via.placeholder.com/64x32" alt="Alt Tag" />
            </picture>
        </a>
    </div>
    <div class="c-teaser__body">
        <a href="#" class="c-teaser__link">
            <div class="c-teaser__header">
                <div class="c-teaser__kicker">
                    <span class="c-badge c-badge--user">HAZ+</span>
                    <span class="c-badge c-badge--prop c-badge--prop-gallery">
    12
</span>
                    <span class="c-badge">
    Anzeige
</span> Brandkatastrophe
                </div>
                <h2 class="c-teaser__title">Lorem ipsum dolor sit amet consectetur adipiscing elit</h2>
            </div>
            <div class="c-teaser__content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A beatae debitis dolor, dolorem doloremque eaque esse fugit necessitatibus sit veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. A beatae debitis dolor, dolorem
                    doloremque eaque esse fugit necessitatibus sit veritatis?</p>
            </div>
        </a>
    </div>
    <div class="c-teaser__footer">
        <div class="c-teaser__meta">
            <div class="c-meta">
                <ul cLass="c-meta__list">
                    <li class="c-meta__item"><strong>Hildesheim</strong></li>
                    <li class="c-meta__item"><strong>von Johanna Elster</strong></li>
                    <li class="c-meta__item"><time title="Veröffentlicht am" itemprop="datePublished" datetime="28.04.2019">28.04.2019</time></li>
                    <li class="c-meta__item">Aktualisiert <span class="js-last-updated" data-tstamp="1566213446">
    19.08.2019 - 13:17 Uhr
</span>
                    </li>
                    <li class="c-meta__item"><span title="Lesezeit"><i class="fa fa-book-open"></i> 10 Min.</span></li>
                    <li class="c-meta__item"> 9.523 Aufrufe</li>
                </ul>
            </div>
        </div>
        <div class="c-teaser__actions">
            <button class="c-bookmark" title="Artikel merken">
    <i class="far fa-bookmark c-bookmark__icon"></i>
    </button>
        </div>
    </div>
</article>
 
<article class="c-teaser c-teaser--card">
    <div class="c-teaser__media">
        <a href="#" class="c-teaser__link">
            <picture class="{% if hasVideoThumbnail %}is-video-thumbnail{% endif %}" title="Picture Element title">
                <source data-srcset="https://via.placeholder.com/768x640" media="(min-width: 640px)">
                <source data-srcset="https://via.placeholder.com/640x480" media="(min-width: 480px)">
                <source data-srcset="https://via.placeholder.com/480x320" media="(min-width: 0px)">
                <img itemprop="image" class="lazy lazyload" src="https://via.placeholder.com/64x32" alt="Alt Tag"/>
            </picture>
        </a>
    </div>
    <div class="c-teaser__body">
        <a href="#" class="c-teaser__link">
            <div class="c-teaser__header">
                <div class="c-teaser__kicker">
                    {% if isPremium %}{% render '@badge--user' %}{% endif %}
                    {% if hasGallery %}{% render '@badge--prop' %}{% endif %}
                    {% if isAd %}{% render '@badge' with { text: "Anzeige" } %}{% endif %}
                    {{ kicker }}
                </div>
                <h2 class="c-teaser__title">{{ title }}</h2>
            </div>
            {% if text != '' %}
                <div class="c-teaser__content">
                    <p>{{ text }}</p>
                </div>
            {% endif %}
        </a>
    </div>
    <div class="c-teaser__footer">
        <div class="c-teaser__meta">
            {% render '@meta' %}
        </div>
        <div class="c-teaser__actions">
            {% render '@bookmark' with { hasText: false } %}
        </div>
    </div>
</article>
 
{
  "isPremium": true,
  "hasGallery": true,
  "isAd": true,
  "hasVideoThumbnail": false,
  "kicker": "Brandkatastrophe",
  "title": "Lorem ipsum dolor sit amet consectetur adipiscing elit",
  "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. A beatae debitis dolor, dolorem doloremque eaque esse fugit necessitatibus sit veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. A beatae debitis dolor, dolorem doloremque eaque esse fugit necessitatibus sit veritatis?",
  "src": "../../assets/img/landscape.jpg",
  "location": "Hildesheim",
  "author": "Johanna Elster",
  "datetime": "28.04.2019",
  "tstamp": "1566234446",
  "readingTime": "10",
  "visits": "9.523"
}
  • Content: 
    // Local var
$orderedListSpacing: 1.5rem;

// Local var
.c-teaser {
    background-color: $color-white;
    margin: 0 auto rem-calc(40);
    min-height: rem-calc(200);

    @include transition(box-shadow);

    &__media {
        grid-column: 1 / 2;
        grid-row: 1 / 5;

        picture {
            display: block;
            height: auto;
            position: relative;
            width: 100%;

            &.is-video-thumbnail {
                &::before {
                    background-color: rgba($color-white, .75);
                    border: 1px solid $color-white;
                    border-radius: 50%;
                    color: $color-grey;
                    content: "\f04b";
                    display: block;
                    font-family: "Font Awesome 5 Free", sans-serif;
                    font-weight: 900;
                    height: 3rem;
                    left: 50%;
                    line-height: 1;
                    padding: 1rem;
                    position: absolute;
                    text-indent: 2px;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    width: 3rem;
                    z-index: 1;
                }
            }
        }

        img {
            display: block;
            height: auto;
            width: 100%;
        }

        &:hover {
            picture.is-video-thumbnail::before {
                background-color: $color-white;
                color: $black;
            }
        }
    }

    &__decoline {
        border-left: 2px solid $color-yellow;
        padding-left: .625rem;
    }

    &__socialmediaNavi {
        margin-left: 1rem;
    }

    &__contactList {
        list-style-type: none;
        margin-left: -1rem;
    }

    &__contactItem {
        word-break: break-all;
    }

    &__icon {
        background-color: red;
        bottom: 0;
        display: block;
        height: 20px;
        left: 0;
        position: absolute;
        width: 20px;
    }

    &__body {
        grid-column: 2 / 4;
        grid-row: 1 / 4;
        padding: rem-calc(0 20);
    }

    &__kicker {
        color: $color-grey-light;
        font-size: rem-calc(14);
        margin: 1rem 0 0 0;
    }

    &__link {
        border-bottom: 0;
    }

    &__title {
        @include transition(color);

        font-size: 1.25rem;

        &:hover {
            color: $color-grey;
        }

        // Special case for TYPO3 Integration. Sometimes we can't control that the a-tag is INSIDE the title (ke_search)
        // Removing decoration via cascade.
        a {
            border-bottom: 0;
        }
    }

    &__content {
        color: $color-grey-dark;

        > p {
            margin-bottom: rem-calc(20);
        }
    }

    &__footer {
        align-items: flex-end;
        display: flex;
        grid-column: 2 / 4;
        grid-row: 4 / 4;
        padding: rem-calc(0 20 20);
    }

    &__meta {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        width: 100%;
    }

    &__actions {
        align-items: flex-end;
        display: flex;
        flex-direction: column;
        flex-shrink: 1;
    }

    &.c-teaser--top {
        margin-bottom: rem-calc(20);
        margin-left: auto;
        margin-right: auto;
        margin-top: rem-calc(20);
    }

    &.c-teaser--opener,
    &.c-teaser--top {
        .c-teaser__media {
            grid-column: 1 / 4;
            grid-row: 1 / 2;
        }

        .c-teaser__body {
            grid-column: 1 / 4;
            grid-row: 2 / 3;
        }

        .c-teaser__footer {
            grid-column: 1 / 4;
            grid-row: 3 / 4;
        }
    }

    &.c-teaser--opener {
        .c-teaser__media {
            margin-bottom: rem-calc(20);
        }
    }

    &.c-teaser--minimal {
        display: block;
        margin: $spacing-l auto;
        min-height: 0;

        img {
            margin-bottom: 1.25rem;
        }

        .c-teaser__header {
            border-left: 2px solid $color-yellow;
            padding-left: rem-calc(10);
        }

        .c-teaser__title {
            color: $font-header-color;
            display: inline;
            font-size: rem-calc(16);
            font-weight: normal;
            margin-bottom: $spacing-s;

            &:hover {
                color: $color-grey;
            }
        }

        .c-teaser__meta {
            margin-top: $spacing-s;
        }
    }

    &.c-teaser--opinion {
        .c-teaser__media {
            picture {
                position: relative;

                &::before {
                    color: $color-yellow;
                    content: '”';
                    display: block;
                    left: 10px;
                    position: absolute;
                    top: 0;
                    z-index: 10;

                    @include fluid-type(rem-calc(640), rem-calc(1200), rem-calc(50), rem-calc(80));
                }
            }
        }
    }
}

@include breakpoint(medium) {
    .c-teaser {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, auto);

        &__media {
            picture {
                height: 100%;
                overflow: hidden;

                &.is-video-thumbnail {
                    &::before {
                        bottom: 10px;
                        left: 10px;
                        top: auto;
                        transform: none;
                    }
                }
            }

            img {
                height: 100%;
                left: 50%;
                object-fit: cover;
                object-position: top center;
                position: absolute;
                top: 0;
                transform: translateX(-50%);

                @include transition(color, background-color, transform);
            }

            &:hover {
                a img {
                    transform: scaleX(1.05) scaleY(1.05) scaleZ(1) translateX(-50%);
                }
            }
        }

        &__header {
            border-left: 2px solid $color-yellow;
            padding-left: rem-calc(10);
        }

        &__kicker {
            margin: 0;
        }

        &__title {
            font-size: 1.375rem;
        }

        &.c-teaser--card,
        &.c-teaser--opinion {
            grid-template-columns: 1fr;
            grid-template-rows: repeat(3, auto);

            .c-teaser__media {
                grid-column: 1 / 2;
                grid-row: 1 / 2;

                img {
                    height: auto;
                    left: unset;
                    object-fit: unset;
                    object-position: unset;
                    position: relative;
                    top: unset;
                    transform: unset;
                    width: 100%;
                }
            }

            .c-teaser__body {
                grid-column: 1 / 2;
                grid-row: 2 / 3;
                padding: rem-calc(20 20 0);
            }

            .c-teaser__footer {
                grid-column: 1 / 2;
                grid-row: 3 / 4;
                padding: rem-calc(0 20 20);
            }
        }

        &.c-teaser--opinion {
            .c-teaser__media {
                picture {
                    border-bottom: 2px solid $color-yellow;
                }
            }
        }

        &.c-teaser--opener {
            grid-template-columns: repeat(4, 1fr);
            min-height: rem-calc(320);

            .c-teaser__media {
                grid-column: 1 / 3;
                grid-row: 1 / 5;
                margin-bottom: 0;
            }

            .c-teaser__body {
                grid-column: 3 / 5;
                grid-row: 1 / 4;
            }

            .c-teaser__footer {
                grid-column: 3 / 5;
                grid-row: 4 / 5;
            }
        }

        &.c-teaser--top {
            .c-teaser__media {
                grid-column: 1 / 2;
                grid-row: 1 / 5;
                margin-bottom: 0;
            }

            .c-teaser__body {
                grid-column: 2 / 5;
                grid-row: 1 / 5;
                padding: rem-calc(20);
            }
        }
    }
}

@include breakpoint(large) {
    .c-teaser {
        grid-template-columns: rem-calc(270) 1fr 1fr;

        &.c-teaser--opener {
            grid-template-columns: repeat(3, 1fr);

            &__media {
                grid-column: 1 / 2;
                grid-row: 1 / 5;
            }
        }
    }
}

@include breakpoint(small only) {
    .o-section:not(.o-section--grey) {
        .c-teaser:not(.c-teaser--minimal) {
            border-bottom: rem-calc(2) solid $color-yellow;
        }
    }
}

// Overrides
.o-section--grey {
    .c-teaser__body {
        padding: rem-calc(20 20 0);
    }

    .c-teaser--minimal {
        padding: 0 $spacing-s $spacing-s;
    }
}

ol .c-teaser.c-teaser--minimal {
    padding-left: $orderedListSpacing;

    .c-teaser__header {
        border-left-width: 0;
        padding-left: 0;
    }
}
  • URL: /components/raw/teaser/teaser.scss
  • Filesystem Path: src/patterns/20-components/teaser/teaser.scss
  • Size: 9.2 KB

Teaser

E-mail addresses are cloaked for spam protection in TYPO3. That function is not available in the styleguide.

Ticker

The ticker teaser is not quite a teaser as it doesn’t link anywhere. Yet, its layout is based upon the card teaser, so it’s kept here. Also, the output is just an approximate as the ‘updated’ information in the kicker will be shorter.