HubSpot CMS

Speaker Lineup Cards

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

Unverified
?

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.

6 Recommendations

View on:

GitHub

HTML + HUBL
          
            <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>
          
        
CSS
          
            
.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;
  
}

          
        
JS
          
            
          
        
Have Questions?

Ask technical questions in Slack.

HubSpot Developer Slack

Not a member yet? - join here
READ ME (VIEW IN GITHUB)

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:

  • https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css
  • https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js

A demo of this in action can be seen on the Chicago HubSpot User Group ChiX event page: http://chicago.hubspotusergroups.com/x

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 %}

  </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

Features

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

 
6 Recommendations

AJ LaPorte

@websolutions

HubSpot Developer/Designer for WSOL

View AJ LaPorte’s Gallery (1 Entry)

Contribute to the Gallery!

We bet you’ve coded some amazing stuff. Showcase them and help the community grow.

Contribute

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!

Contribute
Made with  by community members: InboundLabs.co