HubSpot CMS

Speaker Lineup Cards

This is used to create a card layout for showcasing speakers on a landing page.


After receiving a minimum of 25 recommendations, an entry earns the "Community Approved" badge.

Please keep in mind, all entries are community created and may not be fully supported by HubSpot.

7 Recommendations

View on:


<div class="row {% if module.make_cards_equal_height%}card-deck{% endif %}">
  {% for item in module.speaker_card_item %}

    <div class="card speaker-card">
      {% if item.speaker_bio_page %}
	    <a href="{{ page_by_id(item.speaker_bio_page).absolute_url  }}">
        {% endif %}
        {% if item.speaker_headshot.src %}
        <img class="card-img-top" src="{{ item.speaker_headshot.src }}" alt="{{ item.speaker_headshot.alt }}">
        {% endif %}
        <div class="card-header">
          {% inline_rich_text field="speaker_name_and_title" value="{{ item.speaker_name_and_title }}" %}
        <div class="card-body">
          {% inline_rich_text field="speaker_card_body_content" value="{{ item.speaker_card_body_content }}" %}
      {% if item.speaker_bio_page %}</a>{%endif%}
  {% endfor %}
	<!-- / SPEAKER CARDS -->
.card * {
    transition: .15s ease-in-out;

 .speaker-card {
  color: #000;

.card.speaker-card {

.speaker-card .card-header {
    background: #392264;
    color: #fff;  

.speaker-card .card-body {
 background: #20113d; 

 .speaker-card h3 {
  font-size: 1.25em;
  margin: 0 0 .25em;
 .speaker-card h4 {
  font-size: 1em;
  text-transform: none;
  margin: 0;
   font-weight: 400;
 .speaker-card a {
  height: 100%;
  width: 100%;

.speaker-card a:hover {
 text-decoration: none; 

.speaker-card a p {
 color: #fff; 

.speaker-card a:hover .card-header, .speaker-card a:hover .card-body {
 background: #FF3366;
  color: #fff;

Have Questions?

Ask technical questions in Slack.

HubSpot Developer Slack

Not a member yet? - join here

Speaker Lineup Cards Module

This module is for showcasing upcoming speakers at an event. This module is meant to be used with a Coded HubSpot Template as this utilzies Bootstrap 4 in order to function. The following resources were used:


A demo of this in action can be seen on the Chicago HubSpot User Group ChiX event page:

How to use this module

After coding your custom template, your best use with this module inside of pre-defined Flexible Column area. You can create a Flexible Column Container using the {% widget_container %} tag. An example of this is below:

<!-- Section Wrapper for styling full-width -->
<section class="alt" id="speakers">
  <!-- Bootstrap .container -->
  <div class="container">

    <!-- Flexible Column widget_container -->
    {% widget_container "speaker_cards_row" label="Speaker Card Rows" %}
        <!-- Add the Speaker Lineup Card Moudle via the page editor -->
    {% end_widget_container %}


Once you have this section in your template, you can simply add the Speaker Lineup Card Module through the page editor by using the left side + sign or by using the Edit Module button. See the Flexible Column section in this article for more information:


The Speaker Lineup Cards make use of repeating fields and come with the following field options inside of each repeater group:

  • Speaker Headshot (Image Field)
  • Speaker Name and Title (Rich Text Field)
  • Speaker Card Body Content (Rich Text Field)
  • Speak Card Width (Number: Min 1 - Max 12)
  • Page Field (Page Selector)

Speaker Card Settings

Additional Screen Shots

Front Side View Speaker Row Cards

DMv2 View DMv2 View

7 Recommendations

AJ LaPorte


HubSpot Senior CMS Developer Advocate

View AJ LaPorte’s Gallery (1 Entry)

Other Open Source Projects

Browse all other open source projects

CrankShaft Framework

A modern framework for accelerating build times on the HubSpot CMS. Based on a modified Bootstrap 4 framework.

Lead developers: Jon McLaren

Developer Chrome Extension

Chrome/Chromium extension for HubSpot CMS Developers that adds a developer menu, dark theme and useful shortcuts to commonly used HubSpot query parameters, resources, and tools for making HubSpot Development easier and more enjoyable.

Lead developers: Jon McLaren , William Spiro , Gonzalo Torreras

VS Code HubL Language Extension

This extension enables super fast local development of CMS pages, and is a great compliment to using the new local HubL server. It contains comprehensive HubL tag, function, filter and expression test auto-complete snippets, as well as their documentation.

Lead developers: William Spiro

Not coding on HubSpot CMS yet?

We invite you to explore why thousands of developers LOVE coding with HubSpot!

Made with  by community members: