Docs / Cards & Grids / Tile Slider

Tile Slider

A horizontal carousel of image tiles with arrow navigation, dot indicators, and three tile modes: standard tiles with optional links or CTAs, expandable tiles that open a modal on click, and video tiles that launch a lightbox. Use it for project galleries, case study sliders, video libraries, or any content set that benefits from a paged horizontal layout.

View live preview → Jump to settings ↓

→ Start Here

The most-used carousel controls live at the top so editors can pick a mode, tile count, and overall layout shape without scrolling. Tile mode drives which content repeater is active and which style groups appear.

Show Section Heading

Toggle Default: On

Controls whether the section heading block (badge h6, title h2, description p) renders. Turn off when the row above already carries the heading and you want the carousel to read as a continuation.

Tile Mode

Select Default: Standard Tiles

Picks which kind of tile the carousel uses. The choice drives which content repeater is active (Tiles / Expandable Tiles / Video Tiles) and which optional style groups appear (Play Button Style for video, Modal Style for expandable).

  • standard Standard Tiles (image + rich text + optional tile link or CTA button)
  • expandable Expandable Tiles (image + title + description; opens a modal with expanded content)
  • video Video Tiles (thumbnail + play button; opens a video lightbox)

Tiles Per Row (Desktop)

Select Default: 3 Tiles

Number of tiles visible at once on desktop. Mobile always collapses to a single tile per view regardless of this setting.

  • 3 3 Tiles (default)
  • 4 4 Tiles
  • 5 5 Tiles

Section Content Position

Select Default: Left (first card slot)

Where the section heading block sits relative to the carousel. Top stacks the heading above all tiles. Left places the heading into the first slot of the carousel so the tiles flow to its right.

  • top Top (heading above the carousel)
  • left Left (heading occupies the first card slot)

Content Alignment (Desktop)

Select Default: Left Shown when: Show Section Heading is on

Horizontal alignment for the section heading block on desktop (993px and above).

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

Content Alignment (Tablet/Mobile)

Select Default: Center Shown when: Show Section Heading is on

Horizontal alignment for the section heading block on tablet and mobile (below 992px). Independent from desktop so editors can center on phones while keeping desktop left-aligned.

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

Content Max Width (Desktop)

Number (0-1400px, 10px step) Default: 0 (no limit) Shown when: Show Section Heading is on

Caps the heading block's width on desktop. Set to 0 to let the heading span the full content area. Useful when you want a narrow, focused heading sitting next to a wide carousel.

Content Vertical Alignment

Select Default: Middle Shown when: Section Content Position is Left

Vertical anchor of the heading block when it sits in the first card slot. Top aligns to the top edge of the tile row, Middle centers it, Bottom aligns to the bottom edge.

  • flex-start Top
  • center Middle (default)
  • flex-end Bottom

CTA Alignment

Select Default: Left

Horizontal alignment of the CTA button rendered at the bottom of each tile (Standard mode, when Link Type is CTA Button).

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

/// Content

Everything that visitors actually read or look at: the section heading rich text, the tile repeaters (one per mode), and the scroll-in animation.

Section Heading

Rich text Default: blox Theme / Tile Slider Module / one-line description Shown when: Show Section Heading is on

The badge + title + description block rendered above the carousel (or inside the first card slot, depending on Section Content Position). Default markup is <h6> for the badge, <h2> for the title, and <p> for the description. Keep the h6 short (2-4 words) so the badge pill stays compact.

Tiles

Repeater (1-20 items, default 4) Shown when: Tile Mode is Standard Tiles

The repeater used by Standard tile mode. Each tile is an image plus rich text, with an optional link or HubSpot CTA. The four sub-fields below are documented inline.

Tile Image

Image (responsive) Default: tile-1/2/3 placeholders (rotating)

The tile's image. Upload at 640x480 or larger (landscape orientation recommended). The image's height is set by the Tile Style group, not the original file dimensions.

Tip: Use a unique filename when you replace a tile 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 Content

Rich text Default: H3 title + paragraph description

Rich text rendered below the tile image. Use H3 for the title and paragraphs for body copy. Lists and inline links are supported.

Tile CTA

HubSpot CTA Default: none Shown when: Link Type is CTA Button

Pick a HubSpot CTA to render at the bottom of the tile. Spacing above the CTA is controlled by CTA Top Spacing in Tile Style, and alignment is controlled by CTA Alignment in Start Here.

Expandable Tiles

Repeater (1-20 items, default 4) Shown when: Tile Mode is Expandable Tiles

The repeater used by Expandable tile mode. Each tile shows an image, title, and short description; clicking the tile opens a modal that reveals the expanded rich text.

Tile Image

