🎓 HubSpot Certifications Carousel

A fully dynamic HubSpot module that displays certification groups in a responsive carousel. Built with a repeatable group field cert_card, where each card holds a hub title, icon image, and a multi-select of certifications that render as pill tags.

The certification count is calculated automatically from the number of selected options using |length.

🧩 Content Tab

cert_card — Repeatable group 1–20 cards. Each card has a title, icon image, and a multi-select of certifications. The carousel adapts automatically as you add or remove cards.

🎨 Style Tab

accent_color — Controls the hub icon border and the orange dot inside each certification pill. Default: #F66129.

dots_colors — Border color of the inactive pagination dots. Default: white.

focused_dot — Fill color of the active/selected pagination dot. Default: white.

arrows_colors — Icon color of the previous/next arrow buttons.

arrows_hover_color — Icon color of the arrows on hover.

arrows_background_color — Background fill of the arrow buttons. Default: white.

card_background_color — Background of each hub card. Falls back to the CSS default #1a1a1a if left empty.

⚙️ Options

infinite_loop — Toggle, default on. When enabled, the carousel clones all cards and wraps seamlessly end-to-end with no jump. When off, the previous/next buttons disable at the first and last slide.

📱 Responsive Behavior

Desktop ≥992px — 3 cards visible at once, 1 pagination dot.

Mobile <992px — 1 card at a time, swipe-enabled, dots show one per card.