> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/purity-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextsky.gitbook.io/purity-theme/group-sections/banners/media-hero.md).

# Media hero

**Media hero** is a high-impact, full-width banner designed to showcase a featured image or video alongside key messaging. You can customize the layout, alignment, and spacing to suit your brand’s style.

Ideal for product launches, promotions, or brand storytelling, the **Media hero** section captures attention and guides visitors toward important actions.

## Section settings <a href="#section-settings" id="section-settings"></a>

### General settings <a href="#general-setting" id="general-setting"></a>

| Setting          | Description                                     |
| ---------------- | ----------------------------------------------- |
| **Color scheme** | Select colors from **Theme settings -> Colors** |

### Media <a href="#blog-posts" id="blog-posts"></a>

| Setting             | Description                                                                 |
| ------------------- | --------------------------------------------------------------------------- |
| **Type**            | Choose the type of media to display in the section.                         |
| **Image**           | Upload your desired image banner                                            |
| **Video local**     | You can also use a local video instead                                      |
| **Video alt text**  | This setting is for describing the video for customers using screen readers |
| **Overlay opacity** | Customize the opacity of the media                                          |

### Section padding <a href="#section-padding" id="section-padding"></a>

| Setting    | Description                                |
| ---------- | ------------------------------------------ |
| **Top**    | Customize the top margin of the section    |
| **Bottom** | Customize the bottom margin of the section |

### Show divider

| Setting          | Description                                                   |
| ---------------- | ------------------------------------------------------------- |
| **Show divider** | Display a dividing line to separate from the previous section |

## Block settings

The **Media Hero** section uses the **Heading** block as its default block. This block allows you to display a prominent heading over the media, typically an image or video, creating a strong focal point for your content.

For detailed settings, refer to the [**Heading block**](https://nextsky.gitbook.io/purity-theme/group-blocks/basic/heading) configuration, where you can adjust the text, font, size, alignment, and other styling options to suit the layout and design of your store.