# Icon with text columns

{% hint style="info" %}
This section is available in v3.0 and later. Learn how to [update your theme](/eclipse/changelog/update-your-theme.md) 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="/files/CgKkAwuXyJe1duaYM8dT" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/oKt3GpQIMmhUqyD74fzR" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**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 **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="/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>

### 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/eclipse/sections/icon-with-text-columns.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.