Paid

Showcase Your Content in a Sleek, Card-Based Grid

The Stylized Cards List HubSpot Module allows you to easily create a visually appealing list of cards in a column grid layout. Each card can be customized with a border, background color, background image, and drop shadow, giving you full control over the design of your featured content.

Module Demo FAQ Buy Module Documentation

 

Module Demo

3 columns desktop - 2 columns mobile

Stylized Card

A short text description that can be edited in a rich text field.

What's included:

  • Interesting feature
  • Interesting benefit
  • Interesting feature
  • Interesting benefit
  • and more!

Stylized Card

A short text description that can be edited in a rich text field.

What's included:

  • Interesting feature
  • and more!

Stylized Card

A short text description that can be edited in a rich text field.

What's included:

  • Interesting feature
  • Interesting benefit
  • Interesting feature
  • and more!

Stylized Card

A short text description that can be edited in a rich text field.

What's included:

  • Interesting feature
  • and more!

Stylized Card

A short text description that can be edited in a rich text field.

What's included:

  • Interesting feature
  • Interesting benefit
  • Interesting feature
  • and more!
 

Each Card is a Rich Text Box With More Style Features

beginners-guide-to-hubspot-cms-cover-1

Stylized Card

A short text description that can be edited in a rich text field.
 

beginners-guide-to-hubspot-cms-cover-1

Stylized Card

A short text description that can be edited in a rich text field.
 

beginners-guide-to-hubspot-cms-cover-1

Stylized Card

A short text description that can be edited in a rich text field.
 
 

Cards Can be Made Clickable

1

2

3

4

5

 

Add a Drop Shadow

Stylized Card

A short text description that can be edited in a rich text field.

What's included:

  • Interesting feature
  • Interesting benefit
  • Interesting feature
  • and more!

Stylized Card

A short text description that can be edited in a rich text field.

What's included:

  • Interesting feature
  • and more!

Stylized Card

A short text description that can be edited in a rich text field.

 

Frequently Asked Questions

Features and Benefits

  1. Easy to add to a page and customize the style.
  2. Change border, background, font, and drop shadows with just a few clicks.
  3. Can use multiple card modules on a page with each having a unique style.

Some pages you create will require an image gallery or tab content, but others will not. HubSpot modules give you the control to add new functionality to only the pages you need without impacting the rest of the pages on your website. These modules are added to drag-and-drop areas or sections when editing a page. If you are more familiar with WordPress, they are like blocks or plugins in that CMS.

HubSpot CMS Hub Overview

The content management system you need to easily create and personalize website pages for every visitor — optimized for conversion across every device. Rely on developers as much or as little as you’d like.

HubSpot CMS Hub Features

  • Drag and drop page editor
  • Image and file manager
  • Fully integrated CRM
  • Contact attribution analytics – know where leads come from
  • Multiple language support
  • Build website pages, landing pages, and blog posts
  • Managed website hosting and security

HubSpot CMS Hub Benefits

  • Marketing and Sales can have one login and tool for their website
  • Easy to use website builder without having to manage website hosting and plugins
  • Can make content translation and smart content to leverage your CRM data

Get Started

Have a question? Contact Me
 

Module Documentation

Content

Drag this module into an empty column or between modules.

Content

A rich text field to enter whatever content you would like.

Styles

You can adjust the following styles when you click on the styles tab.

Text 

Font

Changing the font will override your primary body font set in your theme settings. It will apply to all of the text in the card.

Text Drop Shadow

If you have a background image with a pattern it might be hard to read the text. You can select a text drop shadow to help increase the contrast. If this doesn't work, I suggest using Canva or Photoshop to darken the background image.

Background

Drop Shadow

Select from different drop shadow sizes. The default is none.

Background Color

Add a background color if you would like. 

Background Image

You can choose to have a background image that fills the card or it can be a small background image that is positioned inside of the card.

Custom Image Alignment

You can override the default image alignments and precisely set the image using XY coordinates. This is helpful when you want to bleed an image off an edge.

Custom Background Image Size

You can decrease an image if it is too large. I would use this sparingly. If youre are scaling down a super large image the browser will still have to download that large image slowing your page load speed. It would be better to save a new image at the smaller size and use that.

Border 

Border Style

Choose the border style and color with this field

Border Radius

You can specify if the card will have square edges or rounded edges.

Spacing

Margin & Padding

Apply padding and margin to the card.

 

 

Step Anchor Nav Examples

If you click the blue circles above they will scroll down to this section.