# Icon with text columns

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/k75v3Bon7uDVwAkFyIpB" alt=""><figcaption></figcaption></figure>

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

{% hint style="info" %}
**Editing templates will change all pages that use the same template**. [Create new templates](/cornerstone/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) for different page layouts, or [show dynamic page content](/cornerstone/general/adapting-your-theme/dynamic-content-with-metafields.md) in the same template.
{% endhint %}

### Section styles

Sections include general styles. Click the section to find options for **colors**, **spacing**, and **animations**.

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

### Section layout

***

Change the layout of the columns, including the icon alignment, number of columns, and content width.

`Click section for settings`

<table><thead><tr><th width="164">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Icon alignment</mark></td><td>Place the icon above or to the left of the column text.</td></tr><tr><td><mark style="color:blue;">Columns per row</mark></td><td>Choose how many items to display in each row: between 2 and 8 columns.</td></tr><tr><td><mark style="color:blue;">Content width</mark></td><td>Display the section at Full width or use the slider to set a custom width.</td></tr><tr><td><mark style="color:blue;">Custom width</mark></td><td><p>Set the maximum width of the section: between 400 and 1200 pixels.<br></p><p>The section will change in size to fit smaller screen sizes.</p></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

`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;">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>

### Icon styles

***

Customize the style of the icons, including the frame around them, colors, and width.

`Click section for settings`

<table><thead><tr><th width="197">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Icon framing</mark></td><td>Choose to show a Circle or Slightly rounded border around the icons. Select None to show no border.</td></tr><tr><td><mark style="color:blue;">Icon framing style</mark></td><td>Choose to display icons with a solid color background (Filled), or with a border and no background (Outlined).</td></tr><tr><td><mark style="color:blue;">Icon frame color</mark></td><td>Choose to use the Accent color (from your theme settings) or the Current text color (from the section settings).</td></tr><tr><td><mark style="color:blue;">Icon width</mark></td><td>Set the pixel width of icons for desktop screens: between 10 and 50 pixels.</td></tr><tr><td><mark style="color:blue;">Mobile icon width</mark></td><td>Set the pixel width of icons for mobile screens: between 10 and 50 pixels.</td></tr></tbody></table>

\\

***

#### Related sections

<table data-view="cards"><thead><tr><th data-type="content-ref"></th></tr></thead><tbody><tr><td><a href="/pages/vqSpbZwcaCflvgUOrSNS">/pages/vqSpbZwcaCflvgUOrSNS</a></td></tr><tr><td><a href="/pages/jGup6WqmI4diNZlgKDbS">/pages/jGup6WqmI4diNZlgKDbS</a></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/cornerstone/pages/theme-sections/icon-list-with-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.