> 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/cornerstone/pages/theme-sections/icon-list-with-columns.md).

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