1. Knowledge Base
  2. Sprocket Rocket Modules

SR Two Col 03 & 04

SR Two Col 03 & 04 are perfect modules for combining text with a compelling image, GIF, or video that supports.

Module Overview - SR Two Col 03 & SR Two Col 04

These two modules feature a combination of headers, body text, visuals, and optional CTAs. 

SR Two Col 03 & 04 can be used in combination with each other to create a left-right visual pattern, or two break up text-heavy pages with impactful visuals. 

An ideal use case for SR Two Col 03 & 04 is for product pages. The supporting visuals can be used to show a specific feature or process with the corresponding text to go with it.

Module Settings Walkthrough

Design SettingsSR-design settings

  • ID
  • Class
  • Layout: page or full-width
  • Container Width
    • Minimum
    • Narrow
    • Wide
    • Maximum
  • Top Bottom Padding:
    • Use default values
    • No padding
    • Small padding
    • Large padding
    • Custom padding
  • Border Top & Border Bottom (checkboxes)
  • Background Option
    • Color: primary, secondary, tertiary, white, black, dark, light, success, info, warning, danger, none
    • Image: upload or select an image
    • Custom: enter a HEX value and choose the opacity level.
    • Gradient: enter HEX values for a "from" and "to" color.

Module Settings

For SR Two Col 03 & 04, most settings are focused on the header(s), visuals, text, and CTA. Watch the quick video below to get the full rundown.

HubSpot Video

How to Use SR Two Col 03 & 04 - Live Examples

Arcuity's homepage - the cool thing here is the use of the short looped MP4s as the visuals opposite of the text.

Capsim's What We Do page - SR Two Col 03 & 04 create a left-right-left pattern showcasing aspects of the product and accompanying text.

Qualio's Medical Device Solutions page - this is an ideal example of using the two-column layout with great product visuals and corresponding copy to show and tell visitors about your product.