Rich vertical list

The rich vertical list is a two-column pattern that pairs a primary media with a heading and supporting content in a 50/50 layout. It's effective for presenting a single topic with an emphasized media, as well as for call-out content and adding visual variation to a page.

Type Pattern

Tier Sites

Documentation Status Minimal

Last Edited 27.04.2026

Open in Figma

Usage

Use the rich vertical list when media is the primary content and all surrounding content directly supports it. It also works well as a callout section to break visual monotony, introduce a different layout rhythm, or add density to a long page.

Allowed blocks

The rich vertical list supports a subset of blocks from the basic section. Blocks that include their own image container are not supported, as they conflict with the section's primary media.
Supported blocks:

• Text
• Code
• List
• Logo block
• CTA block

Media type and fit

Media type and fit

Auto height

Auto-height images adapt to the content column height within defined boundaries:

• Minimum height: equivalent to a 16:9 ratio
• Maximum height: equivalent to a 2:3 ratio

Use auto height sparingly to maintain visual consistency. Avoid it in consecutive sections. Reserve it for standalone sections or extended visual content such as infographics.

Consecutive section ratio rule

To maintain visual stability, use the same predefined media ratio across consecutive sections. Supported ratios are 16:9, 3:2, 1:1, and 2:3. The ratio may change when a new content group with a different purpose or structure begins.

Alternating layout rule

To create visual rhythm, alternate the media position between consecutive sections:

• Section 1: Content | Media
• Section 2: Media | Content
• Section 3: Content | Media

If a specific column – media or content – is the primary focus across sections, the layout may remain consistent on one side.

Content height guidelines

Keep content height balanced with media height:

• Content height should be at least half the media height
• Content height should generally not exceed the media height

For consecutive sections, the ratio of the media may be determined by the section with the longest content. In that case, other sections may contain content shorter than half the media height.

Recommended ratios by content type

• Text-focused layouts (1–2 blocks): use 16:9 or 3:2 to maintain visual balance.
• Content-rich layouts (3+ blocks): use 1:1, 2:3, or auto height, following the general layout guidelines.

Photography guidelines

For vertical images on large screens, the image may switch to a horizontal format on smaller screens. When images include people or key subjects, ensure those elements remain visible across all aspect ratios by providing separate images for each breakpoint.

Compose assets with the cropping ratios of large, medium, and small screens in mind. Place key elements within a safe area that remains visible across all variations.

When to use

• The media is the central focus and all content directly supports it
• A section needs to stand out as a callout or highlight
• The page layout is too uniform and needs visual variation to help users stay focused
• The page is long and a denser layout would help with pacing

When not to use

• The section covers more than one distinct topic – a single primary media creates ambiguity when the content spans multiple subjects. Use the Divided section instead.
• The pattern is already used frequently on the page – overuse disrupts the visual rhythm of the page and creates inconsistency with other pages. Introduce the Basic section to restore balance.

Examples

Photography (3:2 ratio)

Large dimension

Medium dimension

Diagram (Flipped, auto-height)

Large dimension

Medium dimension

Video (16:9 ratio)

Large dimension

Medium dimension