VIEW LIVE DEMO<div class="row {% if module.make_cards_equal_height%}card-deck{% endif %}">
<!-- BEGIN SPEAKER CARDS -->
{% 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>
<div class="card-body">
{% inline_rich_text field="speaker_card_body_content" value="{{ item.speaker_card_body_content }}" %}
</div>
{% if item.speaker_bio_page %}</a>{%endif%}
</div>
{% endfor %}
<!-- / SPEAKER CARDS -->
</div>
.card * {
transition: .15s ease-in-out;
}
.speaker-card {
color: #000;
overflow:hidden;
}
.card.speaker-card {
background:transparent;
border:none;
}
.speaker-card .card-header {
background: #392264;
color: #fff;
}
.speaker-card .card-body {
background: #20113d;
height:100%;
}
.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;
}
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: http://chicago.hubspotusergroups.com/x
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 %}
</div>
</section>
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: https://knowledge.hubspot.com/website-user-guide/how-to-use-content-modules
The Speaker Lineup Cards make use of repeating fields and come with the following field options inside of each repeater group:
Front Side View
DMv2 View
Find an entry with an issue, bug, or abuse?
Please complete the below information in detail and we will investigate.
Reporting as Luke Summerfield
Copyright © 2019 HubSpot, Inc.
Return to Top