ModulesOffers

SR Offer Bar 06

This module renders a single-row offer bar with a small bling image, one heading, a rich text description, and one CTA button placed in a narrow right column, using a configurable left/right column split (default 9/3) with adjustable vertical alignment.

Preview of SR Offer Bar 06

Pick it over the other offer bars when you want a slim horizontal strip with the CTA visually separated to the right rather than stacked, centered, or paired with a form, stats, countdown, or decorative rings. It does not include a background image, timer, or embedded form, so use a sibling module if those are needed.

Use cases

  • Slim promo strip with cta
  • Thin banner offer row
  • Download kit teaser bar
  • Newsletter signup strip with button
  • Limited-time discount bar
  • Webinar promo bar

Where it fits

  • Included with: Free
  • Page sections: CTA, Content, Hero

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 0.

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: None, 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: None, 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.1.1Column breakpoint fix
2.1.0Added responsive background options
2.0.2Added new Link options
2.0.1Added column options