# Text columns with icons

Add a **Text list with icons** for additional product details with one of 30+ icons. You can highlight your company values, process, or key elements of your product.

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FO2SgZneGwAFWC8BCC2vJ%2Ftext-columns-icons.png?alt=media&#x26;token=ead76386-8b5f-4e54-8e22-d9f5fe2f609a" alt="" width="563"><figcaption></figcaption></figure>

## Add text columns with icons

***

Under **Product overview**, click **(+) Add block** and select **Text columns with icons**. Use the drag-and-drop handles **`⋮⋮`** to re-order blocks.  Click the block to start adding content.

## Add icons and text

***

Add up to 3 columns with text and icons. Choose an icon or upload your own.

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FGDXLfFCTBlAgj2qPxtpT%2Ficons-menu.png?alt=media&#x26;token=8eff2bb2-7467-4061-acee-8ae54ce3444b" alt="" width="226"><figcaption></figcaption></figure>

`Click Text columns with icons block to find settings`

<table><thead><tr><th width="217">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Icon</mark></td><td>Choose from 30+ free icons.</td></tr><tr><td><mark style="color:blue;">Custom icon image</mark></td><td>Upload your own icon image to display next the heading.<br><br>We recommend a PNG image with a transparent background and minimum dimensions of 50px by 50px.</td></tr><tr><td><mark style="color:blue;">Heading</mark></td><td>Add text to show a main heading above the text and below the logo.</td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Add text to tell customers more about product.</td></tr></tbody></table>

&#x20;

## Change layout and style

***

`Click Text columns with icons block to find settings`

<table><thead><tr><th width="195">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Column</mark></td><td>Display the block in either the <strong>Right column</strong> (in the product form) or the <strong>Left column</strong> (beneath the product media).</td></tr><tr><td><mark style="color:blue;">Add box</mark></td><td>Display the block within a block with a background color.</td></tr><tr><td><mark style="color:blue;">Add dividers</mark></td><td>Show vertical borders between text columns.</td></tr><tr><td><mark style="color:blue;">Icon framing</mark></td><td>Choose to show a <strong>Circle</strong> or <strong>Slightly rounded</strong> border around the icons. Select None to show no border.</td></tr><tr><td><mark style="color:blue;">Icon width</mark></td><td>Set the pixel width of icons for desktop screens: between <strong>10</strong> and <strong>50</strong> 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 <strong>10</strong> and <strong>50</strong> pixels.</td></tr></tbody></table>

#### Collapsible row

<table><thead><tr><th width="230">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Display as collapsible row</mark></td><td>Show an expandable title that reveals the text when clicked.</td></tr><tr><td><mark style="color:blue;">Expand by default</mark></td><td>Display the collapsible row as open with the text already revealed.</td></tr><tr><td><mark style="color:blue;">Collapsible row title</mark></td><td>Enter text for the row title.</td></tr></tbody></table>

<br>

***

> **Related links**
>
> [Product template](https://help.fluorescent.co/cornerstone/product-pages/product-template)\
> [Product page blocks](https://help.fluorescent.co/cornerstone/product-pages/product-page-blocks)\
> [Image with text block](https://help.fluorescent.co/cornerstone/product-pages/product-page-blocks/image-with-text-block)\
> [Text block](https://help.fluorescent.co/cornerstone/product-pages/product-page-blocks/text-block)\
> [Text list with icons](https://help.fluorescent.co/cornerstone/product-pages/product-page-blocks/text-list-with-icons)