# Media with details {% columns %} {% column width="58.333333333333336%" %}

{% endcolumn %} {% column width="41.666666666666664%" %} {% hint style="info" %} **Key features** 2-column details list Flexible column layout Supports autoplay video Mobile-specific media options Custom layout and styles {% endhint %} {% hint style="info" %} **Blocks** [Header](#header) [Details list](#details-list) {% endhint %} {% endcolumn %} {% endcolumns %}

Media

*** Upload an image or autoplay video (without sound) to display on one side of the section. _{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}

Setting	Options
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

Setting	Options
Width	Full width Full width padded Page width
Full width on mobile	Available for Full width padded option.
Set content to page width
Border
Corner radius	Available for Full width padded and Page width options.
Dropshadow

Section

Setting	Options
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

[^1]: Modify in [Global styles > Borders and styles > Large elements](/section-studio/sections/global-styles/borders-and-styles.md#large-elements) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.fluorescent.co/section-studio/sections/sections-overview/media-with-details.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.