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

Teaser: Author

100% 
<article class="c-teaser">
    <div class="c-teaser__media">
        <a href="#" class="c-teaser__link">
            <picture class="">
                <img src="https://via.placeholder.com/600x400" alt="">
            </picture>
        </a>
    </div>
    <div class="c-teaser__body">
        <div class="c-teaser__header c-teaser__decoline">
            <div class="c-teaser__kicker">
                Redakteur
            </div>
            <a href="#" class="c-teaser__link">
                <h2 class="c-teaser__title">Max Mustermann</h2>
            </a>
        </div>
        <ul class="c-teaser__contactList">
            <li class="c-teaser__contactItem"><i class="fas fa-phone"></i> Telefon:
                <a href="tel:+491234567890"><span itemprop="telephone">+491234567890</span></a>
            </li>
            <li class="c-teaser__contactItem"><i class="fas fa-envelope"></i> E-Mail:
                <a href="max.mustermann@hildesheimer-allgemeine.de"><span itemprop="email">max.mustermann@hildesheimer-allgemeine.de</span></a>
            </li>
        </ul>
    </div>
    <div class="c-teaser__footer c-teaser__socialmediaNavi">
        <div class="c-social-menu c-social-menu">
            <ul class="c-social-menu__list">
                <li class="c-social-menu__item">
                    <a class="c-social-menu__link c-social-menu__link--facebook" href="#"></a>
                </li>
                <li class="c-social-menu__item">
                    <a class="c-social-menu__link c-social-menu__link--twitter" href="#"></a>
                </li>
                <li class="c-social-menu__item">
                    <a class="c-social-menu__link c-social-menu__link--skype" href="#"></a>
                </li>
                <li class="c-social-menu__item">
                    <a class="c-social-menu__link c-social-menu__link--linkedin" href="#"></a>
                </li>
            </ul>
        </div>
    </div>
</article>
 
<article class="c-teaser">
    <div class="c-teaser__media">
        <a href="#" class="c-teaser__link">
            <picture class="{% if hasVideoThumbnail %}is-video-thumbnail{% endif %}">
                <img src="https://via.placeholder.com/600x400" alt="">
            </picture>
        </a>
    </div>
    <div class="c-teaser__body">
        <div class="c-teaser__header c-teaser__decoline">
            <div class="c-teaser__kicker">
                {{ position }}
            </div>
            <a href="#" class="c-teaser__link">
                <h2 class="c-teaser__title">{{ name }}</h2>
            </a>
        </div>
        <ul class="c-teaser__contactList">
            {% if telephon != '' %}<li class="c-teaser__contactItem"><i class="fas fa-phone"></i>
                Telefon:
                <a href="tel:{{ telephon }}"><span itemprop="telephone">{{ telephon }}</span></a>
            </li>{% endif %}
            {% if email != '' %}<li class="c-teaser__contactItem"><i class="fas fa-envelope"></i>
                E-Mail:
                <a href="{{ email }}"><span itemprop="email">{{ email }}</span></a>
            </li>{% endif %}
        </ul>
    </div>
    <div class="c-teaser__footer c-teaser__socialmediaNavi">
        {%  render '@social-menu' with {whatsapp: false, mail: false, instagram: false, youtube: false} %}
    </div>
</article>
 
{
  "isPremium": true,
  "hasGallery": true,
  "isAd": true,
  "hasVideoThumbnail": false,
  "kicker": "Brandkatastrophe",
  "title": "Lorem ipsum dolor sit amet consectetur adipiscing elit",
  "text": "",
  "src": "../../assets/img/landscape.jpg",
  "location": "Hildesheim",
  "author": "Johanna Elster",
  "datetime": "28.04.2019",
  "tstamp": "1566234446",
  "readingTime": "10",
  "visits": "9.523",
  "name": "Max Mustermann",
  "position": "Redakteur",
  "telephon": "+491234567890",
  "email": "max.mustermann@hildesheimer-allgemeine.de",
  "skype": "Skype",
  "twitter": "Twitter",
  "facebook": "Facebook",
  "linkedin": "LinkedIn"
}
  • 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.