Design

Teaser

Teasers are containers that group related pieces of information or content into a single unit. They contain elements like text, images, icons, buttons, and links.

Structure

Teaser

The general content teaser consists of the following elements:

Image
Headline
Text
Button

Specific teaser

The specific teaser can represent products, crops, and pests and consists of the following elements.

Tag
Image
Button

Use case

Teasers are typically used for the following cases:

To display previews or summaries of content like articles, relevant subpages, products, social media posts, etc. in a consistent format.
To break up complex information into easily digestible and scannable chunks.

Teaser

In case of the GROW design system, the general teasers are used for previews, teasers, as well as articles.

Specific teaser

The specific teasers are used for the visual representation of products, crops and pests in the GROW design system.

Best practice

Best practices for the usage of teasers in web and mobile interfaces focus on enhancing usability, readability, and visual appeal. Here are some key guidelines:

Single topic per teaser: Each teaser should contain only one piece of information or one topic to make it easily scannable and understandable for users.
Readability: A clear hierarchy should be maintained by using different font sizes and weights for headings, subheadings, and body text. This helps in drawing attention to key information.
Conciseness: Teasers should only contain essential information and provide a link to more detailed content. Overloading teasers with information can reduce readability and usability.
Imagery: Relevant images or media should be included to enhance the understanding of the teaser content. Images should be clear and scaled appropriately for different devices.