# Announcement scroller

{% columns %}
{% column width="58.333333333333336%" %}
The **Announcement scroller** shows scrolling messages with icons, buttons, and images. Let customers know about current promotions, new products, or other need-to-know updates with links to more info.
{% endcolumn %}

{% column %}
{% hint style="info" %}
**Announcement blocks**

[Icon, text, and button](#icon-text-and-button)

[Alert, text, and button](#alert-text-and-button)

[Stacked text](#stacked-text)

[Icon](#icon-2)

[Image](#image)

[Button](#button-2)
{% endhint %}
{% endcolumn %}
{% endcolumns %}

<h2 align="center"></h2>

<h2 align="center">Announcement blocks</h2>

***

Click the arrow next to the section, then click **(+) Add block**. Select one of six types of announcements.&#x20;

<sub><mark style="color:$info;">Click an announcement block to add content<mark style="color:$info;"></sub>

<details>

<summary><strong>Icon text and button</strong></summary>

Display an icon, text, and button inline.

#### Text and layout

<table data-header-hidden><thead><tr><th width="239.95196533203125" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Text</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Text size</mark></td><td valign="top"><mark style="color:$info;">1 - 4</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Horizontal space between text and button</mark></td><td valign="top"><mark style="color:$info;">1 - 5</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Button position</mark></td><td valign="top"><mark style="color:$info;">Inline</mark><br><mark style="color:$info;">Below</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile button position</mark></td><td valign="top"><mark style="color:$info;">Inline</mark><br><mark style="color:$info;">Below</mark></td></tr></tbody></table>

#### Icon

<table data-header-hidden><thead><tr><th width="240.1007080078125" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Icon</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Use custom icon</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td valign="top"><mark style="color:blue;">Custom icon</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Icon size</mark></td><td valign="top"><mark style="color:$info;">S</mark><br><mark style="color:$info;">M</mark><br><mark style="color:$info;">L</mark><br><mark style="color:$info;">XL</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Icon frame</mark></td><td valign="top"><mark style="color:$info;">None</mark><br><mark style="color:$info;">Circle</mark><br><mark style="color:$info;">Square</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Color scheme</mark></td><td valign="top"><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Text</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Color scheme 1</mark><br><mark style="color:$info;">Color scheme 2</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Overlay soft</mark></td></tr></tbody></table>

#### Button

<table data-header-hidden><thead><tr><th width="240.48797607421875" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Link</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Label</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Size</mark></td><td valign="top"><mark style="color:$info;">XS</mark><br><mark style="color:$info;">S</mark><br><mark style="color:$info;">M</mark><br><mark style="color:$info;">L</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Style</mark></td><td valign="top"><mark style="color:$info;">Solid</mark><br><mark style="color:$info;">Outline</mark><br><mark style="color:$info;">Text</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Color scheme</mark></td><td valign="top"><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Text</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Color scheme 1</mark><br><mark style="color:$info;">Color scheme 2</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Overlay soft</mark></td></tr></tbody></table>

</details>

<details>

<summary><strong>Alert text and button</strong></summary>

Display a flashing alert icon, text, and button inline.

#### Text and layout

<table data-header-hidden><thead><tr><th width="240.38623046875" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Text</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Text size</mark></td><td valign="top"><mark style="color:$info;">1 - 4</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Space between text and button</mark></td><td valign="top"><mark style="color:$info;">1 - 5</mark></td></tr></tbody></table>

#### Button

<table data-header-hidden><thead><tr><th width="239.54400634765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Link</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Label</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Size</mark></td><td valign="top"><mark style="color:$info;">XS</mark><br><mark style="color:$info;">S</mark><br><mark style="color:$info;">M</mark><br><mark style="color:$info;">L</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Style</mark></td><td valign="top"><mark style="color:$info;">Solid</mark><br><mark style="color:$info;">Outline</mark><br><mark style="color:$info;">Text</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Color scheme</mark></td><td valign="top"><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Text</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Color scheme 1</mark><br><mark style="color:$info;">Color scheme 2</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Overlay soft</mark></td></tr></tbody></table>

#### Alert icon

<table data-header-hidden><thead><tr><th width="240.1796875" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Alert color</mark></td><td valign="top"></td></tr></tbody></table>

</details>

<details>

<summary><strong>Stacked text</strong></summary>

Display two announcements in a stacked column.

<table data-header-hidden><thead><tr><th width="240.2890625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Space between announcements</mark></td><td valign="top"><mark style="color:$info;">1 - 5</mark></td></tr><tr><td valign="top"><mark style="color:$info;">Announcement 1</mark> <mark style="color:blue;">Text</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:$info;">Announcement 1</mark> <mark style="color:blue;">Text size</mark></td><td valign="top"><mark style="color:$info;">1 - 4</mark></td></tr><tr><td valign="top"><mark style="color:$info;">Announcement 2</mark> <mark style="color:blue;">Text</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:$info;">Announcement 2</mark> <mark style="color:blue;">Text size</mark></td><td valign="top"><mark style="color:$info;">1 - 4</mark></td></tr></tbody></table>

#### Icon

<table data-header-hidden><thead><tr><th width="240.1007080078125" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Icon</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Use custom icon</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td valign="top"><mark style="color:blue;">Custom icon</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Icon size</mark></td><td valign="top"><mark style="color:$info;">S</mark><br><mark style="color:$info;">M</mark><br><mark style="color:$info;">L</mark><br><mark style="color:$info;">XL</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Icon frame</mark></td><td valign="top"><mark style="color:$info;">None</mark><br><mark style="color:$info;">Circle</mark><br><mark style="color:$info;">Square</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Color scheme</mark></td><td valign="top"><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Text</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Color scheme 1</mark><br><mark style="color:$info;">Color scheme 2</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Overlay soft</mark></td></tr></tbody></table>

</details>

<details>

<summary><strong>Icon</strong></summary>

<table data-header-hidden><thead><tr><th width="240.1007080078125" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Icon</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Use custom icon</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td valign="top"><mark style="color:blue;">Custom icon</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Icon size</mark></td><td valign="top"><mark style="color:$info;">S</mark><br><mark style="color:$info;">M</mark><br><mark style="color:$info;">L</mark><br><mark style="color:$info;">XL</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Icon frame</mark></td><td valign="top"><mark style="color:$info;">None</mark><br><mark style="color:$info;">Circle</mark><br><mark style="color:$info;">Square</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Color scheme</mark></td><td valign="top"><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Text</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Color scheme 1</mark><br><mark style="color:$info;">Color scheme 2</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Overlay soft</mark></td></tr></tbody></table>

</details>

<details>

<summary><strong>Image</strong></summary>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Image</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile image</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Image ratio</mark></td><td valign="top"><mark style="color:$info;">Portrait (2:3)</mark><br><mark style="color:$info;">Portrait (4:5)</mark><br><mark style="color:$info;">Square (1:1)</mark><br><mark style="color:$info;">Landscape (5:4)</mark><br><mark style="color:$info;">Landscape (4:5)</mark><br><mark style="color:$info;">Custom</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile image ratio</mark></td><td valign="top"><mark style="color:$info;">Portrait (2:3)</mark><br><mark style="color:$info;">Portrait (4:5)</mark><br><mark style="color:$info;">Square (1:1)</mark><br><mark style="color:$info;">Landscape (5:4)</mark><br><mark style="color:$info;">Landscape (4:5)</mark><br><mark style="color:$info;">Custom</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Corner radius</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td valign="top"><mark style="color:blue;">Apply circle crop to image</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td valign="top"><mark style="color:blue;">Image height</mark></td><td valign="top"><mark style="color:$info;">16 - 200</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile image height</mark></td><td valign="top"><mark style="color:$info;">16 - 200</mark></td></tr></tbody></table>

</details>

<details>

<summary><strong>Button</strong></summary>

<table data-header-hidden><thead><tr><th width="239.54400634765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Link</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Label</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Size</mark></td><td valign="top"><mark style="color:$info;">XS</mark><br><mark style="color:$info;">S</mark><br><mark style="color:$info;">M</mark><br><mark style="color:$info;">L</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Style</mark></td><td valign="top"><mark style="color:$info;">Solid</mark><br><mark style="color:$info;">Outline</mark><br><mark style="color:$info;">Text</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Color scheme</mark></td><td valign="top"><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Primary</mark><br><mark style="color:$info;">Secondary</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Overlay soft</mark></td></tr></tbody></table>

</details>

### <mark style="color:$primary;">Layout</mark>

You can increase or decrease the space between announcements, and choose to display announcement content at full width.

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.3984375" valign="top">Setting</th><th valign="top">Options</th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Gap</mark></td><td valign="top"><mark style="color:$info;">0 - 200 px</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile gap</mark></td><td valign="top"><mark style="color:$info;">0 - 200 px</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Full width</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td valign="top"><mark style="color:blue;">Vertical padding</mark></td><td valign="top"><mark style="color:$info;">0 - 27</mark></td></tr></tbody></table>

<h2 align="center">Scroll behaviour</h2>

***

In the section settings, change the **duration** (speed) and **direction** of scrolling.

* Use the **Scroll duration** slider to increase or decrease the number of seconds it takes for the content to scroll from beginning to end.
* Choose to scroll content towards the **Left** or **Right**.

<mark style="color:$info;">Click section to find settings</mark>

<table data-header-hidden><thead><tr><th width="240.36785888671875">Setting</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show on home page only</mark></td><td><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td><mark style="color:blue;">Scroll duration</mark></td><td><mark style="color:$info;">5 - 60 seconds</mark></td></tr><tr><td><mark style="color:blue;">Mobile scroll duration</mark></td><td><mark style="color:$info;">2 - 40 seconds</mark></td></tr><tr><td><mark style="color:blue;">Pause on hover</mark></td><td><ul class="contains-task-list"><li><input type="checkbox" checked></li></ul></td></tr><tr><td><mark style="color:blue;">Scroll direction</mark></td><td><mark style="color:$info;">Left</mark><br><mark style="color:$info;">Right</mark></td></tr></tbody></table>

<h2 align="center">Section styles</h2>

***

Customize general style options for the section and content area. Settings for **Content area** allow you to adjust the width, borders, and dropshadow of the container of the section content.

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<details>

<summary>Content area</summary>

<table data-header-hidden><thead><tr><th width="240.36785888671875">Setting</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Width</mark></td><td><mark style="color:$info;">Full width</mark><br><mark style="color:$info;">Full width padded</mark><br><mark style="color:$info;">Page width</mark></td></tr><tr><td><mark style="color:blue;">Full width on mobile</mark></td><td><mark style="color:$info;">Available for <strong>Full width padded</strong> option.</mark></td></tr><tr><td><mark style="color:blue;">Set content to page width</mark></td><td><ul class="contains-task-list"><li><input type="checkbox" checked></li></ul></td></tr><tr><td><a data-footnote-ref href="#user-content-fn-1"><mark style="color:blue;">Border</mark></a></td><td><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td><a data-footnote-ref href="#user-content-fn-1"><mark style="color:blue;">Corner radius</mark></a></td><td><mark style="color:$info;">Available for <strong>Full width padded</strong> and <strong>Page width</strong> options.</mark></td></tr><tr><td><a data-footnote-ref href="#user-content-fn-1"><mark style="color:blue;">Dropshadow</mark></a></td><td><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr></tbody></table>

</details>

<details>

<summary>Section</summary>

<table data-header-hidden><thead><tr><th width="240.36785888671875">Setting</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Top padding</mark></td><td><mark style="color:$info;">0 - 27</mark></td></tr><tr><td><mark style="color:blue;">Bottom padding</mark></td><td><mark style="color:$info;">0 - 27</mark></td></tr><tr><td><mark style="color:blue;">Dividers</mark></td><td><mark style="color:$info;">None</mark><br><mark style="color:$info;">Top only</mark><br><mark style="color:$info;">Bottom only</mark><br><mark style="color:$info;">Both</mark></td></tr><tr><td><mark style="color:blue;">Force dividers full width</mark></td><td><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td><mark style="color:blue;">Color scheme</mark></td><td><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Inverse</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Accent</mark><br><mark style="color:$info;">Accent inverse</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Color scheme 1</mark><br><mark style="color:$info;">Color scheme 2</mark></td></tr><tr><td><mark style="color:blue;">Anchor ID</mark></td><td>Link directly to the section on any page. <a href="../anchor-id">Learn more</a></td></tr></tbody></table>

</details>

[^1]: Modify in [Global styles > Borders and styles > Large elements](https://help.fluorescent.co/section-studio/global-styles/borders-and-styles#large-elements)