Smart Cards

Show Section Heading

Controls whether the heading area (badge h6, title h2, description p) renders above the cards. Turn off when the heading is already supplied by a row above and you want the grid to read as a continuation.

Card Mode

The core behavior switch. The card mode you pick decides which Cards repeater (and which style sub-groups) the editor sees.

• expandable Expandable Cards (default) - click a card to open a modal with full content
• standard Standard Cards - card content (image + rich text) renders directly, with an optional link target per card
• video Video Cards - thumbnail with a play button overlay; opens a lightbox with a YouTube/Vimeo/MP4 video

Load Options

How to handle long card lists. Pick "None" if you only have a handful of cards and want them all visible.

• none None (Show All) - render every card
• load_more Load More Button (default) - reveal the Load More Settings sub-group
• pagination Pagination - reveal the Pagination Settings sub-group

Load More Settings

Sub-fields for the load-more behavior:

Button Text

Label rendered inside the load-more CTA. Keep it short (2-3 words).

Cards Shown Initially

How many cards are visible on first paint before the visitor clicks Load More.

Cards Per Load

How many additional cards are revealed each time the Load More button is clicked.

Button Style

Picks which theme CTA class is applied to the Load More button. Colors are controlled in Theme Settings > CTA.

• cta-primary Primary (default)
• cta-secondary Secondary
• cta-tertiary Tertiary
• cta-four Four
• cta-five Five
• cta-six Six

Pagination Settings

Sub-field for the pagination behavior:

Cards Per Page

How many cards are visible per pagination page. The pagination numbers and Prev/Next controls are styled separately under Style Settings > Pagination Style.

Heading Alignment (Desktop)

Horizontal alignment of the heading area on desktop (993px and above).

• left Left-aligned
• center Centered (default)
• right Right-aligned

Heading Alignment (Tablet/Mobile)

Text alignment for the heading area on tablet and mobile (below 992px). Set independently from desktop so editors can keep desktop left-aligned while centering on phones.

Heading Max Width (Desktop, px)

Caps the heading area's width on desktop so long descriptions wrap into a readable measure. Set to 0 for full width.

Enable Category Filter

Renders a row of filter buttons above the grid so visitors can sort cards by category tags. When on, every card repeater exposes a Filter Tags field, and a Filter Style group appears under Style Settings.

Animate Filter Transitions

Adds a smooth fade transition between filter states. Turn off if you want the grid to snap instantly.

"Show All" Label

The label for the catch-all filter button that resets the grid to show every card. Localize as needed.

Cards Per Row (Desktop)

How many cards sit side by side on desktop (993px and above).

• 2 2 Cards
• 3 3 Cards (default)
• 4 4 Cards

Cards Per Row (Mobile)

Cards per row on mobile. Default is 1 because card titles + descriptions need room to breathe on small screens.

• 1 1 (default)
• 2 2

Section Heading

The badge + title + description block above the grid. Markup is <h6> (renders as a pill badge when Badge Style is on), <h2> for the title, and <p> for the description. Keep the h6 to 2-4 words so the badge stays compact.

Cards (Expandable Mode)

Repeater for Expandable Cards. Each card renders an image, title, and short description on the tile face; clicking opens a modal containing the Expanded Content rich text. Sub-fields per card:

Card Image

The card thumbnail. Responsive sizing is on. If left empty, the fallback background color from Card Style is shown instead.

Tip: Use a unique filename when you replace this image. HubSpot's CDN caches by URL, so overwriting a file with the same name can leave visitors seeing the stale image for hours.

Card Title

Title displayed on the card face and reused as the heading inside the expanded modal. Plain text only (no rich text).

Card Description

Short description shown below the title on the card face. Keep it to one or two lines for a balanced grid.

Expanded Content

The full content rendered inside the expanded modal: headings, paragraphs, lists, links, and CTAs all supported.

Filter Tags

Comma-separated tags used by the filter buttons (e.g. design, development). Keep spelling and case consistent across cards or the filter will treat them as separate categories.

Cards (Standard Mode)

Repeater for Standard Cards. Each card shows an image plus a rich text block right on the tile, with an optional link target so the whole card can act as a CTA. Sub-fields per card:

