> 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/countdown-timer.md).

# Countdown timer

Displays a timer to create urgency for offers or events.

*Shared Settings*:

* [<mark style="color:$primary;">Content layout</mark>](#content-layout)
* [<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)

*Shared Blocks:*

* [<mark style="color:$primary;">Logo</mark>](/triumph/template/shared-blocks/slide/logo.md)
* [<mark style="color:$primary;">Countdown</mark>](/triumph/template/shared-blocks/countdown.md)
* [<mark style="color:$primary;">Headings</mark>](/triumph/template/shared-blocks/slide/headings.md)
* [<mark style="color:$primary;">Button</mark>](/triumph/template/shared-blocks/button.md)
* [<mark style="color:$primary;">Note</mark>](/triumph/template/shared-blocks/slide/note.md)

***

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

Use '**Height type**' to control slide height:

* **Fixed** - Set custom heights for different devices:
  * Height on desktop: 500–1000 px.
  * Height on tablet: 400–800 px.
  * Height on mobile: 300–800 px.
* **Full height** - Uses the full screen height. Enable '**Fit to viewport height**' to make the slideshow fill the screen (recommended when placed under the header).

***

#### Content layout

**Show Inspector for editor mode**\
Displays a visual guide to help you see and adjust the content area while editing.

**Width on desktop**\
Controls how wide the content appears on desktop screens (30-100%).

**Horizontal position on desktop**\
Adjusts the content left or right on the desktop (0-100%).

Move the content up or down on various devices (0-100%):

* Vertical position on desktop
* Vertical position on tablet
* Vertical position on mobile

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

***

#### Colors

**Text**\
Sets the color of the subheading, heading, description, and notes.

**Countdown**\
Controls the color of the numbers and labels inside the countdown.

***

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

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FIe3ANClBaq70CU7nHg8v%2Fcountdown%20timer_desktop.png?alt=media&amp;token=814afba0-3922-4e11-91c8-1e068bb0b6e9" 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%2FjoMoTIhR6rsN4Iymk3I5%2Fcountdown%20timer_mobile.png?alt=media&amp;token=d4c636a1-07e1-406e-ada3-c6e469c13327" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}