# HubSpot Scrolling Content Banner Module

Available on the HubSpot Marketplace

#tickertape #marquee #scrollingtext

[Download](https://ecosystem.hubspot.com/marketplace/modules/scrolling-content-banner-module-by-stephanie-o-gay-garcia)

[Documentation](/content/documentation/scrolling-content-banner/index.html)

The HubSpot Scrolling Content Banner Module

### Features:

- Can be used on any HubSpot website.  Automatically adapts to the styling of any HubSpot Theme you're using, whether it's from the Marketplace or custom built.
- Highly Customizable. Don't like the default styling? Customize it! [Read below](/content/demo/scrolling-content-banner#customization/index.html) for more details on all the customization options available.

## Module Live Demo

The Scrolling Content Banner module can be added to any HubSpot theme and will automatically adapt to your website's styling. Below is a live example of what the module first looks like when added to this particular theme.

Note that, to get the edge-to-edge effect, you'll want to drag it into a new section, set it to "Full Width" and remove any left and right spacing.

[Scroll down to see what it looks like when customized!](/content/demo/scrolling-content-banner#customizations/index.html)

- [**Add some content here**](https://www.website.com/)
- [**And a little more content...**](https://www.website.com/)
- [**And perhaps even more!**](https://www.website.com/)

## Endless Configurations

With endless configuration options, you can use the Event Cards module to make all sorts of layouts. Check out some live examples below.

## Logo Banners

The example below consists of two separate modules which swap out the text for images, remove the separator, set a background colour, corner radius and spacing on each item and adjust the animation speed. On the second module, the animation direction is adjusted as well.

-

- 
- 
- 
- 
-

-

- 
- 
- 
- 
-

-

- 
- 
- 
- 
-

## Text Banners

The example below consists of three separate modules which use text, remove the separator, add spacing and a border to the banner and adjust the animation speed and direction.

- [MARKETING*](https://www.website.com/)
- [MARKETING*](https://www.website.com/)
- [MARKETING*](https://www.website.com/)
- [MARKETING*](https://www.website.com/)
- [MARKETING*](https://www.website.com/)
- [MARKETING*](https://www.website.com/)
- [MARKETING*](https://www.website.com/)
- [MARKETING*](https://www.website.com/)
- [MARKETING*](https://www.website.com/)
- [MARKETING*](https://www.website.com/)

- [SALES*](https://www.website.com/)
- [SALES*](https://www.website.com/)
- [SALES*](https://www.website.com/)
- [SALES*](https://www.website.com/)
- [SALES*](https://www.website.com/)
- [SALES*](https://www.website.com/)
- [SALES*](https://www.website.com/)
- [SALES*](https://www.website.com/)
- [SALES*](https://www.website.com/)

## Skewed Banners

The example below uses a custom image separator, adds a background colour and spacing to the banner, colour and spacing between items and skews it slightly.

- [**Check out our latest collaboration**](https://www.website.com/)
- 
- [**Check out our latest collaboration**](https://www.website.com/)
-

## Image Gallery Banners

The example below replaces text with images and removes the separator.

- 
- 
- 
- 
- 
- 
- 
-

## Configuration Options

Below is a list of all the customization options available for the Scrolling Content Banner module.

Content:

- **Items**(repeater, add as many as you need!)
  - Content (rich text)
  - Link (link)
- **Separator**
  - Type (choice) - Choose between Icon, Image, Text or None
  - Icon (icon)
  - Height (number)
  - Image (image)
  - Text (text)
- **Advanced**
  - Custom CSS Class
  - Custom CSS

Styles:

- **Banner**
  - Border
    - Border
  - Background
    - Color
  - Spacing
    - Spacing
  - Transform
    - Skew
- **Items**
  - Background
    - Color
  - Border
    - Border
  - Corner
    - Radius
  - Spacing
    - Spacing
    - Spacing Between Items
  - Text
    - Font
    - Color (On Hover)
- **Separator**
  - Fill
    - Color
  - Text
    - Font
  - Spacing
    - Spacing
- **Animation**
  - Pause on Hover
  - Speed
  - Direction