[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

Related Template

Need Customization?

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

Book Free Consultation