# Collection list hero

Display collection links alongside a media showcase that changes when links are hovered over.

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

***

Add heading text that displays above the collection list links. You can adjust the heading size and bottom padding.

<table data-header-hidden><thead><tr><th width="240.46142578125" 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;">Bottom padding</mark></td><td valign="top"><mark style="color:$info;">0 - 27</mark></td></tr></tbody></table>

<h2 align="center">Collection list</h2>

***

The collection list displays collection links in a single column.

### <mark style="color:$primary;">Add collection blocks</mark>

Add collection link blocks for each collection you want to display. In the block settings, select your collection, add overlay text, and choose an image or video to display on hover in the media showcase.

<details>

<summary>Media</summary>

Choose which media to display when collections are hovered.

<sub><mark style="color:$info;">Click collection 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;">Collection</mark><br><mark style="color:$info;">Image</mark><br><mark style="color:$info;">Video</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;">Video</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Video focal point</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td valign="top"><mark style="color:blue;">Override overlay opacity</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr></tbody></table>

</details>

<details>

<summary>Mobile thumbnail</summary>

<sub><mark style="color:$info;">Click collection 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;">Collection</mark><br><mark style="color:$info;">Image</mark></td></tr><tr><td valign="top">I<mark style="color:blue;">mage</mark></td><td valign="top"></td></tr></tbody></table>

<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;">Show thumbnails</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox" checked></li></ul></td></tr><tr><td valign="top"><mark style="color:blue;">Image 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;">Corner radius</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td valign="top"><mark style="color:blue;">Crop to circle</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td valign="top"><mark style="color:blue;">Width</mark></td><td valign="top"><mark style="color:$info;">60 - 120 px</mark></td></tr><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></tbody></table>

</details>

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

Change the alignment and style of the collection list, including the font, spacing, and visual dividers. Choose to show the **product count** of each collection, and adjust the **hover dot** size.

<details>

<summary>Alignment</summary>

Adjust the alignment of the collection list links for both desktop and mobile.&#x20;

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

<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><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 alignment</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></tbody></table>

</details>

<details>

<summary>Style</summary>

Change the style of the collection list, including the font, spacing, and visual dividers. Choose to show the **product count** of each collection, and adjust the **hover dot** size.

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

<table data-header-hidden><thead><tr><th width="240.46142578125" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Font</mark></td><td valign="top"><mark style="color:$info;">Body</mark><br><mark style="color:$info;">Heading</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Font size</mark></td><td valign="top"><mark style="color:$info;">20 - 120 px</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile font size</mark></td><td valign="top"><mark style="color:$info;">20 - 60 px</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Vertical gap</mark></td><td valign="top"><mark style="color:$info;">1 - 10</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile vertical gap</mark></td><td valign="top"><mark style="color:$info;">1 - 10</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Hover dot size</mark></td><td valign="top"><mark style="color:$info;">8 - 40 px</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Product count</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox" checked></li></ul></td></tr><tr><td valign="top"><mark style="color:blue;">Dividers</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox" checked></li></ul></td></tr><tr><td valign="top"><mark style="color:blue;">Make dividers full width</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td valign="top"><mark style="color:blue;">Overlay 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></td></tr></tbody></table>

</details>

<h2 align="center">Default background media</h2>

***

Display an image, solid color, or autoplay video (without sound) as the default background media, before visitors hover over the collection links.

<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></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">Content area > <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></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"></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"><ul class="contains-task-list"><li><input type="checkbox"></li></ul></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>Showcase 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)