# Announcement Bar

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FKnailwEm62UXNs8Zw3sD%2Fheader_07.jpg?alt=media&#x26;token=159a642c-6581-4d98-a188-b9f55ad86a1f" alt=""><figcaption></figcaption></figure>

**Location:** `Header → Header Sections → Announcement Bar`

***

## Announcement Bar **— Options Overview**

| **Option Group**    | **Setting**                     | **Available Values**                | **Description**                                                                                                                                 |
| ------------------- | ------------------------------- | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| **Layout**          | **Top spacing**                 | None, Small                         | Controls the spacing above the section.                                                                                                         |
|                     | **Width**                       | Default, Boxed, Wide                | Defines the section’s width layout. The **Wide** option applies to screens **1440px and wider**.                                                |
| **Announcement**    | **Align text relative to icon** | Top, Center                         | Sets the vertical alignment of text in relation to the icon. *Works only on the home page.*                                                     |
| **Slider Settings** | **Desktop navigation**          | Disable, Arrows                     | Defines navigation type for desktop view.                                                                                                       |
|                     | **Mobile navigation**           | Disable, Arrows                     | Defines navigation type for mobile view.                                                                                                        |
|                     | **Enable autoplay**             | —                                   | Enables automatic slide rotation.                                                                                                               |
|                     | **Change slides every**         | 2–40 sec                            | Sets the duration between slides. *Note: Does not function in the theme editor. You can manually switch slides using arrows while configuring.* |
| **Dividing Line**   | **Show top line**               | —                                   | Displays a dividing line above the section.                                                                                                     |
|                     | **Show bottom line**            | —                                   | Displays a dividing line below the section.                                                                                                     |
| **Background**      | **Background**                  | Hide, Color, Gradient, Image        | Defines the background type for the section.                                                                                                    |
|                     | **Color Width**                 | Fullwidth, Content width, Fullwidth | Specifies how the background color spans across the layout.                                                                                     |
|                     | **Vertical internal padding**   | 10–100 px                           | Adjusts internal vertical spacing (in pixels).                                                                                                  |
| **Colors**          | **Lines**                       | —                                   | Sets the color of dividing lines.                                                                                                               |
|                     | **Announcement**                | —                                   | Controls the text color of announcements.                                                                                                       |
|                     | **Description**                 | —                                   | Sets the color of the description text.                                                                                                         |
|                     | **Description link hover**      | —                                   | Defines the hover color for links in the description.                                                                                           |
|                     | **Icon**                        | —                                   | Sets the icon color within announcements.                                                                                                       |
|                     | **Media button**                | —                                   | Defines the color of media or interactive buttons.                                                                                              |
|                     | **Slider arrows**               | —                                   | Sets the color of the slider navigation arrows.                                                                                                 |

The **Announcement Bar** section can include multiple **Announcement** sub-blocks. You can add as many announcements as needed, and they will automatically rotate in a **slider format**.

## **Announcement Subblock Settings:**

| **Option Group** | **Setting**          | **Available Values** | **Description**                                                          |
| ---------------- | -------------------- | -------------------- | ------------------------------------------------------------------------ |
| **Announcement** | **Show icon**        | Preset icon, None    | Enables or disables the display of a preset icon before the text.        |
|                  | **Preset icon name** | —                    | Selects the specific icon to display from the available preset icon set. |
|                  | **Text**             | —                    | Defines the announcement message displayed in the section.               |
