# Announcement bar section

The **Announcement Bar** is a customizable, attention-grabbing strip typically placed at the top of the site to highlight promotional messages, shipping notices, or any key updates.

<figure><img src="https://891064830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz8oqtXqtdhOM4CxRzekr%2Fuploads%2FXQ5uKGLL30EkBJZUmmUz%2Fannouncement-bar.gif?alt=media&#x26;token=fb96ef3a-0c4e-46d6-ba44-65cd9f6a1e9f" alt=""><figcaption></figcaption></figure>

This section is highly configurable to ensure you can match the brand style, audience device, or display behavior as needed.

<table><thead><tr><th width="217.532958984375">Settings</th><th width="176.91845703125" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td><p>Controls the container width.Optional: <code>Full width</code>, <code>Full width padded</code>, or <code>Page width</code>.</p><p><code>Full width</code> is best for transparent headers.</p></td></tr><tr><td>Layout</td><td align="center"><code>select</code></td><td>Choose between <code>Slider</code> or <code>Marquee</code> styles.</td></tr><tr><td>Show top border</td><td align="center"><code>checkbox</code></td><td>Adds a top border to the bar.</td></tr><tr><td>Show bottom border</td><td align="center"><code>checkbox</code></td><td>Adds a bottom border to the bar.</td></tr><tr><td>Padding</td><td align="center"><code>range</code></td><td>Adjusts internal spacing.</td></tr><tr><td><strong>Slider</strong></td><td align="center"></td><td></td></tr><tr><td>Autoplay speed</td><td align="center"><code>range</code></td><td>Time between auto scrolls in slider layout.</td></tr><tr><td>Show arrows</td><td align="center"><code>checkbox</code></td><td>Show navigation arrows in slider mode.</td></tr><tr><td><strong>Marquee</strong></td><td align="center"></td><td></td></tr><tr><td>Autoplay speed</td><td align="center"><code>range</code></td><td>Speed at which marquee content scrolls.</td></tr><tr><td>Text direction</td><td align="center"><code>select</code></td><td>Choose scrolling direction: <code>Left to right</code> or <code>Right to left</code>.</td></tr><tr><td><strong>Text</strong></td><td align="center"></td><td></td></tr><tr><td>Uppercase text</td><td align="center"><code>checkbox</code></td><td>Converts text to uppercase.</td></tr><tr><td>Font</td><td align="center"><code>font_picker</code></td><td>Select a font for the announcement text.</td></tr><tr><td>Size</td><td align="center"><code>range</code></td><td>Controls the font size as a percentage.</td></tr><tr><td>Letter spacing</td><td align="center"><code>range</code></td><td>Controls the space between characters.</td></tr><tr><td>Space between messages</td><td align="center"><code>range</code></td><td>Applies to marquee only - spacing between repeated messages.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Color scheme</td><td align="center"><code>color_scheme</code></td><td>Applies a predefined theme color scheme to the section.</td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Announcement text color.</td></tr><tr><td>Border</td><td align="center"><code>color</code></td><td>Color of the top/bottom border (if enabled).</td></tr><tr><td><strong>Image</strong></td><td align="center"></td><td></td></tr><tr><td>Background image</td><td align="center"><code>image_picker</code></td><td>Optional image behind the announcement content.</td></tr></tbody></table>