Custom module: which field to use?

[Gabvo]

Hello!

On our website, we display our product features in this way:

 

In the design editor, it's created as a custom module, with a group of fields including an image field, title and content:

 

<div class="hs-our-misssion-wrapper discover" id="discover">
  <!-- Titles -->
  <div class="page-center">
    <h2 class="text-center mt40 mb30"><strong>{{ module.top_title }}</strong></h2>
    <div class="row text-center">
      <div class="col-xs-12 text-center">
        <h3 class="text-center paxfamilia-desc" id="alignment">
          {{ module.top_sub_title }}
        </h3>
      </div>
    </div>
    <div class="our-mission-item-top-wrap flex flex-horizontal-center">
      <div class="our-mission-item">
        {% for item in module.item %}
        <!-- Bilan patrimonial -->
        <div class="our-mission-wrapper">
          <div class="icon mb30">
            {% if item.image.src %}
            <img src="{{ item.image.src }}" alt="{{ item.image.alt }}">
            {% endif %}
          </div>
          <div class="content">
            <h4>{{ item.title }}</h4>
            <p>{{ item.content }}</p>
          </div>
        </div>
        {% endfor %}
      </div>

Now we want to add more product features, but with a banner/flag/icon that mark it as "only available for pro version". Something like this:

 

How to create this ? Thank you! 

[Stephanie-OG · Accepted solution]

Hi there!

What you could do in the fields on the right-hand side is add in a Boolean field (checkbox) which, when enabled, displays your banner. In the HTML + HUBL area you would have somethig like this within your "our-mission-wrapper" div:

{% if module.display_ribbon %}
	<!-- Add ribbon code here -->
{% endif %}

In the <!-- Add ribbon code here --> area, you can add in the HTML for your ribbon and you can add the classes to style it in the CSS area below. 

There are resources you can find online with the HTML/CSS for your ribbons. For example, this CodePen seems to use pure HTML/CSS or this ribbon generator. 

---

Stephanie O'Gay Garcia
HubSpot Design / Development / Automation
Website | Contact