# Media with content

The media with content section combines visual media and text-based content in a split layout. It is designed for storytelling, product highlights, or promotional messaging where imagery or video is paired with supporting copy and optional calls to action.

<figure><img src="/files/sVLDsJ6nq2AEiuLMDC5F" alt=""><figcaption></figcaption></figure>

#### Direction

Defines the layout direction on desktop. Set to “Row” to display media and content side by side; mobile always uses a column layout for usability.

#### Text alignment

Controls the alignment of text within the content area. Default is “Center”, aligning text centrally within the section.

#### Content alignment

Controls how the content block is positioned within the section layout. Default is “Center”, ensuring balanced placement alongside media.

#### Maximum width

Controls the horizontal width of the section. Set to “Fill space” to allow the section to span the full available container width.

#### Media type

Defines the type of media used in the section. Options include image or video.

#### Media link

Specifies a link associated with the media, if applicable. Leave blank to omit.

#### Media aspect ratio

Controls the display ratio of the media. Set to “Auto” to preserve the original aspect ratio, or adjust as needed for layout consistency.

#### Image settings

Allows selection and upload of an image used when image media type is selected.

#### Video settings

Configures video behavior when video media type is selected, including autoplay, looping, muting, and controls visibility.

#### Heading

The main heading displayed in the content area. Default is “Media with content”. Leave blank to omit.

#### Subheading

Optional supporting text shown below the heading to provide context or introduction. Leave blank to omit.

#### Content

Rich text area used for adding formatted content such as paragraphs, links, and basic styling for messaging or storytelling.

#### Menu

Allows selection of a menu to feature within the content area, enabling quick navigation links.

#### Button label

Defines the text for an optional call-to-action button. Leave blank to hide the button.

#### Button link

Specifies the URL destination for the button. Can link to a page, product, or external URL. Leave blank to omit.

#### Button style

Defines the visual style of the button. Default is “Secondary”.

#### Button size

Controls the size of the button. Options include Small, Medium, or Large depending on emphasis.

#### Vertical spacing

Controls the spacing around the section to adjust its separation from surrounding content.

#### Vertical spacing (desktop)

Sets the vertical spacing applied on desktop devices. Default is Large.

#### Vertical spacing (mobile)

Sets the vertical spacing applied on mobile devices to ensure consistent spacing across screen sizes.


---

# 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://gatame.gitbook.io/highstreet/dynamic-sections/editorial/media-with-content.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.