Options
- S'abonner au fil RSS
- Marquer le sujet comme nouveau
- Marquer le sujet comme lu
- Placer ce Sujet en tête de liste pour l'utilisateur actuel
- Marquer
- S'abonner
- Page imprimable
CTA Card with Icon, Color choice, URL, Title and Description Fields
Contributeur occasionnel
10-04-2018 05:50
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:
First I used the new design manager to create the module.
Here's a view of the module in design manager:
Module 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:
And the template view:
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.
Options
- Marquer comme nouveau
- Marquer
- S'abonner
- S'abonner au fil RSS
- Surligner
- Imprimer
- Envoyer à un ami
- Signaler un contenu inapproprié