Image (responsive) Default: tile-1/2/3 placeholders (rotating)

The tile's image. 640x480 or larger recommended.

Tile Title

Text (single line) Default: Tile Title

Shown as the tile heading on the carousel and as the heading inside the expanded modal.

Tile Description

Text (single line) Default: A brief description of this tile

Short description rendered below the title on the closed tile. Keep it to a sentence or two.

Expanded Content

Rich text Default: single placeholder paragraph

The body content rendered inside the modal when the tile is opened. Supports headings, paragraphs, lists, links, and inline CTAs.

Video Tiles

Repeater (1-20 items, default 4) Shown when: Tile Mode is Video Tiles

The repeater used by Video tile mode. Each tile shows a thumbnail with a play button overlay; clicking the tile launches a video lightbox.

Thumbnail Image

Image (responsive) Default: tile-1/2/3 placeholders (rotating)

Thumbnail rendered behind the play button. Pull a representative frame from the video itself for the strongest preview.

Tile Content

Rich text Default: H3 title + paragraph description

Rich text shown below the thumbnail. Use H3 for the video title and a paragraph for a one-line description.

Video Source

Select Default: External URL

Picks where the video is hosted. Drives whether Video URL or HubSpot Video appears below.

  • url External URL (YouTube, Vimeo, or direct .mp4 / .webm link)
  • hubspot HubSpot Video (file from your HubSpot File Manager)

Video URL

Text Default: empty Shown when: Video Source is External URL

Paste a YouTube link, Vimeo link, or direct video file URL. The lightbox auto-detects the host and renders the appropriate embed.

HubSpot Video

Video Player Shown when: Video Source is HubSpot Video

Pick a video from your HubSpot File Manager. Uses HubSpot's native player.

Fade-In Animation

Select Default: None

Triggers an IntersectionObserver-driven fade when the section scrolls into view. The fade adds a 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.

Custom ID & Classes (code)

Developer hooks for adding custom CSS or JS targeting. Leave blank for most pages.

CSS ID

Text Default: empty

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

CSS Class

Text Default: empty

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

Style Settings

Everything visual: tile chrome, badge styling, navigation arrows, the video play button, the expandable modal, section dividers, and the row's background/width/spacing.

/// Tile Style

Controls how each individual tile looks: background, corners, padding, image height, border, and shadow.

Tile Background Color

Color Default: #ffffff @ 100% opacity

Background color of the tile's text area (under the image). Keep contrast strong against your row background.

Corner Radius

Slider (0-40px, 2px step) Default: 12px

Roundness of tile corners. 0 for hard corners; 12 matches the theme's default tile rounding; 20+ for very soft, pill-like edges.

Card Padding

Slider (0-100px, 1px step) Default: 0px

Inner padding around the entire card (image + text). Use this when you want the tile background to extend past the image edge.

Card Text Padding

Slider (0-100px, 1px step) Default: 25px

Inner padding around the text content only (does not affect the image area). 25px is the default for comfortable reading.

CTA Top Spacing

Slider (0-60px, 1px step) Default: 0px

Space between the rich text content and the CTA button (Standard mode only). Bump this up when CTAs feel crowded against body copy.

Image Height - Desktop (px)

Number (150-600px, 10px step) Default: 300px

Fixed pixel height for the image portion of each tile on desktop. The image fills the area with object-fit: cover.

Image Height - Mobile (px)

Number (120-400px, 10px step) Default: 220px

Fixed pixel height for the image portion of each tile on mobile. Smaller than desktop because the carousel collapses to a single tile per view.

Add Border

Toggle Default: On

Adds a border around each tile. Turn off for a borderless, shadow-only card style.

Border Color

Color Default: #231f20 @ 8% opacity Shown when: Add Border is on

Color and opacity of the tile border. The default is a near-black tinted at 8% so it reads as a subtle hairline on light backgrounds.

Border Width (px)

Slider (1-5px, 1px step) Default: 1px Shown when: Add Border is on

Thickness of the tile border in pixels.

Add Shadow

Toggle Default: On

Adds a drop shadow to each tile so it lifts off the row background.

Shadow Color

Color Default: #000000 @ 5% opacity Shown when: Add Shadow is on

Color and opacity of the tile shadow. Stay under 15% opacity for tasteful shadow; above that the cards start to feel heavy.

/// Badge Style

Show Badge Styling

Toggle Default: On

Styles the <h6> inside the Section Heading as a pill badge instead of a plain heading.

Badge Style

Select Default: Primary Shown when: Show Badge Styling is on

Picks the badge tier. Colors and styling 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

/// Arrow Navigation

Customize the prev/next arrows that page through the carousel.

Arrow Style

Select Default: Outlined

