--- title: Cards - Grid module description: "Discover the versatile \"Cards - Grid\" module for HubSpot CMS, featuring customizable layouts and styles to enhance your website's branding and user engagement." --- [Skip to content](https://bereto.dev/cards-grid#main-content) [![bereto.dev](https://bereto.dev/hubfs/bereto_dev_logo.svg "bereto.dev")](https://bereto.dev/) - [Services](https://bereto.dev/services) - [HubSpot Marketplace](https://bereto.dev/hubspot-marketplace) - [Projects](https://bereto.dev/projects) - [Blog](https://bereto.dev/blog) - [About Me](https://bereto.dev/about-me) This is a search field with an auto-suggest feature attached. - There are no suggestions because the search field is empty. [Contact](https://bereto.dev/contact-me) [Contact](https://bereto.dev/contact-me) This is a search field with an auto-suggest feature attached. - There are no suggestions because the search field is empty. - [Services](https://bereto.dev/services) - [HubSpot Marketplace](https://bereto.dev/hubspot-marketplace) - [Projects](https://bereto.dev/projects) - [Blog](https://bereto.dev/blog) - [About Me](https://bereto.dev/about-me) # Cards - Grid The "Cards - Grid" module can be integrated into any HubSpot CMS website and seamlessly aligns with your branding. [Go to the marketplace](https://ecosystem.hubspot.com/marketplace/modules/cards-grid-module-by-devteam-partners) ![San Francisco](https://bereto.dev/hubfs/photo-1547190994-0dfe4ab1bdae.webp) San Francisco San Francisco is a place of landmarks and photo opportunities, not the least of which is the Golden Gate Bridge Learn more ![San Francisco](https://bereto.dev/hubfs/photo-1547190994-0dfe4ab1bdae.webp) San Francisco San Francisco is a place of landmarks and photo opportunities, not the least of which is the Golden Gate Bridge Learn more ## Cool examples 4 columns - Center alignment - Shadow - Hover effect ![San Francisco](https://bereto.dev/hubfs/photo-1547190994-0dfe4ab1bdae.webp) San Francisco San Francisco is a place of landmarks and photo opportunities, not the least of which is the Golden Gate Bridge This opens a Pop-up [![San Francisco](https://bereto.dev/hubfs/photo-1547190994-0dfe4ab1bdae.webp)](https://bereto.dev/cards-grid) [San Francisco](https://bereto.dev/cards-grid) San Francisco is a place of landmarks and photo opportunities, not the least of which is the Golden Gate Bridge [Learn more](https://bereto.dev/cards-grid) [![San Francisco](https://bereto.dev/hubfs/photo-1547190994-0dfe4ab1bdae.webp)](https://bereto.dev/cards-grid) [San Francisco](https://bereto.dev/cards-grid) San Francisco is a place of landmarks and photo opportunities, not the least of which is the Golden Gate Bridge [Learn more](https://bereto.dev/cards-grid) [![San Francisco](https://bereto.dev/hubfs/photo-1547190994-0dfe4ab1bdae.webp)](https://bereto.dev/cards-grid) [San Francisco](https://bereto.dev/cards-grid) San Francisco is a place of landmarks and photo opportunities, not the least of which is the Golden Gate Bridge [Learn more](https://bereto.dev/cards-grid) [![San Francisco](https://bereto.dev/hubfs/photo-1547190994-0dfe4ab1bdae.webp)](https://bereto.dev/cards-grid) [San Francisco](https://bereto.dev/cards-grid) San Francisco is a place of landmarks and photo opportunities, not the least of which is the Golden Gate Bridge [Learn more](https://bereto.dev/cards-grid) [![San Francisco](https://bereto.dev/hubfs/photo-1547190994-0dfe4ab1bdae.webp)](https://bereto.dev/cards-grid) [San Francisco](https://bereto.dev/cards-grid) San Francisco is a place of landmarks and photo opportunities, not the least of which is the Golden Gate Bridge [Learn more](https://bereto.dev/cards-grid) [![San Francisco](https://bereto.dev/hubfs/photo-1547190994-0dfe4ab1bdae.webp)](https://bereto.dev/cards-grid) [San Francisco](https://bereto.dev/cards-grid) San Francisco is a place of landmarks and photo opportunities, not the least of which is the Golden Gate Bridge [Learn more](https://bereto.dev/cards-grid) 3 columns - Left alignment - No card style - 16:9 aspect ratio - Hidden CTA ![San Francisco](https://bereto.dev/hubfs/photo-1547190994-0dfe4ab1bdae.webp) San Francisco San Francisco is a place of landmarks and photo opportunities, not the least of which is the Golden Gate Bridge ![San Francisco](https://bereto.dev/hubfs/photo-1547190994-0dfe4ab1bdae.webp) San Francisco San Francisco is a place of landmarks and photo opportunities, not the least of which is the Golden Gate Bridge ![San Francisco](https://bereto.dev/hubfs/photo-1547190994-0dfe4ab1bdae.webp) San Francisco San Francisco is a place of landmarks and photo opportunities, not the least of which is the Golden Gate Bridge ![San Francisco](https://bereto.dev/hubfs/photo-1547190994-0dfe4ab1bdae.webp) San Francisco San Francisco is a place of landmarks and photo opportunities, not the least of which is the Golden Gate Bridge ![San Francisco](https://bereto.dev/hubfs/photo-1547190994-0dfe4ab1bdae.webp) San Francisco San Francisco is a place of landmarks and photo opportunities, not the least of which is the Golden Gate Bridge ## Module settings ### Content - Image - Title - Description - Link - Link text Advanced settings - Custom Class - Custom ID ![Captura de pantalla 2024-04-22 a las 7.13.00 p.m.](https://bereto.dev/hubfs/Captura%20de%20pantalla%202024-04-22%20a%20las%207.13.00%20p.m..png "Captura de pantalla 2024-04-22 a las 7.13.00 p.m.") ![Captura de pantalla 2024-04-22 a las 7.14.03 p.m.](https://bereto.dev/hubfs/Captura%20de%20pantalla%202024-04-22%20a%20las%207.14.03%20p.m..png "Captura de pantalla 2024-04-22 a las 7.14.03 p.m.") ### Styles Cards: - Columns - Alignment - Border radius - Background - Shadow - Hover effect - Remove card style Content: - Aspect ratio - Title text - Description text - CTA style - Text color/hover - Background color/hover - Padding - Border radius Module spacing: - Spacing ![Captura de pantalla 2024-04-22 a las 7.14.28 p.m.](https://bereto.dev/hubfs/Captura%20de%20pantalla%202024-04-22%20a%20las%207.14.28%20p.m..png "Captura de pantalla 2024-04-22 a las 7.14.28 p.m.") ![Captura de pantalla 2024-04-22 a las 7.14.46 p.m.](https://bereto.dev/hubfs/Captura%20de%20pantalla%202024-04-22%20a%20las%207.14.46%20p.m..png "Captura de pantalla 2024-04-22 a las 7.14.46 p.m.") ![Captura de pantalla 2024-04-22 a las 7.15.05 p.m.](https://bereto.dev/hubfs/Captura%20de%20pantalla%202024-04-22%20a%20las%207.15.05%20p.m..png "Captura de pantalla 2024-04-22 a las 7.15.05 p.m.") ![Captura de pantalla 2024-04-22 a las 7.15.22 p.m.](https://bereto.dev/hubfs/Captura%20de%20pantalla%202024-04-22%20a%20las%207.15.22%20p.m..png "Captura de pantalla 2024-04-22 a las 7.15.22 p.m.") bereto.dev © 2026 | [Privacy Policy |](https://devteam.partners/legals#privacy)[Terms & Condition](https://devteam.partners/legals#terms)