# Media with text

{% columns %}
{% column width="58.333333333333336%" %}

<div data-with-frame="true"><figure><img src="/files/Y5Ti5RFNqdAAa4pGWE5m" alt=""><figcaption></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/OJVMzoNrGT0zu5BrMXmz" alt=""><figcaption></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/Jjgcs8ZdgabWqYp3RDRb" alt=""><figcaption></figcaption></figure></div>
{% endcolumn %}

{% column width="41.666666666666664%" %}
{% hint style="info" %}
**Key features**

Overlaying media

Flexible content layout

Supports autoplay video

Mobile-specific media options

Custom layout and styles
{% endhint %}

{% hint style="info" %}
**Blocks**

Overline\
Heading\
Text\
Buttons\
Spacer
{% endhint %}

{% endcolumn %}
{% endcolumns %}

<h2 align="center">Media</h2>

***

Upload a primary (background) image and secondary image to display on one side of the section.

### <mark style="color:$primary;">Primary media</mark>

Display an image, solid color, or autoplay video (without sound) as the primary background.

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Media type</mark></td><td valign="top"><mark style="color:$info;">Color</mark><br><mark style="color:$info;">Image</mark><br><mark style="color:$info;">Video</mark></td></tr></tbody></table>

<details>

<summary>Image</summary>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Image</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Media ratio</mark></td><td valign="top"><mark style="color:$info;">Portrait (2:3)</mark><br><mark style="color:$info;">Portrait (4:5)</mark><br><mark style="color:$info;">Square (1:1)</mark><br><mark style="color:$info;">Landscape (5:4)</mark><br><mark style="color:$info;">Landscape (3:2)</mark><br><mark style="color:$info;">Custom</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Custom mobile image</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr></tbody></table>

</details>

<details>

<summary>Color</summary>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Background color</mark></td><td valign="top"><mark style="color:$info;">Color scheme</mark><br><mark style="color:$info;">Custom</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Color scheme</mark></td><td valign="top">Match section<br><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Inverse</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Accent</mark><br><mark style="color:$info;">Accent inverse</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Color scheme 1</mark><br><mark style="color:$info;">Color scheme 2</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Custom</mark></td><td valign="top"><mark style="color:$info;">Background</mark></td></tr></tbody></table>

</details>

<details>

<summary>Video</summary>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top">Setting</th><th valign="top">Description</th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Video</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Video focal point</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Custom mobile video</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile video focal point</mark></td><td valign="top"></td></tr></tbody></table>

</details>

<details>

<summary>Media ratio</summary>

Set the shape and orientation of the primary background.

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Media ratio</mark></td><td valign="top"><mark style="color:$info;">Portrait (2:3)</mark><br><mark style="color:$info;">Portrait (4:5)</mark><br><mark style="color:$info;">Square (1:1)</mark><br><mark style="color:$info;">Landscape (5:4)</mark><br><mark style="color:$info;">Landscape (3:2)</mark><br><mark style="color:$info;">Custom</mark></td></tr></tbody></table>

</details>

<details>

<summary>Overlay colors</summary>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Overlay opacity</mark></td><td valign="top"><mark style="color:$info;">0 - 100%</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Color scheme</mark></td><td valign="top"><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Inverse</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Accent</mark><br><mark style="color:$info;">Accent inverse</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Color scheme 1</mark><br><mark style="color:$info;">Color scheme 2</mark></td></tr></tbody></table>

</details>

### <mark style="color:$primary;">Secondary media</mark>