Card Image

Card thumbnail. Leave empty to render a text-only card on the fallback background color.

Card Content

Rich text block for the card body. Use a heading element inside the rich text since there is no separate title field in this mode. If Link Card To is set, do NOT put a link or CTA inside the rich text - the whole card becomes the link.

Filter Tags

Comma-separated tags used by the filter buttons. Match spelling and case to other cards in the same category.

Card Link Options

Optional wrap-the-whole-card link. Exposes a Link Card To select with three sub-states:

• page Another Page, File, Email, Etc. - reveals a standard URL picker (external, content, email, file)
• anchor A Section of This Page - reveals an Anchor ID text input (just the id, no #)
• none Nowhere (default) - card renders without a link

Video Cards (Video Mode)

Repeater for Video Cards. Each card shows a thumbnail with a play button overlay; clicking opens a lightbox that plays the video. Sub-fields per card:

Thumbnail Image

Thumbnail for the video card. The play button overlay (styled via Play Button Style) is layered on top of this image.

Card Content

Rich text shown beneath the thumbnail. Use a heading element since there is no separate title field.

Video Source

Where the video lives. Drives which of the next two fields is editable.

• url External URL (default) - reveals Video URL text field
• hubspot HubSpot Video - reveals HubSpot Video picker

Video URL

Paste a YouTube link (youtube.com/watch?v=...), a Vimeo link (vimeo.com/...), or a direct video file URL (.mp4, .webm). The lightbox handles embed conversion automatically.

HubSpot Video

Pick a video already uploaded to your HubSpot File Manager. Uses HubSpot's native video player inside the lightbox.

Filter Tags

Comma-separated tags (e.g. tutorials, demos). Match spelling and case to other cards.

Fade-In Animation

Triggers an IntersectionObserver-driven fade as the section scrolls into view. The animation adds a 30px slide from the chosen direction plus opacity.

• none No animation (default)
• bottom Fade Up (slides up from below)
• top Fade Down (slides down from above)
• left Fade from Left
• right Fade from Right
• fade Fade Only (no slide)

Reduced motion: When a visitor has prefers-reduced-motion: reduce, the animation is skipped and the section renders fully visible.

CSS ID

Sets an id="..." on the section element. Must be unique on the page. Useful for anchor links (e.g. #case-studies) and JS targeting.

CSS Class

Additional classes (space-separated) appended to the section element's class list. Useful when applying page-specific overrides via the page's custom CSS.

Show Badge Styling

Styles the <h6> inside the section heading as a pill badge. Badge colors come from Theme Settings > Badge.

Badge Style

Picks the badge tier. Colors are configured in Theme Settings > Badge.

• badge-primary Primary (default)
• badge-secondary Secondary
• badge-three Three
• badge-four Four
• badge-five Five
• badge-six Six

Filter Alignment

Horizontal alignment of the filter button row.

• left Left
• center Center (default)
• right Right

Filter Text Color

Text color of inactive filter buttons.

Active Filter Color

Text color of the currently selected filter.

Active Filter Background

Background color of the currently selected filter pill.

Card Background Color

Fill color of the card panel itself. Pair with low-opacity border + shadow for a subtle floating tile.

Card Title Color

Title color on the Expandable card face. Standard and Video modes use the rich text color from inside the editor instead.

Card Description Color

Description text color on the Expandable card face.

Expand Button Icon Color

Color of the plus/expand icon glyph on the Expandable card face.

Expand Button Circle Color

Border color of the circular ring around the expand icon.

Corner Radius

Rounded corners on the card. 12px matches the theme's default tile rounding; 0 for hard corners.

Card Padding

Outer padding inside the card shell. 0 lets the image bleed to the edges of the card; raise it for an inset image with a card-color frame.

Card Text Padding

Padding around the text block inside the card (below the image). Independent from Card Padding so the image can bleed while the text still gets breathing room.

Add Border

Master switch for the card border. Reveals Border Color and Border Width when on.

Border Color

Stroke color of the card border. Keep opacity low (5-10%) for a tasteful hairline.

Border Width (px)

Stroke thickness of the card border.

Add Shadow

Master switch for the card drop shadow. Reveals Shadow Color when on.

Shadow Color

Color and opacity of the card shadow. Stay under 15% opacity to keep the grid feeling light.

Fallback Background

Background color shown in the image area when a card has no uploaded image. Useful as a placeholder while content is being prepared.

Card Image Height

Fixed height of the card image area on desktop. The image is rendered with object-fit: cover inside this box so different aspect ratios still align in a uniform grid.

Card Image Height (Mobile)

Image area height on mobile. Default is shorter than desktop so the card stays compact on small screens.

Button Size

Diameter of the play button circle in pixels.

Button Background

Fill color and opacity of the play button circle in its resting state.

Button Background (Hover)

Fill color and opacity when the visitor hovers the thumbnail.

Icon Color

Color of the triangular play glyph inside the button.

Backdrop Blur

Frosted-glass blur behind the button (uses backdrop-filter). Set to 0 to disable the effect; works best when the button background has some transparency.

Show Image in Modal

Re-renders the card image at the top of the modal. Turn off if the image is purely decorative on the tile and the expanded view should focus on copy.

Overlay Color

Backdrop color behind the modal panel. Higher opacity darkens the page behind the modal.

Modal Background

Background color of the modal wrapper.

Modal Title Color

Color of the title heading inside the expanded modal.

Modal Card Background

Background color of the inner card panel inside the modal. Layered on top of Modal Background.

Modal Text Color

Default text color for paragraphs and rich text inside the modal.

Modal Max Width (px)

Caps the modal's width so long rich text stays in a readable measure.

Modal Corner Radius

Rounded corners on the modal panel.

Close Button Color

Color of the X icon in the top-right of the modal.

Number Color

Text color of page number chips in their resting state.

Number Color (Hover)

Text color when hovering a page number chip.

Number Color (Active)

Text color of the currently selected page number chip.

Number Background

Fill color of page number chips in their resting state.

Number Background (Hover)

Fill color when hovering a page number chip.

Number Background (Active)

Fill color of the currently selected page number chip.

Number Font Size

Font size of the page numbers inside each chip.

Number Border Radius

Rounded corners on each page number chip. Set to a value larger than the chip's half-height for fully circular chips.

Pagination Alignment

Horizontal alignment of the pagination row.

• left Left
• center Center (default)
• right Right

Arrow Color

Color of the previous/next arrows that bracket the page number chips.

Top Divider / Bottom Divider

Both the top and bottom dividers share the same 9 shape options. Each shape is rendered as an inline SVG matching the divider color you pick.

• 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 Triangle

Each divider also exposes: Divider Color (set this to the background color of the adjacent section), Divider Height (20-200px, default 60), Angle Height (for the tilt divider only, 0-300px, default 100), Flip Divider (mirror horizontally), and for the bottom divider only: Divider Under Content (puts the divider behind content so buttons stay clickable).

Background (Image, Video, Color, etc.)

The Background Type dropdown drives which sub-controls appear:

• none No background (default; section inherits the page bg)
• color Solid Color - reveals Background Color picker
• gradient Gradient - reveals Top Color, Bottom Color, and 8 direction options
• image Image - reveals Background Image, Size (cover/contain/original), Position (9-point), Overlay toggle, Overlay Color, Blur toggle, Blur amount

Note: The "Background" group is labeled "Image, Video, Color, etc." in the editor but the current build does not include a video background option - the Background Type select only exposes none/color/gradient/image.

Size (Content Width)

• standard Standard (uses theme's standard container width, set in Theme Settings > Layout)
• slim Slim (narrower variant, also set in Theme Settings)
• custom Custom - reveals a Container Width number input (600-1920px, default 1200)

Spacing (Around Content)

Padding controls for the row, set independently for desktop, tablet, and mobile. Each breakpoint exposes a top/bottom/left/right spacing input. Defaults:

• desktop 100px top, 100px bottom, 0 left, 0 right
• tablet 60px top, 60px bottom, 0 left, 0 right
• mobile 40px top, 40px bottom, 15px left, 15px right