> For the complete documentation index, see [llms.txt](https://docs.rh-webdesign.com/cms-bundle/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rh-webdesign.com/cms-bundle/en/elemente/call-to-action/countdown-banner.md).

# Countdown - Banner

Time-limited content in the shopping experiences

The **element** is an excellent way to create urgency and highlight time-limited promotions or events in your shop.

Whether it's a special offer, an upcoming event, or a product launch—the countdown captures visitors' attention and motivates them to act promptly.

{% hint style="info" %}
**What does the Countdown Banner element do?**

The countdown banner displays a **timer** that counts down in **real-time**, showing the remaining time until a specific event or offer.
{% endhint %}

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2FvJMOiuWiVhL3Csg1FQY1%2FBildschirmfoto%202024-10-07%20um%2020.05.31.png?alt=media&amp;token=6f2de845-a855-424c-b1ad-d1d24a04799d" alt=""><figcaption></figcaption></figure>

### General Settings

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2FBjiM9VkAtglWSvxcoHom%2FBildschirmfoto%202024-10-07%20um%2020.06.31.png?alt=media&amp;token=c08c9f39-cf7c-4394-a81d-4a017671d792" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="265">Function</th><th>Description</th></tr></thead><tbody><tr><td>Linking (1)</td><td><a data-mention href="/cms-bundle/en/elemente/konfigurationsbausteine/verlinkung.md">Linking</a></td></tr><tr><td>Timer (2)</td><td><a data-mention href="/cms-bundle/en/elemente/konfigurationsbausteine/timer.md">Timer</a></td></tr></tbody></table>

### Advanced Settings

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2FtUqmdi34YKQ8RVN73oP5%2FBildschirmfoto%202024-10-07%20um%2020.07.01.png?alt=media&amp;token=1e557bde-d803-4ed5-b3dd-f075caebae45" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="263">Function</th><th>Description</th></tr></thead><tbody><tr><td>Heading (1)</td><td>Here you can set the heading for the banner</td></tr><tr><td>Subtitle (2)</td><td>Here you can set the subtitle for the banner</td></tr><tr><td>Button Settings (3)</td><td><a data-mention href="/cms-bundle/en/elemente/konfigurationsbausteine/button.md">Button</a></td></tr></tbody></table>

### Layout Settings

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2FnoXrxwCmUmo2lqflqVIR%2FBildschirmfoto%202024-10-07%20um%2020.09.37.png?alt=media&amp;token=d08ea73c-1e62-485d-83a4-b1b4d49378a3" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="248">Function</th><th>Description</th></tr></thead><tbody><tr><td>Background Image (1)</td><td>Instead of a color, a background image can also be set here</td></tr><tr><td>Structure Settings (2)</td><td>The width and padding can be defined here for the entire element.</td></tr><tr><td>Color Settings (3)</td><td>Ensure a high contrast display so that content is easily readable</td></tr><tr><td>Alignment (4)</td><td>The vertical and horizontal alignment of the content</td></tr></tbody></table>

### Mobile Settings

{% content-ref url="/pages/ZJ9dlvURdA2KvrRvb6W0" %}
[Font size](/cms-bundle/en/elemente/konfigurationsbausteine/schriftgrosse.md)
{% endcontent-ref %}

### SEO Settings

{% content-ref url="/pages/LHlzFdFr8hVLrftTJKPh" %}
[SEO](/cms-bundle/en/elemente/konfigurationsbausteine/seo.md)
{% endcontent-ref %}