[Hubspot modules] Achievement & Feature Highlight Module

Demo Video

Detail

Purpose

To emphasize key metrics that support the product's credibility (e.g., number of customers, satisfaction scores, awards won) and to instantly convey the value and reliability of the service to visitors.

Features

Editors can add, delete, and reorder sets of a "label (heading)," "number," "unit," and "note" as needed.
Easily change the font size and color of icons, numbers, and text directly in the editor.
Display multiple achievements side-by-side for easy comparison (fully responsive).

Implementation Points

Repeater: In the module's field settings, create a group field named awards and configure it with the "Repeater" option. This allows for the dynamic addition of multiple achievement items.
Fields within the Group: Each group should contain a set of fields: a text field for the label (award_label), a text field for the number (award_number), a text field for the unit (award_unit), and a text field for the note (award_note).
Styling Flexibility: Within the style_settings group, provide color pickers and number input fields. These values are dynamically applied via CSS, allowing editors without coding knowledge to adjust the design.

‍

Input json

‍

{
  "label": "Awards Module",
  "icon": "award",
  "fields": [
    {
      "label": "Awards",
      "name": "awards",
      "type": "group",
      "occurrence": {
        "min": 1,
        "max": 10,
        "default": 3
      },
      "children": [
        {
          "label": "Award Label",
          "name": "award_label",
          "type": "text",
          "default": "受賞実績"
        },
        {
          "label": "Award Number",
          "name": "award_number",
          "type": "text",
          "default": "100"
        },
        {
          "label": "Award Unit",
          "name": "award_unit",
          "type": "text",
          "default": "件以上"
        },
        {
          "label": "Award Note",
          "name": "award_note",
          "type": "text",
          "default": "お客様から高い評価をいただいています"
        }
      ]
    },
    {
      "label": "Style Settings",
      "name": "style_settings",
      "type": "group",
      "children": [
        {
          "label": "Icon Color",
          "name": "icon_color",
          "type": "color",
          "default": {
            "color": "#3d556b"
          }
        },
        {
          "label": "Number Color",
          "name": "number_color",
          "type": "color",
          "default": {
            "color": "#3d556b"
          }
        },
        {
          "label": "Text Color",
          "name": "text_color",
          "type": "color",
          "default": {
            "color": "#33475b"
          }
        },
        {
          "label": "Label Font Size (px)",
          "name": "label_font_size",
          "type": "number",
          "default": 19,
          "min": 10,
          "max": 50,
          "step": 1
        },
        {
          "label": "Number Font Size (px)",
          "name": "number_font_size",
          "type": "number",
          "default": 48,
          "min": 20,
          "max": 100,
          "step": 1
        },
        {
          "label": "Unit Font Size (px)",
          "name": "unit_font_size",
          "type": "number",
          "default": 24,
          "min": 10,
          "max": 50,
          "step": 1
        },
        {
          "label": "Note Font Size (px)",
          "name": "note_font_size",
          "type": "number",
          "default": 12,
          "min": 8,
          "max": 24,
          "step": 1
        }
      ]
    }
  ]
}

Source Code

HTML

<div class="awards-container">
  {% for award in module.awards %}
    <div class="award-item">
      <div class="award-graphic">
        <div class="laurel-left">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path fill="none" stroke="{{ module.style_settings.icon_color.color|default('#3d556b') }}" stroke-linejoin="round" stroke-width="1.5" d="M9.246 6.611c-.213 1.642 1.104 3.166 1.104 3.166s1.663-1.138 1.876-2.78c.213-1.643-1.104-3.167-1.104-3.167S9.46 4.97 9.246 6.611ZM7.683 12.13c.696 1.503 2.624 2.093 2.624 2.093s.8-1.847.104-3.35s-2.624-2.094-2.624-2.094s-.8 1.848-.104 3.351Zm.821 5.285c1.328.993 3.306.599 3.306.599s-.176-2.005-1.504-2.998S7 14.417 7 14.417s.176 2.005 1.504 2.998Zm3.609 4.298c1.505.698 3.359-.095 3.359-.095s-.587-1.925-2.092-2.624c-1.505-.698-3.358.096-3.358.096s.586 1.925 2.091 2.623Zm1.668-18.745c-1.21 1.133-1.164 3.144-1.164 3.144s2.01.176 3.22-.957s1.164-3.145 1.164-3.145s-2.01-.175-3.22.958Z"/>
          </svg>
        </div>
        
        <div class="award-content">
          <div class="award-label" style="
            font-size: {{ module.style_settings.label_font_size|default(19) }}px;
            color: {{ module.style_settings.text_color.color|default('#33475b') }};
          ">
            {{ award.award_label }}
          </div>
          
          <div class="award-title">
            <span class="award-number" style="
              font-size: {{ module.style_settings.number_font_size|default(48) }}px;
              color: {{ module.style_settings.number_color.color|default('#3d556b') }};
            ">
              {{ award.award_number }}
            </span>
            <span class="award-unit" style="
              font-size: {{ module.style_settings.unit_font_size|default(24) }}px;
              color: {{ module.style_settings.text_color.color|default('#33475b') }};
            ">
              {{ award.award_unit }}
            </span>
          </div>
        </div>
        
        <div class="laurel-right">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path fill="none" stroke="{{ module.style_settings.icon_color.color|default('#3d556b') }}" stroke-linejoin="round" stroke-width="1.5" d="M16.756 6.611c.213 1.642-1.104 3.166-1.104 3.166s-1.663-1.138-1.877-2.78C13.562 5.353 14.88 3.83 14.88 3.83s1.663 1.139 1.877 2.781Zm1.561 5.519c-.696 1.503-2.624 2.093-2.624 2.093s-.8-1.847-.104-3.35s2.625-2.094 2.625-2.094s.8 1.848.103 3.351Zm-.82 5.285c-1.328.993-3.306.599-3.306.599s.176-2.005 1.504-2.998s3.306-.599 3.306-.599s-.176 2.005-1.504 2.998Zm-3.609 4.298c-1.505.698-3.359-.095-3.359-.095s.587-1.925 2.092-2.624c1.505-.698 3.358.096 3.358.096s-.586 1.925-2.091 2.623ZM12.22 2.968c1.21 1.133 1.164 3.144 1.164 3.144s-2.01.176-3.22-.957S9 2.01 9 2.01s2.01-.175 3.22.958Z"/>
          </svg>
        </div>
      </div>
      
      <div class="award-note" style="
        font-size: {{ module.style_settings.note_font_size|default(12) }}px;
        color: {{ module.style_settings.text_color.color|default('#33475b') }};
      ">
        {{ award.award_note }}
      </div>
    </div>
  {% endfor %}
