# Announcement carousel {% columns %} {% column width="58.333333333333336%" %} The **Announcement carousel** shows rotating messages with icons and buttons. 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 %}

Announcement blocks

*** Click the arrow next to the section, then click **(+) Add block**. Select one of six types of announcements. _{Click an announcement block to add content}

Icon text and button

Display an icon, text, and button inline. #### Text and layout


Text
Text size	1 - 4
Horizontal space between text and button	1 - 5
Button position	Inline Below
Mobile button position	Inline Below

#### Icon


Icon
Use custom icon
Custom icon
Icon size	S M L XL
Icon frame	None Circle Square
Color scheme	Default Text Soft Color scheme 1 Color scheme 2 Overlay Overlay soft

#### Button


Link
Label
Size	XS S M L
Style	Solid Outline Text
Color scheme	Default Text Soft Color scheme 1 Color scheme 2 Overlay Overlay soft

Alert text and button

Display a flashing alert icon, text, and button inline. #### Text and layout


Text
Text size	1 - 4
Space between text and button	1 - 5

#### Button


Link
Label
Size	XS S M L
Style	Solid Outline Text
Color scheme	Default Text Soft Color scheme 1 Color scheme 2 Overlay Overlay soft

#### Alert icon


Alert color

Stacked text

Display two announcements in a stacked column.


Space between announcements	1 - 5
Announcement 1 Text
Announcement 1 Text size	1 - 4
Announcement 2 Text
Announcement 2 Text size	1 - 4

#### Icon


Icon
Use custom icon
Custom icon
Icon size	S M L XL
Icon frame	None Circle Square
Color scheme	Default Text Soft Color scheme 1 Color scheme 2 Overlay Overlay soft

Icon


Icon
Use custom icon
Custom icon
Icon size	S M L XL
Icon frame	None Circle Square
Color scheme	Default Text Soft Color scheme 1 Color scheme 2 Overlay Overlay soft

Image


Image
Mobile image
Image ratio	Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (4:5) Custom
Mobile image ratio	Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (4:5) Custom
Corner radius
Image height	16 - 200
Mobile image height	16 - 200

Button


Link
Label
Size	XS S M L
Style	Solid Outline Text
Color scheme	Default Primary Secondary Soft Overlay Overlay soft

### General _{Click section to find settings}

Setting	Options
Show on home page only
Auto-rotate announcements
Change every	3 - 15 seconds

### Layout _{Click section to find settings}

Setting	Options
Position	Left Center Right
Mobile position	Left Center Right
Max width	240 - 1440 px
Full width
Vertical padding	0 - 27

### Navigation icons _{Click section to find settings}


Pin icons to sides
Icon
Use custom icons
Icon button size	XS S M L
Icon button frame	None Circle Square
Color scheme	Default Primary Secondary Soft Overlay Overlay soft

Section styles

*** 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. _{Click section to find settings}

Content area

Setting	Options
Width	Full width Full width padded Page width
Full width on mobile	Available for Full width padded option.
Set content to page width
Border
Corner radius	Available for Full width padded and Page width options.
Dropshadow

Section

Setting	Options
Top padding	0 - 27
Bottom padding	0 - 27
Dividers	None Top only Bottom only Both
Force dividers full width
Color scheme	Default Inverse Soft Accent Accent inverse Overlay Color scheme 1 Color scheme 2
Anchor ID	Link directly to the section on any page. Learn more

[^1]: Modify in [Global styles > Borders and styles > Large elements](/section-studio/sections/global-styles/borders-and-styles.md#large-elements) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.fluorescent.co/section-studio/sections/sections-overview/announcement-carousel.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.