Share Your Work

JoshCM
Contributor

CTA Card with Icon, Color choice, URL, Title and Description Fields

Hi there,

 

I recently created a module with the new icon picker field and it took a bit to figure out so I thought I'd post this here.

 

First the finished product:

Demo

 

First I used the new design manager to create the module.

 

Here's a view of the module in design manager:

 Module Creation ScreenModule Creation Screen

I used the choice field for color selection and then added the css classes for our brand colors as choices for the icons to make it easier.

 

Here's what the landing page editor looks like:

landing-page-edit-view.jpg

 

And the template view:

template-view.jpg

 

Here's my html+HUBL

<a href="{{ module.content_link }}" target="_blank"><div class="hub-card">
  <div class="icon-circle {{ module.color_choice }}">{% icon
	name="{{ module.icon_field.name }}"
	style="{{ module.icon_field.type }}"
	unicode="{{ module.icon_field.unicode }}"
%}
    </div>
  <div class="hub">
  <h6>{{ module.content_title }}</h6>
  <p>{{ module.content_description }}</p>
  </div>
  </div></a>

And the CSS I used:

.hs_cos_wrapper_type_icon svg{
height: 40px;
width: 40px;
}

.hs_cos_wrapper_type_icon {
 text-align: center;
  padding: 0px;
  margin: 0px;
  line-height: 85px;
}

.hub {
  margin: 5px 0px 0px 15px;
  display: inline-block;
  vertical-align: middle;
}

.hub h6{
  font-family: 'Roboto',Helvetica,Arial,Lucida,sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5em;
  margin: 0px;
  padding: 0px 0px 0px 0px;
  color: #444444;
}

.hub p{
  font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: 0 0;
    font-size: 100%;
    vertical-align: baseline;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  color: #444444;
}

.hub-card {
  padding: 0px; 
  background: #ffffff; 
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: box-shadow 0.3s ease-in-out;
  vertical-align: middle;
  display: inline-block;
  width: 100%;
  margin-bottom: 25px;
}

.hub-card:hover{
 box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.icon-circle {
  border-radius: 100%;
  text-align: center;
  vertical-align: top;
  height: 70px;
  width: 70px;
  line-height: 70px;
  margin: 0px;
  padding: 0px;
float: left;}

.evi-red {
fill: #E23E21;
background-color: rgba(226,62,33,0.3);}

.evi-yellow {
fill: #FFC627;
background-color: rgba(255,198,39,0.3);}

.evi-orange {
fill: #EF7622;
background-color: rgba(239,118,34,0.3);}

.evi-blue {
fill: #00A1DF;
background-color: rgba(0,161,223,0.3);}

.evi-med-blue {
fill: #0075C9;
background-color: rgba(0,117,201,0.3);}

.evi-pink {
fill: #F64B7F;
background-color: rgba(246,75,127,0.3);}

.evi-teal {
fill: #00B09A;
background-color: rgba(0,176,154,0.3);}

.evi-lt-green {
fill: #82BC00;
background-color: rgba(130,188,0,0.3);}

.evi-dk-green {
fill: #009944;
background-color: rgba(0,153,68,0.3);}

 

Hope this helps some people looking to use the icon field or do something similar.

5 Replies 5
louischausse
Key Advisor | Platinum Partner
Key Advisor | Platinum Partner

CTA Card with Icon, Color choice, URL, Title and Description Fields

Thank you so much the styling of these icons were not an easy one!!

Louis Chaussé from Auxilio HubSpot Solutions Partner Signature
Louis Chaussé from Auxilio HubSpot Solutions Partner Meeting link
0 Upvotes
NLSTobías18
Member

CTA Card with Icon, Color choice, URL, Title and Description Fields

Wow, great Job and an excellent solution. Smiley Happy

m-axxis
Participant

CTA Card with Icon, Color choice, URL, Title and Description Fields

Looks great.

jly
Participant

CTA Card with Icon, Color choice, URL, Title and Description Fields

Hey Josh,

 

GREAT solution you have going on here. I'm unable to get my link working. I posted to get some help, but since you are the creator of this custom HUBL, can you tell me why my links are not working?

 

My post here:

https://community.hubspot.com/t5/Content-Design-Questions/Links-in-custom-HTML-HUBL-not-working-what...

jennysowyrda
Community Manager
Community Manager

CTA Card with Icon, Color choice, URL, Title and Description Fields

Thanks for sharing @JoshCM!