EN: Eine für Smartphones optmierte Version wird in Kürze verfügbar sein
3.0.Components    3.13.Teaser

3.13.Teaser

Whenever you want to create a content overview page or you simply need to link a group of articles, teaser components are the perfect choice. The Daimler design system offers a wide variety of teasers, from large, fullscreen ones to smaller, dynamic cards.

3.0.Components      3.13.Teaser      3.13.1.Large hero teaser

3.13.1.Large hero teaser

The large hero teaser is used as the first and most prominent element of a page. Use it to link the newest or most important article. There are three variants of this component:

Some Image
Illustration

Version 1: bold headline

    Some Image
    Illustration

    Version 2: thin headline

      Some Image
      Illustration

      Version 3: carousel with multiple images

        3.0.Components      3.13.Teaser      3.13.2.Teaser grid

        3.13.2.Teaser grid

        The teaser grid allows you to link a lot of content in a compact and attractive fashion. The amount of teasers is flexible, the teaser grid will simply display more teaser cards. Each article is presented with a squared teaser image, a headline and a description text.

        The arrangement and size of individual teasers can be adjusted by the editor. This way it's possible to create a nice and dynamic layout, no matter the number of teasers. The background of the module can also be set by the editor to match the content. Please note that the background image is optional, but the preferred visual variant. If necessary, an optional headline can be included as well.

        Some Image
        Illustration

        Teaser grid with asymmetric layout.

          Some Image
          Illustration

          Teaser grid with dark background

            Some Image
            Illustration

            Teaser grid with headline.

              Some Image
              Illustration

              Teaser grid with infographics as teaser images.

                3.0.Components      3.13.Teaser      3.13.3.Teaser cards

                3.13.3.Teaser cards

                If a more structured and repetitive presentation of content is needed, you can choose from two additional teaser variants. The first is a simple two-column teaser grid, the second is a large graphical teaser list.

                Some Image
                Illustration

                Two-column teaser grid

                  Some Image
                  Illustration

                  Single-column teaser grid.

                    3.0.Components      3.13.Teaser      3.13.4.Download Resources

                    3.13.4.Download Resources

                    Designs of the Teaser component are available for Sketch and integrated in the Daimler Design Kit. You can either copy paste them into your designs or use the Sketch file as a linked library and import the symbols.

                    See the Sketch Design Kit