# Icon with text columns

{% hint style="info" %}
This section is available in v3.0 and later. Learn how to [update your theme](https://help.fluorescent.co/eclipse/changelog/update-your-theme) to access new features.
{% endhint %}

Use the **Icon with text columns** section to display a row of text blocks with icons. You can highlight your company values, process, or key features of your product.

* Add columns with icons, text, and an optional link.
* Change the icon color and size
* Change the layout and alignment

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FqqPvfX9pjXw0WMEiUQAP%2Ficon-with-text-columns-1.png?alt=media&#x26;token=f54e528f-4d6d-48cb-bf26-fd30600a12a7" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FUNiZ9O5H2kZwLvPzp8YU%2Ficon-with-text-columns-2.png?alt=media&#x26;token=95dba916-fd47-4354-86b4-a4be0ce42c1a" alt=""><figcaption></figcaption></figure>

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

## Set up section

***

In the editor side panel, click **(+) Add section** and select **Icon with text columns** 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="../overview/section-styles#color-scheme">#color-scheme</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section width</strong></mark></td><td><a href="../overview/section-styles#section-width">#section-width</a></td><td></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section padding</strong></mark></td><td><a href="../overview/section-styles#section-padding">#section-padding</a></td><td></td></tr></tbody></table>

### Section layout

***

In the section settings, you can adjust the overall layout and style of the column blocks.

* Change the icon size and color
* Choose the number of **columns per row**
* Change the amount of **spacing** between columns
* On mobile, display columns as **Stacked** (multiple rows) or **Slider** (single row).

&#x20;

`Click section for settings`

<table><thead><tr><th width="190">Setting</th><th width="358">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Icon color</mark></td><td>Choose an icon color based on the section's color scheme.</td><td><strong>Accent</strong><br><strong>Text</strong></td></tr><tr><td><mark style="color:blue;">Icon width</mark></td><td>Adjust the width of the icon for desktop screens.<br><br>Make sure the icon width does not exceed the width of your custom image.</td><td><strong>12 - 74 px</strong></td></tr><tr><td><mark style="color:blue;">Icon alignment</mark></td><td>Place the icon above or to the left of the column text.</td><td><strong>Icon above, text center</strong><br><strong>Icon above, text left</strong><br><strong>Icon left, text left</strong></td></tr><tr><td><mark style="color:blue;">Columns per row</mark></td><td>Select the number of columns to display on desktop screens.</td><td><strong>2 - 5</strong></td></tr><tr><td><mark style="color:blue;">Column spacing</mark></td><td>Choose the amount of spacing between column blocks.</td><td><strong>Small</strong><br><strong>Medium</strong><br><strong>Large</strong></td></tr><tr><td><mark style="color:blue;">(Mobile) Layout</mark></td><td>Display blocks in a Stacked single column or as a single row carousel.</td><td><strong>Stacked</strong><br><strong>Slider</strong></td></tr><tr><td><mark style="color:blue;">(Mobile) Icon width</mark></td><td>Adjust the width of the icon for mobile screens.<br><br>Make sure the icon width does not exceed the width of your custom image.</td><td></td></tr><tr><td><mark style="color:blue;">(Mobile) Icon alignment</mark></td><td>Place the icon above or to the left of the column text.</td><td></td></tr></tbody></table>

## Add column blocks

***

Add column blocks with **icons, text,** and optional **link**. In the Icon with text columns section, click **(+) Add Column**. Click and hold the drag handles **`⋮⋮`** to rearrange the blocks. Click the **Column block** to add content.

* Select from 30+ icons or upload a custom icon image
* Add column headings and text
* Make the icon a clickable link

&#x20;

`Click column block for settings`

<table><thead><tr><th width="189">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Icon</mark></td><td>Select from 30+ icons to show in the column.</td></tr><tr><td><mark style="color:blue;">Custom icon image</mark></td><td><p>Upload your own icon to show in the scrolling content. <br></p><p>We recommend a <code>.png</code> image with a transparent background and minimum dimensions of 50px by 50px.</p></td></tr><tr><td><mark style="color:blue;">Icon link</mark></td><td>Add a link to redirect visitors when they click the icon.</td></tr><tr><td><mark style="color:blue;">Heading</mark></td><td>Add text as the column title.</td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Add multiple lines of text below the heading.</td></tr></tbody></table>