> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/triumph/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/triumph/template/sections/icons-with-text.md).

# Icons with text

Combines icons and short text to highlight key features or benefits.

*Shared Settings*:

* [<mark style="color:$primary;">Card</mark>](#card)
* [<mark style="color:$primary;">Section layout</mark>](/triumph/template/shared-settings/section-layout.md)
* [<mark style="color:$primary;">Section mobile layout</mark>](/triumph/template/shared-settings/section-mobile-layout.md)
* [<mark style="color:$primary;">Divider line</mark>](/triumph/template/shared-settings/divider-line.md)
* [<mark style="color:$primary;">Section background</mark>](/triumph/template/shared-settings/section-background.md)
* [<mark style="color:$primary;">Colors</mark>](#colors)
* [<mark style="color:$primary;">Card colors</mark>](#card-colors)
* [<mark style="color:$primary;">Hover card colors</mark>](#hover-card-colors)
* [<mark style="color:$primary;">Carousel button colors</mark>](/triumph/template/shared-settings/carousel-buttons-colors.md)

*Shared Blocks:*

* [<mark style="color:$primary;">Heading</mark>](/triumph/template/shared-blocks/heading.md)
* [<mark style="color:$primary;">Item</mark>](/triumph/template/sections/icons-with-text/item.md)

***

#### Card

**Style**\
Change the layout of cards:

* **Horizontal** - Displays icon on the side of the text.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FO5eRhZgrwXFJjt765qfl%2Ficons%20with%20text_horizontal.png?alt=media&amp;token=633a1316-362f-406c-b876-ec4497515c5f" alt=""><figcaption></figcaption></figure>

* **Vertical** - Places the icon at the top and centers the content.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FvjEnGwOzvVZj15k3miIg%2Ficons%20with%20text_vertical.png?alt=media&amp;token=f6966756-436e-4011-9386-c6c171cb834a" alt=""><figcaption></figcaption></figure>

**Bordered**\
Changes the layout by displaying content in cards.

**Alignment**\
Displays content on the left or centered.

**Vertical alignment**\
Places the icon at the top or center.

**Heading size**\
Choose the card heading size: Small, Medium, or Large.

***

#### Section layout

**Carousel**

* **Enabled** – Shows content as a slider.
* **Disabled** – Displays content in a simple grid layout based on the number of added columns.<br>

***

#### Card colors

**Text**\
Applies to all the texts in the contact list.

**Accent**\
Changes the color of the contact number.

**Icon background / Icon color**\
Set the icon colors.

***

#### Hover card colors

**Icon background / Icon color**\
Change the icon colors on hover.