Display an image or autoplay video (without sound) over top the primary background media.

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Media type</mark></td><td valign="top"><mark style="color:$info;">Image</mark><br><mark style="color:$info;">Video</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Media ratio</mark></td><td valign="top"><mark style="color:$info;">Portrait (2:3)</mark><br><mark style="color:$info;">Portrait (4:5)</mark><br><mark style="color:$info;">Square (1:1)</mark><br><mark style="color:$info;">Landscape (5:4)</mark><br><mark style="color:$info;">Landscape (3:2)</mark><br><mark style="color:$info;">Custom</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Image</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Custom mobile image</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Video</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Video focal point</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Custom mobile video</mark></td><td valign="top"></td></tr></tbody></table>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Desktop width</mark></td><td valign="top"><mark style="color:$info;">Left</mark><br><mark style="color:$info;">Right</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Tablet width</mark></td><td valign="top"><mark style="color:$info;">30 - 70%</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile width</mark></td><td valign="top"><mark style="color:$info;">Top</mark><br><mark style="color:$info;">Bottom</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Corner radius</mark></td><td valign="top"></td></tr></tbody></table>

### <mark style="color:$primary;">Media layout</mark>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Placement</mark></td><td valign="top"><mark style="color:$info;">Left</mark><br><mark style="color:$info;">Right</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Width</mark></td><td valign="top"><mark style="color:$info;">30 - 70%</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile placement</mark></td><td valign="top"><mark style="color:$info;">Top</mark><br><mark style="color:$info;">Bottom</mark></td></tr></tbody></table>

<h2 align="center">Content blocks</h2>

***

You can customize the position and alignment of the content in the section settings.

Click **(+) Add block** to add headings, text, and buttons. Use the drag handles **`⋮⋮`** to re-order blocks.

{% hint style="info" %}
Use the **Spacer** block to achieve different text layouts. Add spacer blocks between content blocks to group them together. Either set a fixed pixel space or select 'Flexible' to fill the available space.
{% endhint %}

<details>

<summary>Overline</summary>

<sub><mark style="color:$info;">Click overline block to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Overline</mark></td><td valign="top">Add text for a small heading.</td></tr><tr><td valign="top"><mark style="color:blue;">Overline size</mark></td><td valign="top"><mark style="color:$info;">1 - 4</mark></td></tr></tbody></table>

</details>

<details>

<summary>Heading</summary>

<sub><mark style="color:$info;">Click heading block to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Heading</mark></td><td valign="top">Add text for a heading.</td></tr><tr><td valign="top"><mark style="color:blue;">Text style</mark></td><td valign="top"><mark style="color:$info;">Use global</mark><br><mark style="color:$info;">Custom</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Font</mark></td><td valign="top"><mark style="color:$info;">Heading</mark><br><mark style="color:$info;">Body</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Font size</mark></td><td valign="top"><mark style="color:$info;">50 - 150px</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Tablet font size</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile font size</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Line height</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Letter spacing</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Uppercase</mark></td><td valign="top"></td></tr></tbody></table>

</details>

<details>

<summary>Text</summary>

<sub><mark style="color:$info;">Click paragraph block to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Text</mark></td><td valign="top">Add multiple lines of text with rich formatting.</td></tr><tr><td valign="top"><mark style="color:blue;">Text size</mark></td><td valign="top"><mark style="color:$info;">1 - 4</mark></td></tr></tbody></table>

</details>

<details>

<summary>Buttons</summary>

Add a primary and secondary button under the text content. When both buttons are added, they will appear inline.

<sub><mark style="color:$info;">Click Button group block to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.54400634765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Link</mark></td><td valign="top">Enter the URL for the button to link to.</td></tr><tr><td valign="top"><mark style="color:blue;">Label</mark></td><td valign="top">Add text to the button.</td></tr><tr><td valign="top"><mark style="color:blue;">Size</mark></td><td valign="top"><mark style="color:$info;">XS</mark><br><mark style="color:$info;">S</mark><br><mark style="color:$info;">M</mark><br><mark style="color:$info;">L</mark></td></tr><tr><td valign="top"><a data-footnote-ref href="#user-content-fn-1"><mark style="color:blue;">Style</mark></a></td><td valign="top"><mark style="color:$info;">Solid</mark><br><mark style="color:$info;">Outline</mark><br><mark style="color:$info;">Text</mark></td></tr><tr><td valign="top"><a data-footnote-ref href="#user-content-fn-2"><mark style="color:blue;">Color scheme</mark></a></td><td valign="top"><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Primary</mark><br><mark style="color:$info;">Secondary</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Overlay soft</mark></td></tr></tbody></table>

