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

Blocks

Header

Details list

Media

---

Upload an image or video.

_{Click section to find settings}

Media type	Image Video
Media ratio	Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2) Custom
Image
Custom mobile image
Video
Video focal point
Custom mobile video

Layout

_{Click section to find settings}

Placement	Left Right
Width	30 - 70%
Mobile placement	Top Bottom

Details list

---

The details list display two columns of text.

_{Click Details list block to find settings}

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

Header

---

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

---

Change the position and alignment of the header and details list as a group.

_{Click section block to find settings}

Vertical alignment	Top Center Bottom Justified
Position	Left Center Right
Mobile position	Left Center Right

Section styles

---

Customize general style options for the section and content area. Settings for Content area allow you to adjust the width, borders, and dropshadow of the container of the section content.

_{Click section to find settings}

Content area

Width	Full width Full width padded Page width
Full width on mobile	Available for Full width padded option.
Set content to page width
	Available for Full width padded and Page width options.

Section

Top padding	0 - 27
Bottom padding	0 - 27
Dividers	None Top only Bottom only Both
Force dividers full width
Color scheme	Default Inverse Soft Accent Accent inverse Overlay Color scheme 1 Color scheme 2
Anchor ID	Link directly to the section on any page. Learn more