SR Hero 03



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.



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)







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



1. Sprocket Rocket Modules Page- You can see the module used live!