> For the complete documentation index, see [llms.txt](https://docs.samita.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.samita.io/samita-countdown-timer-bar/banners/content.md).
# Bar content and elements
The six elements a bar can hold, how to order them, and how groups make one banner say two things.
The **Content** panel is the first icon in the builder's rail. It holds everything the bar says.
Elements run left to right in the bar, in the order they sit in this list.
## Adding and ordering
* **Add element** opens a menu of the six kinds. The new one lands at the end of the list.
* **Drag the handle** at the left of a row to move it. The bar follows the order here.
* **Hover a row** for the duplicate and delete buttons.
* **Click a row** to open its settings in the column on the right.
## The six elements
### Text
The message. Set the words, the size, bold, italic, underline, and a colour of its own.
Leave the colour empty and the text follows the bar's own text colour, so restyling the bar carries the message with it.
### Countdown
A live timer inside the bar. It has three modes:
| Mode | What shoppers see |
| ----------------------------- | -------------------------------------------------- |
| **Count down to a date** | Everyone sees the same time remaining |
| **Fixed minutes per visitor** | Each shopper gets their own clock when they arrive |
| **Daily recurring** | Runs on chosen weekdays between two times |
You also choose which units show (days, hours, minutes, seconds), whether the unit captions show under the numbers, and what the captions say. Leave a caption blank to use the English default.
**When the timer ends** decides what happens at zero: hide the banner, keep it at zero, or restart it.
{% hint style="info" %}
A countdown element's timer is not the same as the banner's [schedule](/samita-countdown-timer-bar/banners/placement.md). The timer counts down *inside* the bar; the schedule decides whether the bar is on the storefront at all.
{% endhint %}
### Button
A label plus an action:
| On click | What it does |
| ------------------------- | ---------------------------------------------------- |
| **Open a link** | Sends the shopper to a URL |
| **Scroll to a section** | Jumps to a part of the current page, by CSS selector |
| **Apply a discount code** | Applies the code to the shopper's cart |
For a link you can also turn on **Open in a new tab**, which leaves your shop open behind it.
The rest is styling: shape (square, rounded, pill), font size, size preset, bold/italic/underline, background, label colour, and a border.
{% hint style="warning" %}
A button set to **Open a link** must have a URL before an Active banner will save. The app says so under the field.
{% endhint %}
### Discount code
The code itself, shown in a dashed outline. Turn on **Copy on click** and the shopper copies it by clicking it — no selecting and no typing.
Style it with a border style, corner radius, and its own colour.
### Image
A logo or badge. Paste a URL, or upload a file and the field fills itself in. Set the height and alt text.
Alt text is what screen readers announce and what shows if the image fails to load.
### Line break
Nothing to look at. Everything after it starts a new line, so a long bar can run in two rows instead of one squeezed one.
Drag it between two elements to split the bar where you want.
{% hint style="success" %}
A line break is most useful with **Show on** set to **Mobile only**. The bar then wraps onto two rows on a phone and stays on one line on a desktop.
{% endhint %}
## One element, two screens
Open any element except a line break and its **Style** section starts with **Device settings** — three icons: an eye, a desktop, and a phone.
Device settings sits at the top of Style, and everything below it follows the icon you pick.
**The eye** is the ordinary case: what you set applies to both screens.
**The desktop and phone icons** narrow the settings below them to that one screen. Pick the phone, drop the font size to 12, and only phones get 12 — desktops keep what the eye set. Everything in **Style** splits this way: font sizes, a countdown's number and label sizes, its colours and which units it shows, an image's height, a button's shape and size, a discount code's border and colour.
Picking a screen also reveals a **Hide on desktop** or **Hide on mobile** toggle. That's how you drop an element that doesn't fit a phone — a long sentence, an image — without building a second banner. It stays on the other screen.
{% hint style="info" %}
Switching back to the eye and changing a setting resets that one setting on both screens: any per-screen version of it is cleared. Settings you don't touch keep theirs.
{% endhint %}
A line break has no **Style** section, so it keeps a plain **Show on** control instead: **Both screens**, **Desktop only**, or **Mobile only**.
## Groups: one banner, two messages
Under the elements list is **Add group**.
One group is the ordinary case. Add a second and the bar cycles between them — the first group shows, then the second, then back again. Each group holds its own elements, so one banner can alternate between "Free shipping over $50" and "Sale ends tonight".
How fast they change, and whether they cross-fade or slide, is in [Animation and groups](/samita-countdown-timer-bar/banners/animation.md).
{% hint style="info" %}
Groups cycle; they don't stack. Only one group is on screen at a time.
{% endhint %}
## Next steps
* [Design a banner](/samita-countdown-timer-bar/banners/design.md)
* [Animation and groups](/samita-countdown-timer-bar/banners/animation.md)
* [Translate banner text](/samita-countdown-timer-bar/banners/translate.md)
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://docs.samita.io/samita-countdown-timer-bar/banners/content.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
