> 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/shared-blocks/banner.md).

# Banner

**Link**\
Use the selector to redirect customers to a specific page when they click a banner or button.

**Open link in new tab**\
Enable the option to open a page in a new tab instead of the current one.

***

### Desktop layout <a href="#media" id="media"></a>

**Columns**\
Set the number of grid columns the banner spans (2–12).\
This defines its width within the section layout.

**Rows**\
Adjust the banner height within the grid (1–8 rows).

**Example:** A banner set to 4 columns and 4 rows will take up 4/12 of the width and 4/8 of the height in the grid.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FUV9hBlY6L9VoqdOOzCQW%2Fcollage_banner%20layout.png?alt=media&amp;token=72f9535f-0cad-4f70-9a26-1c7951bf74a0" alt=""><figcaption></figcaption></figure>

Use '**Aspect ratio on mobile**' (50%–150%) to adjust image proportions:

* 50% – Landscape
* 100% – Square
* 150% – Portrait

***

### Media

Choose the media type for the banner:

* **Image**\
  Add images for desktop and mobile using the '**Image**' selector.
  * **Hover image** *(desktop only)* – Shows a second image on hover.
  * **Image on mobile** – Set a separate image for mobile devices.
* **Video**\
  Replace the image with a video using the '**Video**' selector.

***

### Content

{% hint style="success" %}
Text appears on top of the media.
{% endhint %}

**Subheading**\
Add supporting text below the main heading.

**Subheading size**\
Adjust size (15–20 px, applied across all devices).

**Heading**\
Enter the main title (appears above the description).

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

**Heading size on mobile**\
Set heading size for mobile (24–36 px).

**Description**\
Add additional text content.

