ModulesColumns

SR One Col 02

Renders a single centered card with an optional icon, one heading, a rich text description with an optional lead-text style, and one call-to-action button or link.

Preview of SR One Col 02

The card has its own background, border, radius, and shadow settings, which makes it read as a distinct boxed element rather than plain page copy, so pick it over SR One Col 01 when you want the text and CTA to sit inside a visually separated card. Expect one short block of text plus a single action, not a gallery or multiple visuals.

Use cases

  • Boxed callout with button
  • Single feature highlight card
  • Announcement banner with cta
  • Short pitch with icon and button
  • Standalone promo card

Where it fits

  • Included with: PRO
  • Page sections: Cta, Content, Features

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.
IconImage
DescriptionRich text
Lead TextBooleanTurn on to make the Description text larger.

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.

Style tab

Change log

VersionChange
2.1.0Added responsive background options
2.0.1Added new Link options