SR Hero 03
SR Hero 03 is great for Homepages
Module Overview - SR Hero 03
Available on:
This module is a combination of headers, subheaders, buttons, and image/video backgrounds
An ideal use case for SR Hero 03 would be on your Homepages, where you want to show some images on a small slider alongside your headers/text.

Module Settings Walkthrough
Styles
You can edit the following items within the Styles tab:
- Layout: page or full-width
- Container width: minimum, narrow, wide, maximum
- Top-bottom padding: default, no padding, small padding, large padding, custom padding
- Background option: image, video, color, custom, gradient
- Text align: right, left, center, justified
- Text color: auto, primary, secondary, tertiary, white, black, dark, light, success, info, warning, danger, custom
- Border styles: none, solid, dotted, dashed, double
- Responsive settings:
- Tablet: text-align at breakpoint (same text-align options); top-bottom padding at breakpoint (same padding options)
- Mobile: text-align at breakpoint (same text-align options); top-bottom padding at breakpoint (same padding options)

Module Settings
For SR Hero 03, most settings are focused on the header(s), subheaders, buttons, Slides, Features, and Columns.
Header and Content
The first setting you see when editing SR Hero 03 is the header.
You can have as many headers as you want. You can even choose which Size they are: H1, H2, H3, H4, H5, H6, P.
You can also choose the Display Size to L, XL, XXL, XXXL
You also have an option to create a sub-header or description

CTA Buttons
You can add as many CTA Buttons as you want.
You can edit the following:
CTA Type: Hubspot CTA, button, or modal. in most instances, we use button.
CTA Style: Primary, Secondary, Tertiary, White, Black, Dark, Light, Success, Info, Warning, Danger, Outline Primary, Outline Secondary, Outline Tertiary, Outline White, Outline Black, Outline Dark, Outline Light, Outline Success, Outline Info, Outline Warning, Outline Danger, Custom, None.
CTA Size: Small, Default, Large
Add Icon Option: Position: Left or Right

Slides
You can add as many Slides as you want.
You can edit the following:
- Slides:
- Image: Replace or Remove
- Size: Automatically Adjust or Exact width and height
- Image Loading: Browser default, Lazy or Eager
- Slider Options:
- Autoplay Speed
- Dot Navigation
- Dot Color

Features
You can add as many features as you want.
You can edit the following:
- Design Settings:
- Position: In Hero, Under Hero, Overlap Hero
- Columns: 1, 2, 3 or 4
- Text Color
- Background Option: Image, Color, or Custom
- Text Align: Auto, Left, Center, or Right
- Features:
- Image: Replace or Remove
- Size: Automatically Adjust or Exact width and height
- Image Loading: Browser default, Lazy or Eager
- Content

Column Settings
These are the settings that will allow you to customize your column width and appearance.
You can edit the following:
- Content Column Width
- Slider Column Width
- Column Order: Content/Slider or Slider/Content
- Column Order on Mobile: Content/Slider or Slider/Content
Height
You can also change the height of the module to: Small, Medium, Large, or Full

How to Use SR Hero 02 - See it Live