Layout Style 1: Horizontal Icon + Badge Header Layout

  • Description: A clean and compact layout where the card's header places the icon on the left and the category badges on the right with a "Space Between" alignment.

  • Best Use Cases: Listing services, core features, or product categories where a descriptive icon and a quick status label (e.g., New, Free, Featured) need to be presented side-by-side.

  • Key Features:

    • Support for single or dual call-to-action (CTA) buttons.

    • Sleek horizontal spacing that optimizes header real estate.

Module

Premium Card Title

Create a stunning layout using our premium HubSpot module templates. High responsive design.

Module

Premium Card Title

Create a stunning layout using our premium HubSpot module templates. High responsive design.

Module

Premium Card Title

Create a stunning layout using our premium HubSpot module templates. High responsive design.

Layout Style 2: Card Image with Floating Badge Overlay

  • Description: A media-rich layout featuring a prominent top image with a customizable category badge floating gracefully in the top-right corner. The image is followed by a structured title, description, and action buttons.

  • Best Use Cases: portfolio galleries, e-commerce product grids, or featured case studies.

  • Key Features:

    • Adjustable image aspect ratios (16:9, 4:3, 1:1, or Auto).

    • Smooth image scale-up (zoom) animation on card hover.

mgrichard999-plant-5419308_1920-1
Module

Premium Card Title

Create a stunning layout using our premium HubSpot module templates. High responsive design.

geralt-ai-10171006_1920-1
Module

Premium Card Title

Create a stunning layout using our premium HubSpot module templates. High responsive design.

jon-flobrant-lRSChvh1Mhs-unsplash (1)
Module

Premium Card Title

Create a stunning layout using our premium HubSpot module templates. High responsive design.

Layout Style 3: Centered Avatar & Profile Layout (User Showcase)

  • Description: A specialized layout designed for profiles and testimonials. It features a centered circular image/avatar at the top with flexible badge placements (Top-Left, Top-Right, Center, or Bottom) to highlight roles, ratings, or labels.

  • Best Use Cases: "Meet the Team" grids,  or client profiles.

  • Key Features:

    • Support for custom background gradient styling.

    • Sleek border controls around the profile avatar image.

aiony-haust-3TLl_97HNJo-unsplash
CMS Developer

Premium Card Title

Create a stunning layout using our premium HubSpot module templates. High responsive design.

aiony-haust-3TLl_97HNJo-unsplash
CMS Developer

Premium Card Title

Create a stunning layout using our premium HubSpot module templates. High responsive design.

aiony-haust-3TLl_97HNJo-unsplash
CMS Developer

Premium Card Title

Create a stunning layout using our premium HubSpot module templates. High responsive design.

aiony-haust-3TLl_97HNJo-unsplash
CEO

Premium Card Title

Create a stunning layout using our premium HubSpot module templates. High responsive design.

aiony-haust-3TLl_97HNJo-unsplash
CEO

Premium Card Title

Create a stunning layout using our premium HubSpot module templates. High responsive design.

aiony-haust-3TLl_97HNJo-unsplash
CEO

Premium Card Title

Create a stunning layout using our premium HubSpot module templates. High responsive design.

aiony-haust-3TLl_97HNJo-unsplash

Premium Card Title

Create a stunning layout using our premium HubSpot module templates. High responsive design.

aiony-haust-3TLl_97HNJo-unsplash

Premium Card Title

Create a stunning layout using our premium HubSpot module templates. High responsive design.

aiony-haust-3TLl_97HNJo-unsplash

Premium Card Title

Create a stunning layout using our premium HubSpot module templates. High responsive design.

Layout Style 4: Full-Height Image Card with Text Overlay

  • Description: A modern, high-impact visual layout where the card background is a full-height image. The card title, subtitle, description, and CTA buttons are elegantly overlaid on a semi-transparent, colored gradient box at the bottom.

  • Best Use Cases: Creative agency portfolio showcases, featured service offerings, case studies, or high-conversion landing page banners.

  • Key Features:

    • Custom overlay color blocks or gradient options to ensure text readability.

    • Smooth Hover Lift effects that create a premium floating look.

  •  
aiony-haust-3TLl_97HNJo-unsplash
Premium Card Title

Premium Card Subtitle

Create a stunning layout using our premium HubSpot module templates. High responsive design.

christian-buehner-DItYlc26zVI-unsplash
Premium Card Title

Premium Card Subtitle

Create a stunning layout using our premium HubSpot module templates. High responsive design.

stefan-stefancik-QXevDflbl8A-unsplash
Premium Card Title

Premium Card Subtitle

Create a stunning layout using our premium HubSpot module templates. High responsive design.

Layout Style 5: Icon-Centric Minimalist Layout

  • Description: A clean, whitespace-friendly layout that strips away background images to focus entirely on a large, centered vector icon, followed by clear typographic hierarchy.

  • Best Use Cases:  Listing company core values, step-by-step processes (how it works), or highlighting core services in a clean grid. 

  • Key Features:

    • Support for both web font icons (FontAwesome) and custom SVG/PNG icon images.

    • Interactive icon animations on hover (Continuous Spin, Pulse, Rotate, Float/Lift, or Zoom).

  •  

Premium Card Title

Create a stunning layout using our premium HubSpot module templates. High responsive design.

Premium Card Title

Create a stunning layout using our premium HubSpot module templates. High responsive design.

Premium Card Title

Create a stunning layout using our premium HubSpot module templates. High responsive design.

Premium Card Title

Create a stunning layout using our premium HubSpot module templates. High responsive design.

Premium Card Title

Create a stunning layout using our premium HubSpot module templates. High responsive design.

Premium Card Title

