ModulesOffers

SR Offer Bar 02

This offer bar renders a two-column strip with an optional small bling image, one heading, a rich text description, and a single CTA button in the right column, using an 8/4 width split by default.

Preview of SR Offer Bar 02

Pick it over sr-offer-bar-03 and sr-offer-bar-06 when you want full control over both columns independently, since each side has its own breakpoint, width, offset, and order settings plus a shared vertical alignment control. It has no background image, countdown, stats, or form, so treat it as a slim adjustable promo row rather than a hero or lead-gen block.

Use cases

  • Slim promo strip with button
  • Newsletter signup teaser bar
  • Ebook download banner
  • Adjustable two-column offer row
  • Webinar reminder strip
  • Product launch nudge bar

Where it fits

  • Included with: PRO
  • Page sections: CTA, Content, Proof

Editable fields

Content tab

FieldTypeNotes
Background VideoFileRepeats: min 0, default 1. Add multiple file formats in order to provide compatibility with a broad range of browsers.
Background Video TabletFileRepeats: min 0, default 1. This background video will only be used on tablet devices.
Background Video MobileFileRepeats: min 0, default 1. This background video will only be used on mobile devices.
EnabledBoolean
IDTextAssign a ID to the module.
ClassTextAssign a CLASS to the module.
Offer ImageImage
DescriptionRich text
Lead TextBooleanTurn on to make the Description text larger.
Column Vertical AlignChoiceOptions: Top, Center, Bottom, Stretch.

Heading Repeats: min 0, default 1.

FieldTypeNotes
HeadingText
SizeChoiceHTML heading size. Options: H1, H2, H3, H4, H5, H6, P.
Display SizeChoiceSize that heading is displayed at. 12 options, including Auto, H1, H2.
ColorChoice15 options, including Auto, Primary, Secondary.
ColorColor
AlignChoiceOptions: Auto, Left, Center, Right.
CSS ClassText

CTA Repeats: min 0, default 1.

FieldTypeNotes
CTA TypeChoiceOptions: HubSpot CTA, HubSpot Payment, Button, Modal.
CTA StyleChoice26 options, including Primary, Secondary, Tertiary.
CTACTA
Button TextText
Modal TargetText
LinkLink
Payment linkPayment
Checkout behaviorChoiceOptions: Open in a new tab, Sliding overlay.
CTA SizeChoiceOptions: Small, Default, Large.
Add iconBoolean

CTA › Default

FieldTypeNotes
BackgroundColor
TextColor
BorderColor

CTA › Hover

FieldTypeNotes
BackgroundColor
TextColor
Border ColorColor

CTA › Icon

FieldTypeNotes
IconIcon
PositionChoiceOptions: Left, Right.
PurposeChoiceThe purpose of the icon, used for accessibility. If set to decorative, an additional attribute of aria-hidden="true" will be added to the icon. Options: Decorative, Semantic.

Columns › Content Repeats: min 1, max 4, default 1. Columns follow a twelve column grid.

FieldTypeNotes
Column BreakpointChoiceOptions: Mobile, Tablet, Desktop, XL.
Column WidthChoice12 options, including 1, 2, 3.
Column OffsetChoice13 options, including 0, 1, 2.
Column OrderNumber

Columns › Buttons Repeats: min 1, max 4, default 1. Columns follow a twelve column grid.

FieldTypeNotes
Column BreakpointChoiceOptions: Mobile, Tablet, Desktop, XL.
Column WidthChoice12 options, including 1, 2, 3.
Column OffsetChoice13 options, including 0, 1, 2.
Column OrderNumber

Style tab

Change log

VersionChange
3.0.0Stardust update
2.2.0Accessibility improvements
2.1.0Added responsive background options
2.0.2Added new Link options
2.0.1Added column options