</div>

‍

CSS

/* Awards Container */
.awards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Individual Award Item */
.award-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 200px;
  max-width: 280px;
  flex: 1;
}

/* Award Graphic Container */
.award-graphic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
  margin-bottom: 15px;
}

/* Laurel Wreaths */
.laurel-left,
.laurel-right {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.laurel-left svg,
.laurel-right svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Award Content */
.award-content {
  text-align: center;
  margin: 0 15px;
  min-width: 120px;
}

/* Award Label - CSS変数を使用 */
.awards-container .award-label {
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  line-height: 1.3;
  font-size: var(--label-font-size, 19px);
  color: var(--text-color, #33475b);
}

/* Award Title Container */
.award-title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  line-height: 1;
  gap: 2px;
}

/* Award Number - CSS変数を使用 */
.awards-container .award-number {
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: var(--number-font-size, 48px);
  color: var(--icon-color, #3d556b);
}

/* Award Unit - CSS変数を使用 */
.awards-container .award-unit {
  font-weight: 600;
  margin-left: 0.1em;
  font-size: var(--unit-font-size, 24px);
  color: var(--text-color, #33475b);
}

/* Award Note - CSS変数を使用 */
.awards-container .award-note {
  text-align: center;
  line-height: 1.4;
  opacity: 0.8;
  margin-top: 5px;
  max-width: 250px;
  font-size: var(--note-font-size, 12px);
  color: var(--text-color, #33475b);
}

/* Responsive Design */
@media (max-width: 768px) {
  .awards-container {
    flex-direction: column;
    align-items: center;
    gap: 25px;
    padding: 30px 15px;
  }
  
  .award-item {
    max-width: 300px;
    width: 100%;
  }
  
  .laurel-left,
  .laurel-right {
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 480px) {
  .award-graphic {
    margin-bottom: 12px;
  }
  
  .laurel-left,
  .laurel-right {
    width: 50px;
    height: 50px;
  }
  
  .award-content {
    margin: 0 10px;
  }
}

‍

Javascript

FAQ

How do I configure this module to display "Over 100 Case Studies"?

In the awards group, you would set the fields as follows: Award Label: Case Studies Award Number: 100 Award Unit: Over (or +) Award Note: (Enter any supplemental text as needed) (Note: The exact input for Award Unit might be "Over" or "Units+" depending on how you want to phrase it, e.g., "100+" or "Over 100".)

Is there a limit to the number of achievements (items displayed side-by-side) I can show?

Yes, there is. According to the JSON definition in this article (the occurrence setting), you can configure a minimum of 1 and a maximum of 10 achievement items.

Can I enter text like "AAA+" or "No.1" into the "Award Number" field instead of just a number like "100"?

Yes, you can. If you look at the JSON definition, the type for the "Award Number" field is set as text, not number. Therefore, you can flexibly enter achievements that include text, such as "AAA+" or "No.1," not just pure numbers like "100."

Search

Search more

Related Template

Need Customization?

We can customize this sample to match your specific business requirements.

Book Free Consultation

Got a quick dev request?

Put it on Trello!Need a fix for HubSpot, CMS, or GAS? Post it on Trello.

Development Requests Here