Docs / Multipurpose / Super Blox
The biggest, most flexible module in the theme. Build any section as 1-4 columns and drop in mixed content types per column: rich text, images, logo sliders, accordions, icon + text grids, forms, CTA buttons, social proof, blockquotes, and testimonials. Card wrap modes turn the section into a row of cards, a grid of cards, or even modal-triggered tiles.
The high-traffic decisions: column count, layout ratio, card wrap mode, heading display, and three performance toggles for opt-in JS features (accordion, logo slider, modal).
How many content columns the section renders. Each column is independently configured under /// Content (Column 1 through Column 4). Higher column counts only enable the matching column groups in the editor.
1 Single column (full width)2 Two columns (default)3 Three columns4 Four columnsWidth distribution between the two columns on a 12-column grid.
equal 6 / 6 (default)2-1 8 / 4 (wide left)1-2 4 / 8 (wide right)3-1 9 / 3 (very wide left)1-3 3 / 9 (very wide right)7-5 7 / 5 (slightly wide left)5-7 5 / 7 (slightly wide right)Width distribution between three columns on a 12-column grid.
equal 4 / 4 / 4 (default)2-1-1 6 / 3 / 3 (wide first column)1-2-1 3 / 6 / 3 (wide middle column)1-1-2 3 / 3 / 6 (wide last column)Controls how the section wraps its content in styled card containers. This is the master switch that determines which Style sub-groups appear:
none No card treatment. Items render directly in the row.row Wrap Row. The entire row is a single card. Activates /// Card Style under Style Settings.columns Wrap Columns (default). Each column is its own card. Activates per-column card style under /// Content.items Wrap Items. Each individual item inside a column is wrapped as a card.Note: Modal Style is hidden only when Card Wrap Mode is "None". The three card-wrapped modes all expose modal settings because items in a card can be modal-triggered.
Forces every column to match the height of the tallest column. Useful for visually balanced card grids; turn off if you want each card to fit its own content tightly.
Displays a heading block (badge h6, title h2, description p) above the columns. Defaults to off so the columns can render flush against the row above when no heading is needed.
Text alignment for the heading area on desktop (993px and above).
left Left-alignedcenter Centered (default)right Right-alignedHeading alignment on tablet and mobile (below 992px). Set independently from desktop so editors can center on phones while keeping desktop left-aligned.
Constrains the heading area to a max pixel width (0-1920px, 10px steps). Useful for keeping long descriptive paragraphs from spanning the full container width and getting hard to read.
Performance opt-in. Loads the accordion JavaScript file. Turn on only when this section actually uses an Accordion item type; keeping it off saves a network request on every other page.
Performance opt-in. Loads the logo slider JavaScript file. Turn on only when this section actually uses a Logo Slider item type.
Performance opt-in. Loads the modal popup JavaScript file. Turn on only when this section actually uses modal-triggered items.
IntersectionObserver-driven fade animation for the section heading block. Each option pairs a 30px slide with an opacity transition.
none No animation (default)bottom Fade Up (from bottom)top Fade Down (from top)left Fade from Leftright Fade from Rightfade Fade Only (no slide)Reduced motion: Visitors with prefers-reduced-motion: reduce see the heading fully rendered with no animation.
The section heading plus the four column groups. Each column has the same structure: top-level column controls, a repeater of mixed Items, the column's Fade-In animation, and its own per-column card style block. Column 1 is documented in full below; Columns 2, 3, and 4 expose an identical field set.
The badge + title + description block above the columns. Default markup is <h6> (rendered as a pill badge if Badge Style is enabled), <h2> for the title, and <p> for the description. Keep the h6 short (2-4 words) so the badge pill stays compact.
Column 1 is the canonical column group. Columns 2, 3, and 4 are structural duplicates with their own fields under the same names. Only the columns matching the Number of Columns count actually render on the page.
Vertical alignment of the column's content within its grid cell. Affects how items stack against the column's top, middle, or bottom edge when other columns are taller.
top Top (default)center Centerbottom BottomSets the column's display order on mobile (when columns stack). Lower numbers render first. Useful for putting the text column above the image column on phones even when the image is column 1 on desktop.
A repeater group that holds any mix of content blocks inside the column. Each item picks an Item Type and exposes only the fields relevant to that type. The repeater has no max; default occurrence is 1 item per column.
Picks what this item renders. Changing the type swaps which downstream fields are visible in the editor.
richtext Rich Text (default)image Imagelogo_slider Logo Slideraccordion Accordionicon_text Icon & Textdivider Dividerform Formcta_button CTA Buttonsocial_proof Social Proofblockquote Blockquotetestimonial TestimonialVertical space below the item, in px (2px steps). Use to add breathing room between stacked items inside the same column.
Horizontal alignment of the item's content (left/center/right) on desktop.
Horizontal alignment of the item's content on tablet and mobile (below 992px). Set independently from desktop so editors can recenter content on phones.
Vertical alignment of the testimonial content inside its container. Pairs with Match Column Heights to balance a row of testimonial cards visually.
Pushes this item to the bottom of the column. Useful when columns have different heights and you want a CTA or footer item to anchor to the column's lower edge regardless of how much copy sits above it.
Hides this single item on mobile devices. Useful for decorative items or long copy blocks that would crowd small screens.
The rich text body for this item. Supports headings, paragraphs, lists, links, and inline CTA classes (cta-primary, cta-secondary, cta-tertiary, cta-four, cta-five, cta-six).
The image asset for an Image item. Responsive sizing on by default; HubSpot file manager handles SRC + alt text.
Tip: Use a unique filename when replacing this image. HubSpot's CDN caches by URL, so overwriting can leave stale image references in browser caches.
Rounded corners on the item image (2px steps). 12px matches the theme's default tile rounding.
Adds a soft drop shadow under the item image.
The drop shadow's color + opacity. Stay under 15% opacity for subtle shadow; above that the image starts to feel heavy.
A repeater of logos that fuel the marquee. Each entry exposes:
logo_image Logo Image (responsive, uploaded asset)logo_link Logo Link (external URL or HubSpot content)Renders the logos in grayscale with color-on-hover, matching the standalone Logo Slider module's default treatment.
A repeater of expandable rows. Each entry exposes:
item_title Title (the clickable accordion header text)item_content Content (the rich text body that expands)Requires Use Accordion (under /// Start Here) to be turned on so the accordion JavaScript loads.
Pick how the accordion items render.
list List (Dividers) - thin horizontal lines between items (default)card Card (Boxed) - each item rendered as its own cardBackground color of each accordion card in Card style.
Corner rounding for each accordion card.
Vertical gap between accordion cards.
A repeater of icon + text pairs. Each entry exposes:
item_icon Icon (FontAwesome 6.4.2, default fa-bolt)item_content Content (rich text - typically an h4 + p pair)Layout direction for the icon + text pair.
stacked Stacked (icon above text)inline Inline (icon left of text, default)Pixel size of the icons inside the icon + text items.
Color of the horizontal divider line.
Stroke width of the divider line.
Line length as a percentage of the column width (5% steps).
Select a HubSpot form to embed inside the column. Defaults the response type to inline with a "Thanks for submitting the form." message. Supports both Forms v2 and v4.
Visual treatment for the form's submit button.
standard Standard (default)alt Alt (alternate styling)Horizontal alignment of the form's submit button.
Pick whether to render a theme-styled custom button or a HubSpot CTA.
custom Standard CTA (default; uses the primary/secondary label + link + style fields below)hubspot HubSpot CTA (uses the HubSpot CTA picker)Primary HubSpot CTA reference. Editors usually pick from the existing CTA library.
Optional second HubSpot CTA shown alongside the primary one.
Label for the primary custom CTA button.
Destination for the primary CTA button. Supports external URLs and HubSpot content. Has its own open-in-new-tab and no-follow toggles.
Picks which theme CTA class the primary button uses.
cta-primary Primary (default)cta-secondary Secondarycta-tertiary Tertiarycta-four Fourcta-five Fivecta-six SixReveals the optional second custom CTA button (Secondary Button Text + Link + Style).
Label for the secondary custom CTA button.
Destination for the secondary CTA button.
Picks the theme CTA class for the secondary button. Same six options as the primary button style.
A repeater of avatar photos for the social-proof item (overlapping headshots). Each entry exposes:
avatar_image Photo (image asset, defaults to a Sarah Mitchell placeholder)Pixel diameter of each circular avatar.
How many filled stars to render next to the avatars.
5 5 Stars (default)4 4 Stars3 3 Stars0 No StarsFill color for the filled stars.
Caption text that appears next to the stars (e.g. "from 200+ reviews").
The quoted text for a blockquote item.
Optional attribution line beneath the quote.
Background fill for the blockquote container.
Text color inside the blockquote.
Color of the blockquote's accent border.
Thickness of the blockquote's accent border.
Interior padding of the blockquote container (2px steps).
Corner rounding of the blockquote container.
Enables the per-item card background fill. Used when Card Wrap Mode is "Wrap Items" so each item carries its own card surface.
Background color for the per-item card.
Corner rounding of the per-item card (2px steps).
Interior padding for the per-item card.
Enables the per-item card border outline.
Border color for the per-item card.
Stroke width for the per-item card border.
Enables a drop shadow under the per-item card.
Color + opacity of the per-item card shadow.
The testimonial quote body.
Shows or hides the avatar photo beside the testimonial.
Avatar headshot for the testimonial.
Pixel diameter of the testimonial avatar (4px steps).
Attribution block under the testimonial quote (name, title, company).
Shows or hides the decorative quote-mark icon above the testimonial.
Text color for the testimonial quote body.
Text color for the author attribution line.
Pixel font size of the testimonial quote on desktop. Mobile sizing is handled by the theme's responsive scale.
Color of the decorative quote-mark icon above the testimonial.
Controls that live on the column itself (outside the items repeater). These render the column-level fade animation and the column's own card surface (used when Card Wrap Mode is "Wrap Columns").
IntersectionObserver-driven scroll-in animation for the entire column.
none No animation (default)bottom Fade Up (from bottom)top Fade Down (from top)left Fade from Leftright Fade from Rightfade Fade Only (no slide)Reduced motion: Visitors with prefers-reduced-motion: reduce skip the animation.
Background color of the column's card surface when Card Wrap Mode is "Wrap Columns".
Corner rounding of the column card (2px steps).
Interior padding for the column card.
Enables a border outline on the column card.
Color of the column card border.
Stroke width of the column card border.
Enables a drop shadow on the column card.
Color + opacity of the column card shadow.
Strips the bottom padding from the column card. Useful when the last item inside the column is a full-bleed image that needs to hug the card edge.
Each of Column 2, Column 3, and Column 4 is a structural duplicate of Column 1. They expose the same top-level Vertical Align + Mobile Order fields, the same Items repeater with the same 11 Item Types, the same Fade-In Animation, and the same per-column card style block. Only the columns matching the Number of Columns count actually render on the page; the others stay in the editor but produce no markup.
Developer hooks for adding custom CSS or JS targeting. Leave blank for most pages.
Sets an id="..." on the section element. Must be unique on the page. Useful for anchor links (e.g. #features) and JS targeting.
Additional classes (space-separated) appended to the section element's class list. Useful when applying page-specific overrides via the page's custom CSS.
Visual treatment for the section: row-level card style (when in row mode), modal styling, badge style, section dividers, and the row's background, width, and spacing.
Styles the entire row as a single card. This group is only visible when Card Wrap Mode is "Wrap Row".
Background color of the row card surface.
Corner rounding of the row card (2px steps).
Interior padding for the row card.
Enables a border outline on the row card.
Color of the row card border.
Stroke width of the row card border.
Enables a drop shadow on the row card.
Color + opacity of the row card shadow. Stay under 15% opacity for subtle render.
Strips the bottom padding from the row card. Useful when the last column ends in a full-bleed image that should hug the card's lower edge.
Styles the modal overlay that opens from any modal-triggered item. This group is hidden only when Card Wrap Mode is "None"; the three card-wrapped modes (Row / Columns / Items) all expose it because cards can carry modal triggers.
Color + opacity of the full-screen overlay shown behind the modal dialog.
Background color of the modal dialog itself.
Default text color inside the modal body.
Color of the modal's close (X) button.
Max pixel width of the modal dialog (10px steps). Below 500px the modal becomes phone-sized; above 1200px it starts to feel like a full page.
Corner rounding of the modal dialog (2px steps).
Styles the <h6> inside the section heading as a pill badge instead of a plain heading. Colors and borders are pulled from the chosen badge tier and the theme's badge settings.
Picks the badge tier. Colors are configured in Theme Settings > Badge.
badge-primary Primary (default; white pill, dark text, light border)badge-secondary Secondary (transparent, black border, black text)badge-three Three (black fill, white text)badge-four Four (semi-transparent white with white border, works on dark hero)badge-five Five (indigo-to-purple gradient, white text)badge-six Six (emerald-to-teal gradient, white text)Decorative SVG shapes that sit at the top or bottom of the section, useful for blending into the section above or below.
Decorative SVG shape rendered at the top of the section. All 9 shape options are listed below.
none No divider (default)wave-1 Wave 1 (Gentle)wave-2 Wave 2 (Sharp)wave-3 Wave 3 (Multi)wave-4 Wave 4 (Smooth)wave-5 Wave 5 (Layered)tilt Tilt (Angled)curve Curve (Arc)triangle TriangleFill color for the top divider SVG. Set this to the background color of the section directly above so the shape reads as a seamless transition.
Pixel height of the top divider (10px steps).
Additional angle height (10px steps), used by the Tilt divider to control how steep the angled edge is.
Mirrors the top divider shape horizontally.
Decorative SVG shape rendered at the bottom of the section. Same 9 shape options as Top Divider.
none No divider (default)wave-1 Wave 1 (Gentle)wave-2 Wave 2 (Sharp)wave-3 Wave 3 (Multi)wave-4 Wave 4 (Smooth)wave-5 Wave 5 (Layered)tilt Tilt (Angled)curve Curve (Arc)triangle TriangleFill color for the bottom divider SVG. Set this to the background color of the section directly below.
Pixel height of the bottom divider (10px steps).
Additional angle height for the Tilt variant of the bottom divider.
Mirrors the bottom divider shape horizontally.
Pushes the bottom divider behind the section content. Useful when the divider would otherwise sit on top of clickable buttons or links.
The section's wrapping row: background (color, gradient, image, overlay), content width, and per-breakpoint spacing.
Master switch for the row's background. The choice drives which sub-fields appear.
none No background (default; section inherits page bg)color Solid Color - reveals Background Colorgradient Gradient - reveals Top Color, Bottom Color, Directionimage Image - reveals Background Image, Size, Position, Overlay, BlurNote: The group label says "Image, Video, Color, Etc." in the editor, but the current build does not include a video background option.
Solid fill color for the row background.
Start color of the gradient (typically the top edge unless Direction is changed).
End color of the gradient.
Direction of the gradient ramp.
to bottom Top to Bottom (default)to top Bottom to Topto right Left to Rightto left Right to Leftto bottom right Top-Left to Bottom-Rightto bottom left Top-Right to Bottom-Leftto top right Bottom-Left to Top-Rightto top left Bottom-Right to Top-LeftThe image asset rendered behind the row content.
CSS background-size strategy.
cover Cover (default; fills the row, may crop)contain Contain (fits inside the row, may letterbox)initial Original (uses the image's native pixel size)Anchor point for the background image.
center center Center (default)center top Topcenter bottom Bottomleft center Leftright center RightLayers a color or gradient overlay on top of the background. Useful for darkening busy background images so foreground text stays readable.
solid Solid Color (default; reveals Overlay Color)gradient Gradient (reveals Start + End Color + Direction)Color + opacity of the solid overlay.
Start color of the overlay gradient.
End color of the overlay gradient.
to bottom Top to Bottom (default)to top Bottom to Topto right Left to Rightto left Right to Left135deg Diagonal 135deg45deg Diagonal 45degApplies a backdrop blur to the overlay, softening the background image behind it.
Pixel radius of the blur effect.
Container width strategy for the row.
standard Standard (default; uses the theme's standard container width)slim Slim (narrower theme container variant)custom Custom (reveals Container Width below)Custom max-width for the row container (10px steps).
Per-breakpoint padding controls for the row. Each breakpoint exposes top, bottom, left, right padding fields.
Padding around the row content on desktop (993px and above).
Padding around the row content on tablet (768-992px).
Padding around the row content on mobile (below 768px). Mobile gets left + right padding so content does not run flush to the screen edges.