Hello HubSpot Community -
First, please forgive me if this is a silly issue. I am new to the design manager and thought that what I was attempting would be easy but after many hours, I still can not get it working.
I downloaded a template from the store and using a cloned version of one of their modules, I am trying to add a button into the boxed area (see below). No matter what I do the button keeps ending up outside the box.
I added in the fields and updated the code but nothing will work.
Here is the HTML + HubL code:
<div class="single-card theme-border-radius-card theme-shadow" id="{{ name }}" style="background-color: {{ module.color_field.color }}">
<div class="card-content">
<div class="button">
{% if module.image_icon == "icon" and module.icon_group.icon_choice.unicode != 'null' %}
<span class="feature__icon">
{% icon
name="{{ module.icon_group.icon_choice.name }}"
style="{{ module.icon_group.icon_choice.type }}"
unicode="{{ module.icon_group.icon_choice.unicode }}"
%}
</span>
{% elif module.image_icon == "image" %}
{% if module.image.src %}
<div class="feature__image">
{% set sizeAttrs = 'width="{{ module.image.width }}" height="{{ module.image.height }}"' %}
{% if module.image.size_type == 'auto' %}
{% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
{% elif module.image.size_type == 'auto_custom_max' %}
{% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.image.max_width }}px; max-height: {{ module.image.max_height }}px"' %}
{% endif %}
<img src="{{ module.image.src }}" alt="{{ module.image.alt }}" {{ sizeAttrs }}>
</div>
{% endif %}
{% endif %}
{% inline_rich_text field="card_content" value="{{ module.card_content }}" %}
</div>
</div>
</div>
{% require_css %}
<style>
#hs_cos_wrapper_{{name}} .single-card .feature__icon > span {
background-color: {{ module.icon_group.icon_bg_color.color }};
border-color: {{ module.icon_group.icon_border_color.color }};
}
#hs_cos_wrapper_{{name}} .single-card .feature__icon svg {
fill: {{ module.icon_group.icon_color.color }};
width: {{ module.icon_group.icon_width }}px;
}
</style>
{% end_require_css %}
{# Sets attributes used for the link field #}
{# Button 1 #}
{% set href_1 = module.button.link.url.href %}
{% if module.button.link.url.type is equalto 'EMAIL_ADDRESS' %}
{% set href_1 = 'mailto:' + href_1 %}
{% endif %}
{% set rel_1 = [] %}
{% if module.button.link.no_follow %}
{% do rel_1.append('nofollow') %}
{% endif %}
{% if module.button.link.open_in_new_tab %}
{% do rel_1.append('noopener') %}
{% endif %}
<div class="client_hub_theme_module_cta_card">
<div class="client_hub_theme_module_cta_card-lens"></div>
<div class="client_hub_theme_module_cta_card-inner content-wrapper">
<div class="client_hub_theme_module_cta_card-content">
{% if module.image.src %}
<img class="cta_card-icon" src="{{ module.image.src }}" alt="{{ module.image.alt }}" loading="lazy" width="600" height="496">
{% endif %}
<div class="client_hub_theme_module_cta_card-ctas">
{% if module.button.button_text %}
<div class="button-wrapper client_hub_theme_module_container">
<a class="button {{ module.button.button_type }}" href="{{ href_1 }}"
{% if module.button.link.open_in_new_tab %}target="_blank"{% endif %}
{% if rel_1 %}rel_1="{{ rel_1|join(' ') }}"{% endif %}
>
{{ module.button.button_text }}
</a>
</div>
{% endif %}
</div>
</div>
</div>
The module.css:
.single-card {
padding: 35px 20px 20px 20px;
max-width: 250px;
margin: 25px auto;
}
.single-card .feature__icon > span {
border-radius: 100%;
border-width: 1px;
border-style: solid;
display: block;
height: auto;
margin: 0px auto 20px;
text-align: center;
}
.single-card .feature__icon > div {
text-align: center;
}
.single-card .feature__icon svg {
box-sizing: border-box;
height: auto;
padding: 20px;
}
.single-card .feature__image {
display: block;
margin: 0 auto 35px;
text-align: center;
}
.single-card .feature__image img {
max-width: 100%;
height: auto;
}
Any help or guidence would be amazing!