Media with details

Display multiple hero images or videos with thumbnail navigation

Key features

2-column details list

Flexible column layout

Supports autoplay video

Mobile-specific media options

Custom layout and styles

Media


Click section to find settings

Media type

Video Image

Image

Video

Video focal point

Layout

Click section to find settings

Placement

Left Right

Width

30 - 70%

Media ratio

Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (4:5) Custom

Mobile media

Click section to find settings

Media type

Video Image

Image

Video

Video focal point

Details list


The details list display two columns of text.

Details list

Add one name/value pair per line, where the name and value are separated by a pipe (eg. 'Spec | Description').

Layout

Click Details list block to find settings

Column alignment

Left Justified

List max width

20 - 80%

Left column width

20 - 80%

Mobile left column width

1 - 6

Vertical gap

0 - 8

Stack columns on mobile

Style

Click Details list block to find settings

Row style

Filled Dividers

Mobile alignment

Heading Body

Max width

1 - 4

Bold first column text


Add headings and buttons that display above the details list.

Layout

Click Header block to find settings

Alignment

Left Center Right

Mobile alignment

Left Center Right

Max width

Full width Custom (200 - 1440px)

Bottom padding

0 - 20

Content

Click Header block to find settings

Overline

Overline size

1 - 4

Heading

Heading size

1 - 6

Text

Text size

1 - 4

Buttons

Add a primary and secondary button.

Click Header block to find settings

Link

Label

Size

XS S M L

Style

Solid Outline Text

Color scheme

Default Primary Secondary Soft Overlay Overlay soft

Content layout


Click section block to find settings

Vertical alignment

Top Center Bottom Justified

Position

Left Center Right

Mobile position

Left Center Right

Last updated

Was this helpful?