# Announcement Bar

## 1 - Add bar

![](https://1592055530-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLM_O6jG_2F5SzhLVjb%2F-MLRrRAJbYpkKDRMkO4t%2F-MLRsT0JBpxyUT2cbx9u%2FScreenshot_29.jpg?alt=media\&token=8b195941-f61d-45e7-9d0d-aae095a9ca26)

![](https://1592055530-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLM_O6jG_2F5SzhLVjb%2F-MLRrRAJbYpkKDRMkO4t%2F-MLRsfJ8GW0JgrflEUxN%2FScreenshot_30.jpg?alt=media\&token=d87d2c72-5009-4604-9196-feb8a226da23)

{% 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="../../things-to-know/space-settings" %}
[space-settings](https://kitisummus.gitbook.io/molla/things-to-know/space-settings)
{% endcontent-ref %}

{% content-ref url="../../things-to-know/responsive-swiper-slide" %}
[responsive-swiper-slide](https://kitisummus.gitbook.io/molla/things-to-know/responsive-swiper-slide)
{% endcontent-ref %}

## 2 - Example

### Ex 1:

![](https://1592055530-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLM_O6jG_2F5SzhLVjb%2F-MYNdXjB436-fNGkv4_s%2F-MYNeT0P_gjy3qr24_7F%2FScreenshot_283.jpg?alt=media\&token=1a985193-48f8-4663-9230-824fbb45160b)

```
<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:

![](https://1592055530-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLM_O6jG_2F5SzhLVjb%2F-MYNeeC5L2Evnk1x6fcb%2F-MYNkDHhWB08h99h9SuJ%2FScreenshot_284.jpg?alt=media\&token=cbfad454-b7ee-4948-8a24-f5fadd56b1b2)

```
<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;
}
```

>