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

<div><figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FnugSbLrSgatlE3vtJkZz%2Ftext-list-with-icons.png?alt=media&#x26;token=59ca7e06-bfa8-4ad7-ba94-d9d6c98e9f93" alt=""><figcaption></figcaption></figure> <figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FnUvbLVelQQVFLOBqZjYR%2Ftext-list.png?alt=media&#x26;token=c9cb6b69-1788-4939-8ea1-5c4ad9a948f4" alt=""><figcaption></figcaption></figure></div>

## Set up text list with icons

***

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

Customize the appearance with boxes around the text or dividers between them.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Under **Product overview**, click **(+) Add block** and select **Text list with icons**.
2. Click the new **Text list with icons** block to open the settings.
3. Choose whether to **Add box** to display an outline around the text list.
4. Choose whether to **Add dividers** to separate each text list item.
5. For each **List item**, select an **Icon** and enter **Text**.

   > We recommend a short sentence or two.
6. Click **Save.**

</details>

## Add items

***

Add up to 6 list items with an **icon** and **text**. Choose an icon or upload your own.

&#x20;

`Click Text list 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;">Text</mark></td><td>Add short text to tell customers about your product.</td></tr></tbody></table>

## Change layout and style

***

`Click the Text list with icons block to find settings`

<table><thead><tr><th width="194">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Title</mark></td><td>Add text to show a heading at the top of the block, above the text list.</td></tr><tr><td><mark style="color:blue;">Column</mark></td><td>Display the block in either the Right column (in the product form) or the Left column (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 horizontal borders between each text list item.</td></tr><tr><td><mark style="color:blue;">Truncate text</mark></td><td>Hide text after a selected number of lines and show a ‘more’ button that reveals the full description.</td></tr><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>

#### Collapsible row

<table><thead><tr><th width="178">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 columns with icons](https://help.fluorescent.co/cornerstone/product-pages/product-page-blocks/text-columns-with-icons)


---

# 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/product-pages/product-page-blocks/text-list-with-icons.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.