> 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-tabs.md).

# Image with text: Tabs

Displays images and text organized into tabs for easy navigation between sections.

*Shared Settings*:

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

*Shared Blocks:*

* [<mark style="color:$primary;">Tab</mark>](/triumph/template/sections/image-with-text-tabs/tab.md)

***

#### Content

**Width on desktop**\
Adjusts how much horizontal space text content takes on desktop screens (30-70%).

**Position**\
Sets the position of text content within the section:

* **Left** – Aligns text content to the left of the screen.
* **Right** – Sets text content to the right.

**Vertical gap**\
Changes the space between the banner and the text content (30-150 px).

**Alignment on desktop**\
Sets the content alignment to the left, center, or right.

**Vertical alignment**\
Displays text content at the top, center, or bottom on the side of the banner.

**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).
* **Link style**\
  Displays as a text link.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2Fauqj98QPXf54kWKX8qkW%2Fimage%20with%20text%20tabs_content.png?alt=media&amp;token=c4f38803-4f7a-491e-a320-196b9d494bc5" alt=""><figcaption></figcaption></figure>

***

#### Heading

**Size**\
Choose the tabs' heading size: Small, Medium, or Large.

**Alignment**\
Choose how the tabs are aligned: Left or Center.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F6JzgyfTXBIavNon5Usmx%2Fimage%20with%20text%20tabs_heading.png?alt=media&amp;token=4967067a-f978-4ee2-bcd1-1b3cef0b80a0" alt=""><figcaption></figcaption></figure>

***

#### Colors

**Divider line**\
Set the color of the divider line.\
*(This option appears when the Divider line is enabled.)*

**Text**\
Controls the color of all the section texts.

***

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

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F6hRCVnPH4WoJQ4sEnxBR%2Fimage%20with%20text%20tabs_desktop.png?alt=media&amp;token=44bf7722-b44d-4e81-9b1e-4d6870104acb" 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%2F3q3a4YUU5fxBfll5ypD9%2Fimage%20with%20text%20tabs_mobile.png?alt=media&amp;token=e5bf20f9-d74e-46fe-a9fa-bd733030c6ed" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}