> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/eclipse/sections/featured-links.md).

# Featured links

Use the **Featured links** section to show large links with an image showcase that changes when links are hovered over.

<figure><img src="/files/iDYTBirVJsMmpYSrzMpI" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="warning" %}
**Editing templates will change all pages that use the same template**. [Create new templates](/eclipse/pages/templates/using-templates.md) for different page layouts, or [show dynamic page content](/eclipse/general/editing-themes/dynamic-content-with-metafields.md) in the same template.
{% endhint %}

## Set up section

***

In the editor side panel, click **(+) Add section** and select **Featured links**. Click and hold the drag handles **`⋮⋮`** to re-order sections.

### Section styles

***

Click the section to edit general **section styles** for colors and spacing, available in all sections:

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section colors</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme">/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section width</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-width">/pages/3wq6hFMr3k1BDOHIgjqZ#section-width</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section padding</strong></mark></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding">/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding</a></td><td></td></tr></tbody></table>

## Add featured links

***

Click a **Link block** to add a URL and text for the featured links. Click and hold the drag handles **`⋮⋮`** to re-order link blocks.

`Click Link block to find settings`

<table><thead><tr><th width="175">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Link URL</mark></td><td>Select a page or URL for the link.</td></tr><tr><td><mark style="color:blue;">Link label</mark></td><td>Enter text for the link.</td></tr><tr><td><mark style="color:blue;">Image</mark></td><td>Select or upload an image that displays when the link is hovered over. The <a href="#image-showcase">image showcase</a> must be enabled.</td></tr><tr><td><mark style="color:blue;">Underline</mark></td><td>When enabled, the link text will be underlined.</td></tr></tbody></table>

## Change link styles

***

In the section settings, change the layout and text styles of the featured links.

* Choose the **display style** for desktop and mobile
* Change the text **font** and **size**
* Adjust the **line height** between links
* Choose the **separator style** between links

<div><figure><img src="/files/PtKRclR22VvkbecEfixr" alt=""><figcaption><p>Stacked</p></figcaption></figure> <figure><img src="/files/6ACDpas4H1YNxb9GZf8Q" alt=""><figcaption><p>Inline with commas</p></figcaption></figure> <figure><img src="/files/jumHDr57ZQr0QVPOtOW4" alt=""><figcaption><p>Inline with dashes</p></figcaption></figure></div>

&#x20;

`Click Featured links section to find settings`

<table><thead><tr><th width="155">Setting</th><th width="347">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Link text font</mark></td><td>Choose the font for the link text, as selected in your theme settings.</td><td><strong>Heading</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Body</strong></td></tr><tr><td><mark style="color:blue;">Text link size</mark></td><td>Change the font size for all link text from small to large.</td><td><strong>1 - 8</strong><br><em><mark style="background-color:yellow;">Default: 3</mark></em></td></tr><tr><td><mark style="color:blue;">Link line height</mark></td><td>Adjust the amount of vertical space between links.</td><td><strong>1 - 2</strong><br><em><mark style="background-color:yellow;">Default: 1.3</mark></em></td></tr><tr><td><mark style="color:blue;">Desktop display style</mark></td><td>For desktop screens, change the layout of links.</td><td><strong>Inline</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Stacked</strong></td></tr><tr><td><mark style="color:blue;">Mobile display style</mark></td><td>For mobile screens, change the layout of links.</td><td><strong>Inline</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Stacked</strong></td></tr><tr><td><mark style="color:blue;">Inline link style separator</mark></td><td>For "Inline" style, choose the character that separates each link.</td><td><strong>Comma spaced</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Dash</strong><br><strong>Forward slash</strong></td></tr></tbody></table>

&#x20;

## Show product counts for collections

***

If a featured link points to one of your collections, you can display the number of products in that collection.

<figure><img src="/files/GSbbIqLPrpBEOnV8WaMr" alt="" width="563"><figcaption></figcaption></figure>

`Click Featured links section to find settings`

<table><thead><tr><th width="218">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show product counts</mark></td><td>When enabled, featured links to collections will display the number of products in the collection.</td></tr></tbody></table>

## Image showcase

***

Display an image next to the featured links. When hovering over a featured link, display an image.

<div><figure><img src="/files/DfWcCRUUoUbkdvpEXVeC" alt=""><figcaption><p>Desktop stacked with image showcase</p></figcaption></figure> <figure><img src="/files/qkSr8cX1HJfFuA6kOGuN" alt=""><figcaption><p>Mobile stacked with thumbnails</p></figcaption></figure></div>

&#x20;

`Click Featured links section to find settings`

<table><thead><tr><th width="168">Setting</th><th width="362">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable image showcase</mark></td><td>Display an image that changes when links are hovered over.</td><td></td></tr><tr><td><mark style="color:blue;">Default showcase image</mark></td><td>Select or upload an image to display first, before links are hovered over. <br><br>If no image is uploaded, the default will be the first link's image.</td><td></td></tr><tr><td><mark style="color:blue;">Image width</mark></td><td>For mobile screens, adjust the space between content blocks.</td><td><strong>40 - 60 %</strong></td></tr><tr><td><mark style="color:blue;">Image position</mark></td><td>Display the image showcase on the left or right of the featured links.</td><td><strong>Left</strong><br><strong>Right</strong></td></tr><tr><td><mark style="color:blue;">Aspect ratio</mark></td><td><p>Crop the image to a uniform shape, or select Natural to maintain its original shape. </p><p></p><p>"Aspect ratio" refers to the proportion between the image's width and height (W:H).</p></td><td><strong>Natural</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Portrait (2:3)</strong><br><strong>Portrait (4:5)</strong><br><strong>Square (1:1)</strong><br><strong>Landscape (5:4)</strong><br><strong>Landscape (3:2)</strong></td></tr><tr><td><mark style="color:blue;">Show thumbnails on mobile</mark></td><td>On mobile, display images next to the featured links.<br><br>Only applies to "Stacked" mobile display style.</td><td></td></tr></tbody></table>

## Section header

***

Add a **Heading** above the featured links and a **Button** belo&#x77;**.**

&#x20;

`Click Featured links section to find settings`

<table><thead><tr><th width="153">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Heading</mark></td><td>Enter heading text to show above the featured links.</td><td></td></tr><tr><td><mark style="color:blue;">Heading size</mark></td><td>Change the size of the heading text from small to large.</td><td><strong>1-8</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 8</mark></td></tr><tr><td><mark style="color:blue;">Heading tag</mark></td><td>Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. Learn how to <a href="https://github.com/fluorescent/kb-horizon/blob/main/sections/general/editing-themes/h1-heading-tags/README.md#replacing-default-h1-headings">replace default H1 headings</a>.<br><br>This option doesn't change the heading's appearance.</td><td><strong>H1 - H6</strong></td></tr><tr><td><mark style="color:blue;">Button link</mark></td><td>Select a page or URL for the button.</td><td></td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>Enter text for the button.</td><td></td></tr><tr><td><mark style="color:blue;">Button style</mark></td><td>Choose the visual style of the button.</td><td><strong>Solid</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Outline</strong><br><strong>Text</strong></td></tr></tbody></table>