Visual treatment of the arrow buttons.

  • minimal Minimal (no border, just the chevron icon)
  • outlined Outlined (circular border around the chevron, default)

Hide Arrows on Mobile

Toggle Default: On

When on, prev/next arrows are hidden on mobile and users swipe to navigate. Turn off if you need arrows visible at every breakpoint.

Arrow Color

Color Default: #1f2937 @ 100% opacity

Color of the chevron icons (and the outlined border, when Arrow Style is Outlined).

Arrow Size (px)

Number (24-60px, 2px step) Default: 40px

Width and height of the arrow button.

/// Play Button Style

Customize the play button overlay shown on video tile thumbnails.

Visibility: The entire Play Button Style group is only shown when Tile Mode is Video Tiles.

Button Size

Slider (36-96px, 4px step) Default: 64px

Diameter of the circular play button.

Button Background

Color Default: #000000 @ 20% opacity

Background color and opacity of the play button circle. Default is semi-transparent black so the thumbnail shows through.

Button Background (Hover)

Color Default: #000000 @ 30% opacity

Background color and opacity of the play button on hover/focus. Slightly more opaque than rest state by default.

Icon Color

Color Default: #ffffff @ 100% opacity

Color of the triangular play glyph inside the button.

Backdrop Blur

Slider (0-20px, 1px step) Default: 8px

Frosted-glass blur applied behind the play button. 0 disables the blur. Requires a semi-transparent Button Background to be visible.

Customize the expanded modal that opens when an expandable tile is clicked.

Visibility: The entire Modal Style group is only shown when Tile Mode is Expandable Tiles.

Show Image in Modal

Toggle Default: On

Display the tile image at the top of the expanded modal. Turn off for a text-only modal layout.

Overlay Color

Color Default: #000000 @ 50% opacity

The backdrop color behind the open modal.

Modal Text Color

Color Default: #333333 @ 100% opacity

Text color used inside the modal panel.

Close Button Color

Color Default: #333333 @ 100% opacity

Color of the X icon used to close the modal.

/// Section Dividers

Decorative SVG shapes that sit at the top or bottom of the section, useful for blending into the section above or below.

Top Divider

Select Default: None

Decorative shape rendered at the top edge of the section. The shape is an inline SVG matching the Top Divider Color you choose.

  • 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

Top Divider Color

Color Default: #ffffff @ 100% opacity Shown when: Top Divider is any shape

Color of the top divider SVG. Set this to match the background color of the section above so the divider blends seamlessly.

Top Divider Height

Slider (20-200px, 10px step) Default: 60px Shown when: Top Divider is any wave / curve / triangle

Pixel height of the top divider shape. Does not apply to the tilt divider, which uses Angle Height instead.

Angle Height (Top)

Slider (0-300px, 10px step) Default: 100px Shown when: Top Divider is Tilt

Height of the angled divider, only used when the Top Divider is set to Tilt.

Flip Top Divider

Toggle Default: Off Shown when: Top Divider is any shape

Mirrors the top divider horizontally so the peak/curve points the other direction.

Bottom Divider

Select Default: None

Decorative shape rendered at the bottom edge of the section. Shares the 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 Triangle

Bottom Divider Color

Color Default: #ffffff @ 100% opacity Shown when: Bottom Divider is any shape

Color of the bottom divider SVG. Set this to match the background color of the section below.

Bottom Divider Height

Slider (20-200px, 10px step) Default: 60px Shown when: Bottom Divider is any wave / curve / triangle

Pixel height of the bottom divider shape. Does not apply to the tilt divider.

Angle Height (Bottom)

Slider (0-300px, 10px step) Default: 100px Shown when: Bottom Divider is Tilt

Height of the angled bottom divider, only used when the Bottom Divider is set to Tilt.

Flip Bottom Divider

Toggle Default: Off Shown when: Bottom Divider is any shape

Mirrors the bottom divider horizontally.

Divider Under Content

Toggle Default: Off Shown when: Bottom Divider is any shape

Pushes the bottom divider behind the section's content so buttons sitting near the bottom remain clickable.

/// Row Settings

The section's wrapping row controls: background (color, gradient, image), content width, and per-breakpoint padding.

Background (Image, Video, Color, etc.)

Group Default: None

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 + color, Blur toggle + amount)

Note: The 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)

Group Default: Standard

Controls the maximum width of the row's content area.

  • standard Standard (uses the 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 1400)

Spacing (Around Content)

Group (per breakpoint)

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

  • desktop 100px top, 100px bottom, 0 left, 0 right
  • tablet 75px top, 75px bottom, 0 left, 0 right
  • mobile 50px top, 50px bottom, 15px left, 15px right