> For the complete documentation index, see [llms.txt](https://kitisummus.gitbook.io/molla/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kitisummus.gitbook.io/molla/default-section/header-+-announcement/announcement.md).

# Announcement Bar

## 1 - Add bar

![](/files/-MLRsT0JBpxyUT2cbx9u)

![](/files/-MLRsfJ8GW0JgrflEUxN)

{% hint style="info" %}
If you add 2 or more content it will switch to a slider.
{% endhint %}

### 1.1 - Sticky

Displayed on sticky header

### 1.2 - Space settings

{% content-ref url="/pages/-MLReMqDglQWdkNrTfLz" %}
[Space settings](/molla/things-to-know/space-settings.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MLRoy1tWzBLN7n6jgHk" %}
[Responsive (Swiper slide)](/molla/things-to-know/responsive-swiper-slide.md)
{% endcontent-ref %}

## 2 - Example

### Ex 1:

![](/files/-MYNeT0P_gjy3qr24_7F)

```
<div class="d-flex justify-content-center align-items-center">
    <p class="pr-2">Summer Sale Extra <strong>25% OFF</strong> with code <strong>SM2018A</strong></p>
    <a href="#" class="btn btn-minwidth-auto btn-rounded btn-outline-white" style="line-height: 1.25;">SHOP NOW</a>
</div>
```

### Ex 2:

![](/files/-MYNkDHhWB08h99h9SuJ)

```
<div class="d-flex justify-content-center align-items-center">
    <p class="pr-2">Summer Sale Extra <strong>25% OFF</strong> with code <strong>SM2018A</strong></p>
    <div class="pr-2">
        <div class="kt_countdown style02" data-time="2021/10/26 12:00:00"></div>
    </div>
    <a href="#" class="btn btn-minwidth-auto btn-rounded btn-outline-white" style="line-height: 1.25;padding: 0.35rem 1rem;">SHOP NOW</a>
</div>
```

With css custom:

```
.announcement-item .kt_countdown.style02 {
    background-color: #fff;
    border-radius: .3rem;
    padding: 0 1rem;
}
.announcement-item .kt_countdown.style02 span.flip-top {
    font-size: 1.4rem;
}
```

>