SR Hero 02



SR Hero 02 is great for Homepages

Module Overview - SR Hero 02

This module is a combination of headers, subheaders, buttons, and image/video backgrounds

An ideal use case for SR Hero 02 would be on your Homepages







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 02, 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 02 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

1. Sprocket Rocket Modules Page- You can see the module used live!
2. TAI's homepage- The ideal use for Hero 02 module is on your homepages, to show great visuals/graphics along with some cards to show more details