# Hero gallery

{% columns %}
{% column width="58.333333333333336%" %}
Display multiple hero images or videos with thumbnail navigation
{% endcolumn %}

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

Hero images and autoplay videos

Gallery thumbnail navigation

Flexible overlay content

Custom layout and styles
{% endhint %}

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

[Image slide](#slide-blocks)

[Video slide](#slide-blocks)
{% endhint %}

{% endcolumn %}
{% endcolumns %}

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

***

You can set the section height in **pixels** to be the exact same height on all devices or as a **percentage** to adapt to the section height of the screen height.

<sub><mark style="color:$info;">Click Slide 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;">Section height</mark></td><td valign="top"><mark style="color:$info;">Adapt to screen height (50 - 100%)</mark><br><mark style="color:$info;">Fixed height (300 - 800px)</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile section height</mark></td><td valign="top"><mark style="color:$info;">Adapt to screen height (50 - 100%)</mark><br><mark style="color:$info;">Fixed height (300 - 800px)</mark></td></tr></tbody></table>

<h2 align="center">Slide thumbnails</h2>

***

The Slide thumbnails show a small image of each slide, which visitors can click through to navigate the gallery.&#x20;

In the section settings, change the size and position, and choose to enable the corner radius from global styles.

<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 (4:5)</mark><br><mark style="color:$info;">Custom</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Media width</mark></td><td valign="top"><mark style="color:$info;">60 - 200px</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Position</mark></td><td valign="top"><mark style="color:$info;">Left</mark><br><mark style="color:$info;">Center</mark><br><mark style="color:$info;">Right</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile position</mark></td><td valign="top"><mark style="color:$info;">Left</mark><br><mark style="color:$info;">Center</mark><br><mark style="color:$info;">Right</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Corner radius</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr></tbody></table>

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

***

Add slide blocks with an image or autoplay video (without sound).

<details>

<summary>Media</summary>

<sub><mark style="color:$info;">Click Slide 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;">Media type</mark></td><td valign="top"><mark style="color:$info;">Image</mark><br><mark style="color:$info;">Video</mark></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;">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></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;">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>

</details>

<details>

<summary>Content</summary>

Add overlay headings and text.

<sub><mark style="color:$info;">Click Slide 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"></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><tr><td valign="top"><mark style="color:blue;">Heading</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Heading size</mark></td><td valign="top"><mark style="color:$info;">1 - 6</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Text</mark></td><td valign="top"></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.

<sub><mark style="color:$info;">Click Slide 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"></td></tr><tr><td valign="top"><mark style="color:blue;">Label</mark></td><td valign="top"></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"><mark style="color:blue;">Style</mark></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"><mark style="color:blue;">Color scheme</mark></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>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>

<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-1"><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-1"><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-1"><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="../anchor-id">Learn more</a></td></tr></tbody></table>

</details>

[^1]: Modify in [Global styles > Borders and styles > Large elements](https://help.fluorescent.co/section-studio/global-styles/borders-and-styles#large-elements)