> 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/image-with-text-grid.md).

# Image with text: Grid

Combines images and text in a grid layout to present multiple pieces of content.

*Shared Settings*:

* [<mark style="color:$primary;">Card content</mark>](#card-content)
* [<mark style="color:$primary;">Card image</mark>](#card-image)
* [<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;">Button colors</mark>](/triumph/template/shared-blocks/button.md#colors)

*Shared Blocks:*

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

***

#### Card content

**Alignment**\
Set text alignment: Left, Center, or Right.

**Heading size** *(all devices)*\
Set heading size (24–54 px).

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FxMnCb0Slaoqqe2w5VoFr%2Fimage%20with%20text%20grid_card%20content.png?alt=media&amp;token=fa12c92b-14fc-44b3-9b91-38749969a933" alt=""><figcaption></figcaption></figure>

**Button style**

{% hint style="info" %}
If no colors are set in the corresponding section, the button uses the default styles defined in *Theme settings ->* [*<mark style="color:$primary;">Colors</mark>*](https://mpithemes.gitbook.io/triumph/theme-settings/theme-settings#colors).
{% endhint %}

Choose the button appearance:

* **Primary / Secondary**\
  Uses the default button styles set in the global settings (solid or outline).

***

#### Card image

**Aspect ratio**\
Choose the image shape:

* **Adapt to image** – Keeps each image’s original proportions.
* **Squared** – Displays images in a 1:1 ratio.
* **Portrait** – Taller images (3:4 ratio).
* **Landscape** – Wider images (4:3 ratio).

***

#### Card colors

**Text**\
Applies to the card heading and description.

***

#### Hover card colors

**Change colors on hover**\
Turn this on to apply a different color scheme when hovering over the product card.

**Hover background**\
Sets the card background color on hover.

**Text**\
Sets the text color when the card is hovered.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FekO3yuB8Yex2Kvg9ntf2%2Fimage%20with%20text%20grid_card%20colors.png?alt=media&amp;token=117fa9e2-0777-4e7a-815f-ab36852f12bd" alt=""><figcaption></figcaption></figure>

***

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FrCUIUCVmS6r5XDWizqaG%2Fimage%20with%20text%20grid_desktop.png?alt=media&amp;token=6c6373ff-7f6a-4a39-a139-a813fe278953" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FYdbdJL4Mo0h0wUUtZzro%2Fimage%20with%20text%20grid_mobile.png?alt=media&amp;token=dc6018a9-6853-49a7-ab17-1e12d4fa1b85" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}