Create a stunning layout using our premium HubSpot module templates. High responsive design.

Layout Style 6: Single-Column Feature Banner / CTA Card

  • Description: A full-width, single-card layout engineered to grab the user's attention and drive conversions. It features centered headings, subtitles, description body, and call-to-action buttons.

  • Best Use Cases:  Lead generation forms, newsletter sign-ups, section breakers, or final call-to-action banners at the bottom of the page.

  • Key Features:

    • Striking background gradient overlays and customizable border setups.

    • Seamless responsive full-width behavior.
Category / Subtitle

Premium Card Title

Create a stunning layout using our premium HubSpot module templates. High responsive design.

Layout Style 7: Responsive Image Overlay Carousel Slider

  • Description:  Reimagines the full-height image card layouts into an interactive, touch-responsive horizontal slider. Ideal for displaying visual-heavy items like featured services, portfolio projects, or case studies without taking up vertical page space.

  • Best Use Cases:  Lead generation forms, newsletter sign-ups, section breakers, or final call-to-action banners at the bottom of the page.

  • Key Features:

    • Swipe & Drag Enabled: Smooth touch-swipe for mobile devices and click-and-drag functionality for desktop mice.
    • Auto-Play Loop: Automatically rotate slides with optional speed controls and hover-to-pause logic.
    • Custom Indicators: Styled navigation arrows and active-state pagination dots that adapt to your brand colors.
aiony-haust-3TLl_97HNJo-unsplash
Premium Card Title

Premium Card Subtitle

Create a stunning layout using our premium HubSpot module templates. High responsive design.

christian-buehner-DItYlc26zVI-unsplash
Premium Card Title

Premium Card Subtitle

Create a stunning layout using our premium HubSpot module templates. High responsive design.

stefan-stefancik-QXevDflbl8A-unsplash
Premium Card Title

Premium Card Subtitle

Create a stunning layout using our premium HubSpot module templates. High responsive design.

stefan-stefancik-QXevDflbl8A-unsplash
Premium Card Title

Premium Card Subtitle

Create a stunning layout using our premium HubSpot module templates. High responsive design.

aiony-haust-3TLl_97HNJo-unsplash
Premium Card Title

Premium Card Subtitle

Create a stunning layout using our premium HubSpot module templates. High responsive design.

Layout Style 8: Minimalist Icon-Centric Carousel

  • Description: Transitions clean, minimalist icon cards into a modern, distraction-free horizontal scroll layout. Perfect for compact sections like core business values, step-by-step processes, or customer testimonials.

  • Best Use Cases:  Lead generation forms, newsletter sign-ups, section breakers, or final call-to-action banners at the bottom of the page.

  • Key Features:

    • Compact Design: Condenses multiple content blocks into a sleek, horizontal space-saving track.

    • Custom Gap controls: Keeps spacing between slide cards consistent based on editor layout settings.

Premium Card Title

Create a stunning layout using our premium HubSpot module templates. High responsive design.

Premium Card Title

Create a stunning layout using our premium HubSpot module templates. High responsive design.

Premium Card Title

Create a stunning layout using our premium HubSpot module templates. High responsive design.

Premium Card Title

Create a stunning layout using our premium HubSpot module templates. High responsive design.

Premium Card Title

Create a stunning layout using our premium HubSpot module templates. High responsive design.

Premium Card Title

Create a stunning layout using our premium HubSpot module templates. High responsive design.

Setup & Layout Configuration Guide

This guide provides step-by-step instructions on how to set up, configure, and customize the Advanced Dynamic Cards module in your HubSpot Page Editor to achieve any of the layout styles shown above.

Step 1: Choose Your Card Media Type & Core Layout

Click on the module inside the HubSpot Page Editor to open the settings panel.

  • Locate the Card Layout / Media Type dropdown.
  • Select your desired visual structure:
    • Simple Icon Image + Badge (For profiles, feature blocks, and review layouts).
    • Card Image + Badge (For blog-style cards and visual portfolios).
    • Badge Only / Icon Only (For minimalist list items).

Step 2: Position Icons & Badges (Header Layout)

If your selected media type includes both icons and badges (e.g., Simple Icon Image + Badge), you can control their relative positioning.

  • Find the Header Layout (Icon + Badges Placement) dropdown.
  • Select your desired layout combination:
    • Space Between: Pushes the icon to one side and badges to the other.
    • Centered Stack: Places badges above/below the icon, with both centered.
    • Corner Alignments: Places badges on the top-left, top-right, bottom-left, or bottom-right of the centered icon.

Step 3: Enable the Touch-Swipe Carousel Slider

To convert your static cards grid into an interactive slider (as seen in Layout Styles 7 & 8):

  • Navigate to the Slider / Carousel Settings section.
  • Check the box to Enable Slider Layout.
  • Customize your slider experience:
    • Toggle Enable Autoplay to make slides rotate automatically.
    • Toggle Show Navigation Arrows and Show Pagination Dots to manage navigation.
    • Customize arrow backgrounds, hover effects, dot colors, and active indicator colors using the color customizers to match your brand.

Step 4: Adjust Responsiveness & Column Gaps

  • Expand the Layout Settings panel.
  • Set your column layout per device:
    • Cards per Row (Desktop): Choose from 1 to 5 columns.
    • Cards per Row (Tablet): Choose from 1 to 3 columns.
    • Cards per Row (Mobile): Choose 1 or 2 columns.
  • Set the Gap between Cards (px) (e.g., 30) to control the horizontal and vertical margins between your cards.
  • Set Card Text Alignment to align titles and descriptions left, center, or right.

Ready to upgrade your HubSpot site?

Install free & paid modules in seconds, or unlock premium themes and modules to ship faster.