> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://docs.staylive.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Announcement banner

A component which is used to display a banner where you can add text, images and buttons. 

The banner has its own component in the CMS _(images/video - announcement banner)_ and can be placed anywhere on the page. 

### Example of usage:
* Display different items, such as logos and text to highlight your sponsors/partners or any other information.

![Example: Header banner with content in all three sections](https://storage.crisp.chat/users/helpdesk/website/acbaf8a9e186c000/skarmavbild-2024-05-28-kl-1443_11bimez.png)

![Example: Banner with middle content between a box navigation and an information section](https://storage.crisp.chat/users/helpdesk/website/acbaf8a9e186c000/skarmavbild-2024-05-31-kl-0940_1yo1xr8.png)

![Example: Content to the left and right](https://storage.crisp.chat/users/helpdesk/website/acbaf8a9e186c000/skarmavbild-2024-05-28-kl-1441_1swlrk7.png)

###### Flexibility
The items can be placed in three sections (right, middle, left) and all items are optional to add. Meaning you can choose to display only a logo in the middle and nothing to the right or left. Or choose to have only a text to the left for example.

* Both logos and buttons can be linked to either a subpage of your platform or a external website.
* You are able to change the look of the banner by using tailwind classes and adjusting the colors, height, styling of text and buttons etc.
* By default, the announcement banner **won't be visible in the mobile.**

###### Header announcement banner
You are also able to place the announcement banner above the top menu (header). 

* The banner will be added to all pages on the platform.
* The placement is static and will be placed over the header menu.
* **It will not follow the page when you scroll. ** 
* To add a announcement banner in the header you do so from the header editor in the CMS. 

### How to create an announcement banner
* Enable the component either on a subpage or in the header section
* Select where you would like to add your items.

![Manage content](https://storage.crisp.chat/users/helpdesk/website/acbaf8a9e186c000/skarmavbild-2024-05-31-kl-0900_9nv1v5.png)

* Select what type of content you would like to add. An image, text or a button. You are able to select multiple items in the same section. 

![Add content](https://storage.crisp.chat/users/helpdesk/website/acbaf8a9e186c000/skarmavbild-2024-05-31-kl-0900_ki2i8w.png)
* Once you are finished with your settings. Press **Save and Close**. You will get a preview of your banner.
* In the _styling tab_ you are able to change the look of your banner by using tailwind classes,
* When you are happy with your changes press **Publish.**


| **Learn more about our other sponsor components [here](https://docs.staylive.io/en/category/sponsor-placement-14d0dwy/).**