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

Teaser: Search Suggestion

100% 
<div class="o-search--suggestion">
    <article class="c-teaser c-teaser--search-result c-teaser--search-result-type-{type}">
        <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">
                <div class="c-teaser__kicker">
                    <span class="c-badge">Unser Tipp</span>
                </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 href='https://hildesheimer-allgemeine.de'>Link</a></p>
            </div>
        </div>
        <div class="c-teaser__footer">
            <div class="c-teaser__meta">
                <!-- not given in suggestions. -->
                <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>
    </article>
</div>
 
<div class="o-search--suggestion">
    <article class="c-teaser c-teaser--search-result c-teaser--search-result-type-{type}">
        <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">
                <div class="c-teaser__kicker">
                    <span class="c-badge">{{ position }}</span>
                </div>
                <h2 class="c-teaser__title">{{ title }}</h2>
            </div>
            {% if text != '' %}
                <div class="c-teaser__content">
                    <p>{{ text }}</p>
                </div>
            {% endif %}
        </div>
        <div class="c-teaser__footer">
            <div class="c-teaser__meta">
                <!-- not given in suggestions. -->
                {% render '@meta' with {} %}
            </div>
        </div>
    </article>
</div>
 
{
  "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 href='https://hildesheimer-allgemeine.de'>Link</a>",
  "src": "../../assets/img/landscape.jpg",
  "location": "Hildesheim",
  "author": "Johanna Elster",
  "datetime": "28.04.2019",
  "tstamp": "1566234446",
  "readingTime": "10",
  "visits": "9.523",
  "type": "page",
  "position": "Unser Tipp"
}
  • 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.