</details>

<details>

<summary>Spacer</summary>

<sub><mark style="color:$info;">Click spacer block to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Type</mark></td><td valign="top"><mark style="color:$info;">Flexible</mark><br><mark style="color:$info;">Fixed</mark></td></tr><tr><td valign="top"><mark style="color:$primary;">Height</mark></td><td valign="top"><mark style="color:$primary;">(Fixed)</mark><br><mark style="color:$info;">1 - 20</mark></td></tr><tr><td valign="top"><mark style="color:$primary;">Custom mobile height</mark></td><td valign="top"></td></tr></tbody></table>

</details>

### <mark style="color:$primary;">Content layout</mark>

Change the position and alignment of the text and buttons overlaying the sections' content side.

<sub><mark style="color:$info;">Click section block to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.3984375" valign="top">Setting</th><th valign="top">Options</th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Alignment</mark></td><td valign="top"><mark style="color:$info;">Left /</mark> <mark style="color:$info;">Center / Right</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile alignment</mark></td><td valign="top"><mark style="color:$info;">Left /</mark> <mark style="color:$info;">Center / Right</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Max width</mark></td><td valign="top"><mark style="color:$info;">Full width</mark><br><mark style="color:$info;">Custom</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Custom max width</mark></td><td valign="top"><mark style="color:$info;">130 - 1440px</mark></td></tr></tbody></table>

<h2 align="center">Section styles</h2>

***

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.

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<details>

<summary>Content area</summary>

<table data-header-hidden><thead><tr><th width="240.36785888671875">Setting</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Width</mark></td><td><mark style="color:$info;">Full width</mark><br><mark style="color:$info;">Full width padded</mark><br><mark style="color:$info;">Page width</mark></td></tr><tr><td><mark style="color:blue;">Full width on mobile</mark></td><td><mark style="color:$info;">Available for <strong>Full width padded</strong> option.</mark></td></tr><tr><td><mark style="color:blue;">Set content to page width</mark></td><td><ul class="contains-task-list"><li><input type="checkbox" checked></li></ul></td></tr><tr><td><a data-footnote-ref href="#user-content-fn-3"><mark style="color:blue;">Border</mark></a></td><td><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td><a data-footnote-ref href="#user-content-fn-3"><mark style="color:blue;">Corner radius</mark></a></td><td><mark style="color:$info;">Available for <strong>Full width padded</strong> and <strong>Page width</strong> options.</mark></td></tr><tr><td><a data-footnote-ref href="#user-content-fn-3"><mark style="color:blue;">Dropshadow</mark></a></td><td><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr></tbody></table>

</details>

<details>

<summary>Section</summary>

<table data-header-hidden><thead><tr><th width="240.36785888671875">Setting</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Top padding</mark></td><td><mark style="color:$info;">0 - 27</mark></td></tr><tr><td><mark style="color:blue;">Bottom padding</mark></td><td><mark style="color:$info;">0 - 27</mark></td></tr><tr><td><mark style="color:blue;">Dividers</mark></td><td><mark style="color:$info;">None</mark><br><mark style="color:$info;">Top only</mark><br><mark style="color:$info;">Bottom only</mark><br><mark style="color:$info;">Both</mark></td></tr><tr><td><mark style="color:blue;">Force dividers full width</mark></td><td><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td><mark style="color:blue;">Color scheme</mark></td><td><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Inverse</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Accent</mark><br><mark style="color:$info;">Accent inverse</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Color scheme 1</mark><br><mark style="color:$info;">Color scheme 2</mark></td></tr><tr><td><mark style="color:blue;">Anchor ID</mark></td><td>Link directly to the section on any page. <a href="/pages/XSI0ASdBWe3CkRGeWchj">Learn more</a></td></tr></tbody></table>

</details>

[^1]: Modify [global button styles](/section-studio/sections/global-styles/buttons.md)

[^2]: Modify [global style colors](/section-studio/sections/global-styles/colors.md)

[^3]: 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-text.md?ask=<question>
```

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.