**Position / Position on mobile**\
Place text within the banner: Top, Center, or Bottom.

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

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FxhVgEYqkVrgXAntxq2dc%2Fbanner_text%20top.png?alt=media&amp;token=c98f774f-a567-46a1-8ae1-126a0eb11947" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Center" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F61pbEixaIEaQiSzuMztQ%2Fbanner_text%20center.png?alt=media&amp;token=5cfc98b4-3f7a-4ffb-a533-9c5e4eb57c4e" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Bottom" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F1BsE9NLzirSDQ24hDvzl%2Fbanner_text%20bottom.png?alt=media&amp;token=b736873d-236d-4926-9e82-9c987472c4e4" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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

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

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FeRo6CYnsKlI0ZN5DtVNs%2Fbanner_alignment%20left.png?alt=media&amp;token=6b7f6723-2503-46e9-9c07-7969be1b1b3a" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Center" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FQLhCd2ylWJI6JF5uPbRq%2Fbanner_alignment%20center.png?alt=media&amp;token=084bfc47-aedd-4719-a67e-9f47abc1fda6" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Right" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FedBiCARvj1TpPcN3mTF0%2Fbanner_alignment%20right.png?alt=media&amp;token=fe5eb145-58e2-43e2-9f10-4c426021757c" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="success" %}
Example of the functionality from the '*Banners carousel*' section.
{% endhint %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FfLpW6z72GOWluBdi4vbl%2Fbanners%20carousel_banner%20content.png?alt=media&amp;token=c3317a00-2b0d-44c5-b58f-a50b9cd53a8e" alt=""><figcaption></figcaption></figure>

***

### Badge

**Show**\
Enables the display of a badge.

**Content**\
Enter the badge text.

**Icon**\
Choose an icon or select '**None**' to disable it.

**Icon SVG**\
Upload a custom icon instead of using a built-in one.

**Position / Position on mobile**\
Set badge placement:

* Top left
* Top center
* Top right
* Attach to content - Positions the badge above the text and treats the text area as its container, following the same positioning rules as other text elements.

{% tabs %}
{% tab title="Top left" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FqpkPl5HsaX4HatLqx4Rt%2Fbanner_badge%20left.png?alt=media&amp;token=480bd632-204d-4400-8889-66826c5977bd" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Top center" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FS4Yj4Br61l3YJyQ1rFYx%2Fbanner_badge%20center.png?alt=media&amp;token=e687d235-ac33-4e23-b675-083e1b6f3ab9" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Top right" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FDEJfGSjk4FZZlMwJ4KhD%2Fbanner_badge%20right.png?alt=media&amp;token=3c2f2497-b5b6-4298-8bb4-f06cc8eb0f65" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Attach to content" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F33YgKK4TerRRSO7Ch2iO%2Fheader_dropdown%20banner%20badge.png?alt=media&amp;token=9d808e7c-29d2-4b58-afca-e9c35d3e09dc" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

**Hide on mobile**\
Hide the badge on mobile devices. \
After disabling the '*Hide on mobile*' option, the '*Position on mobile*' drop-down is concealed.

{% hint style="success" %}
Example settings in the '*Banners carousel*' section.
{% endhint %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F71hxdtALXZy50ZclSn11%2Fbanners%20carousel_banner%20badge.png?alt=media&amp;token=6c95f027-8ae0-40f4-ba92-2a21cfec3bb8" alt=""><figcaption></figcaption></figure>

***

### Button

**Label**\
Enter the call-to-action text to display on the button.

**Style**

{% hint style="info" %}
If no colors are set in the current block, the button uses the default styles defined in *Theme settings ->* [*<mark style="color:$primary;">Colors</mark>*](/triumph/theme-settings/theme-settings.md#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.

{% hint style="success" %}
View the example of the settings in the '*Banner carousel*' section:
{% endhint %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2Fw2g8bsoHzJhF06PnPsZ4%2Fbanners%20carousel_banner%20bttn.png?alt=media&amp;token=09336ace-f814-482c-9f53-c2b4af676739" alt=""><figcaption></figcaption></figure>

***

### Colors

Apply color settings to the *Heading*, *Subheading*, and *Description*:

* **Text** – Button text color.
* **Hover text** – Button text color on hover.

{% hint style="success" %}
The provided example demonstrates the settings in the '*Banner carousel*' section:
{% endhint %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F4TYwZZeW3xRBxypFQxbI%2Fbanners%20carousel_banner%20text.png?alt=media&amp;token=981e1f14-cf28-49f6-bb8d-4fa572e821df" alt=""><figcaption></figcaption></figure>

***

### Badge colors

Colorize the badge using the settings:

* **Text -** Badge text color.
* **Background** - Badge background color.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FS4Po38J3aa7mMmRNki04%2Fheader_%20banner%20badge%20colors.png?alt=media&amp;token=e1efe9cd-c813-4c91-bf11-117abdf2edbf" alt=""><figcaption></figcaption></figure>

***

### Button colors

{% hint style="success" %}
Available color settings depend on the selected button style in the [<mark style="color:$primary;">Button</mark>](#button) group.
{% endhint %}

Use these settings to customize a solid button:

* **Background / Background gradient** – Set the button background color.
* **Border** – Add or adjust the border color.
* **Text** – Set the button text color.

Hover state:

* **Hover background / Hover background gradient** - Background color on hover.
* **Hover border** - Border color on hover.
* **Hover text** - Text color on hover.

### Overlay

Add a color overlay to the banner:

**Style**

* **Full background** – Covers the entire banner with a solid overlay.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FDZ9oGrhFt0YGUjaPQUg7%2Fbanner_overlay%20full%20background.png?alt=media&amp;token=2ed46ecc-376c-47e9-8dc6-a50912f7fb5b" alt=""><figcaption></figcaption></figure>

* **Gradient** – Applies a fading overlay from bottom to top.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FTFMs5b6RW1voyDH6Y5el%2Fbanner_overlay%20gradient.png?alt=media&amp;token=d926b304-e172-4605-8c46-1dff9a86bd38" alt=""><figcaption></figcaption></figure>

Additional gradient settings:

**Opacity**\
Controls transparency (0–100%).

**Color**\
Select overlay color.

* **None** – Disables overlay.