Skip to content
Design System
  • Documentation
  • Prototypes
Branding
  • Voice & tone
  • Logo
  • Farben
  • Typographie
  • Visuelle Elemente
Foundations
  • Usage
  • Global styles
  • Themes
  • Spacing
  • Viewports
  • Colors
  • Typography
  • Core utilities
Layouts
  • Usage
  • Aspect ratio
  • Auto grid
  • Content grid
  • Flex group
  • Flow
  • Multicol
  • Pile
  • Reel
  • Region
  • Repel
  • Sidebar
  • Switcher
  • Wrapper
Patterns
  • Accordion
  • Avatar
  • Avatar Group
  • Book pile
  • Brand shapes
  • Button
  • Calendar Date
  • Callout
  • Card
  • Context Switcher
  • Figure
  • Forms
  • Hero
  • Icon
  • Icon link
  • Image Bento
  • Image Grid
  • List Icon
  • Marquee
  • Modal
  • More Link
  • Pagination
  • Pill
  • Promo Card
  • Prose
  • Section Divider
  • Section Heading
  • Section Illustration
  • Show More
  • Slideout
  • Submenu bar
  • Table
  • Tabs

Callout Beta

A short promotional text based on testimonials, with an optional image.

View full screen

Callout in prose #

Callouts in prose text have a different style to make them stand out from longer blocks of text.

View full screen

Callout Grid #

This pattern uses the Auto Grid layout. You can configure the column size, maximum number of items per row and gutter via the layout options.

View full screen

Callout Slider #

This pattern uses the Reel layout. You can configure the column size and gutter via the layout options.

View full screen

Callout Wall #

This pattern uses the Multicol layout. You can configure the column size and gutter via the layout options.

Please note that this layout is not an real masonry layout. Because of this, the elements inside are read in the order of the vertical columns. This can be confusing for users who tab through interactive elements and expect to move horizontally through the rows.

View full screen
Theme