# Collection list media

{% columns %}
{% column width="58.333333333333336%" %}
Display collection links alongside a media showcase that changes when links are hovered over.
{% endcolumn %}

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

Collection links 

Collection product count

Feature media on hover

Supports autoplay video

Mobile collection thumbnails

Flexible overlay content

Custom layout and styles
{% endhint %}
{% endcolumn %}
{% endcolumns %}

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

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

***

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

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

<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 upload an image or video to display on hover in the media showcase.

<details>

<summary>Content</summary>

Add text to overlay the collection media showcase. Leave the fields blank to remove the text.

<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;">Top text</mark></td><td valign="top">Small overlay text at the top.</td></tr><tr><td valign="top"><mark style="color:blue;">Heading</mark></td><td valign="top">Overlay heading in the middle.</td></tr><tr><td valign="top"><mark style="color:blue;">Bottom text</mark></td><td valign="top">Small overlay text at the bottom.</td></tr></tbody></table>

</details>

<details>

<summary>Media</summary>

Upload media to appear 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"></td></tr><tr><td valign="top"><mark style="color:blue;">Override overlay color scheme</mark></td><td valign="top"></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;">Mobile image</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;

<sub><mark style="color:$info;">Click section 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;">Vertical alignment</mark></td><td valign="top"><mark style="color:$info;">Top</mark><br><mark style="color:$info;">Center</mark><br><mark style="color:$info;">Bottom</mark><br><mark style="color:$info;">Justified</mark></td></tr><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.

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

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

</details>

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

***

The media showcase displays the images or videos uploaded for each collection, appearing when collection links are hovered over.

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

Display an image or autoplay video (without sound) as the default showcase 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;">Default media type</mark></td><td valign="top"><mark style="color:$info;">Image</mark><br><mark style="color:$info;">Video</mark></td></tr></tbody></table>

<details>

<summary>Image</summary>

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

<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;">Default 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;">Default image</mark></td><td valign="top"></td></tr></tbody></table>

</details>

<details>

<summary>Video</summary>

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

<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;">Default 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></tbody></table>

</details>

<details>

<summary>Showcase overlay colors</summary>

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

<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;">Media style and layout</mark>

Change the media and content layout, text size, and the overlay color.

<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;">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;">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 size</mark></td><td valign="top"><mark style="color:$info;">1 - 4</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Content width</mark></td><td valign="top"><mark style="color:$info;">360 - 1440px</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Media width</mark></td><td valign="top"><mark style="color:$info;">30 - 70%</mark></td></tr></tbody></table>

### <mark style="color:$primary;">Mobile media</mark>&#x20;

Upload an image or video to appear with the collection list on mobile devices.

<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 media</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;">Placement</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;">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;">Default 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;">Default image</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Default 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></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-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)