Values and Icons BarValues and Icons Bar
SVG IconsText Only
← Back to Sections

Values and Icons Bar

A clean, professional section for showcasing your brand's core values or key features with customizable icons and text. Perfect for highlighting what makes your business unique - whether it's "Free Shipping," "24/7 Support," "Quality Guaranteed," or your company's mission statements.

Key Features:

  • Display up to 4 values/features in a responsive grid layout
  • Fully customizable inline SVG icons (Lucide-compatible) with color controls
  • Rich text support for formatted descriptions
  • Responsive typography that scales beautifully on all devices
  • Flexible styling options: use your theme's colors or apply custom branding
  • Mobile-optimized layout that stacks vertically on smaller screens

Perfect for: Trust badges, brand values, service highlights, company principles, or any content that combines icons with descriptive text.

{%- style -%}
.section-{{ section.id }} {
  {% if section.settings.use_custom_colors %}
    background-color: {{ section.settings.background_color }};
    color: {{ section.settings.text_color }};
  {% else %}
    color: rgb(var(--color-foreground));
  {% endif %}
  border-top: {{ section.settings.top_border_thickness }}px solid {{ section.settings.top_border_color }};
  border-bottom: {{ section.settings.bottom_border_thickness }}px solid {{ section.settings.bottom_border_color }};
  {% if section.settings.background_image != blank %}
    background-image: url({{ section.settings.background_image | img_url: 'original' }});
    background-size: cover;
    background-position-y: {{ section.settings.background_image_vertical_position }}%;
    {% if section.settings.background_image_opacity < 100 %}
      position: relative;
    {% endif %}
  {% endif %}
}

{% if section.settings.background_image != blank and section.settings.background_image_opacity < 100 %}
.section-{{ section.id }}::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: {{ section.settings.background_color | default: '#ffffff' }};
  opacity: {{ 100 | minus: section.settings.background_image_opacity | divided_by: 100.0 }};
  pointer-events: none;
}
{% endif %}

.section-{{ section.id }} .bc-values-and-icons {
  padding-top: {{ section.settings.padding_top }}px;
  padding-bottom: {{ section.settings.padding_bottom }}px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}

.section-{{ section.id }} .bc-value {
  display: flex;
  grid-column-gap: {{ section.settings.text_image_spacing }}px;
  align-items: center;
}

.section-{{ section.id }} .bc-value-div {
  grid-column-gap: {{ section.settings.column_spacing }}px;
  align-items: center;
  display: flex;
}

.section-{{ section.id }} .bc-icon {
  width: {{ section.settings.icons_size }}px;
  height: {{ section.settings.icons_size }}px;
  {% if section.settings.use_custom_colors %}
    color: {{ section.settings.icons_color }};
  {% else %}
    color: rgb(var(--color-foreground));
  {% endif %}
}

.section-{{ section.id }} .bc-value-text {
  font-size: clamp({{ section.settings.text_size | times: section.settings.mobile_scale_ratio }}rem, 5vw, {{ section.settings.text_size }}rem);
  line-height: {{ section.settings.text_line_height }};
  max-width: {{ section.settings.text_max_width }}ch;
  {% unless section.settings.use_custom_colors %}
    color: rgb(var(--color-foreground));
  {% endunless %}
}

.section-{{ section.id }} .bc-value-text * {
  font-size: clamp({{ section.settings.text_size | times: section.settings.mobile_scale_ratio }}rem, 5vw, {{ section.settings.text_size }}rem) !important;
  line-height: {{ section.settings.text_line_height }};
  max-width: {{ section.settings.text_max_width }}ch;
}

.section-{{ section.id }} p {
  text-align: center;
}

.section-{{ section.id }} .bc-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.section-{{ section.id }} .bc-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
  
@media screen and (max-width: 991px) {
  .section-{{ section.id }} .bc-values-and-icons {
    grid-auto-columns: 1fr;
    padding-top: {{ section.settings.mobile_padding_top }}px;
    padding-bottom: {{ section.settings.mobile_padding_bottom }}px;
  }

  .section-{{ section.id }} .bc-value-div {
    grid-column-gap: {{ section.settings.column_spacing | times: 0.5 | round: 0 }}px;
    flex-direction: column;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .section-{{ section.id }} .bc-value {
    flex-direction: column;
    margin-bottom: 50px;
  }

  .section-{{ section.id }} .bc-icon {
    width: {{ section.settings.icons_size | times: 1.5 | round: 0 }}px;
    height: {{ section.settings.icons_size | times: 1.5 | round: 0 }}px;
    margin-bottom: 25px;
  }

  .section-{{ section.id }} .bc-value-text {
    text-align: center;
  }
}

@media screen and (max-width: 767px) {
  .section-{{ section.id }} .bc-values-and-icons {
    min-height: auto;
    padding-left: 45px;
    padding-right: 45px;
  }

  .section-{{ section.id }} .bc-value-div {
    grid-column-gap: {{ section.settings.column_spacing | times: 0.35 | round: 0 }}px;
  }

  .section-{{ section.id }} .bc-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 10px;
  }

  .section-{{ section.id }} .bc-value {
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 479px) {
  .section-{{ section.id }} .bc-values-and-icons {
    grid-row-gap: 54px;
    grid-template-columns: 1fr;
    padding-left: 45px;
    padding-right: 45px;
  }
}
{%- endstyle -%}

{% comment %} Designed and Developed by Bungalow Creative. Get sections like these at The Section Studio https://bungalowcreative.co/pages/the-section-studio {% endcomment %}

<section class="section-{{ section.id }}{% unless section.settings.use_custom_colors %} color-{{ section.settings.color_scheme }}{% endunless %}">
  <div class="bc-values-and-icons">
    <div class="bc-value-div">
      {%- for block in section.blocks -%}
        {%- case block.type -%}
          {%- when 'value' -%}
            <div class="bc-value" {{ block.shopify_attributes }}>
              <div class="bc-icon" style="color: {{ block.settings.icon_color }};">
                {% if block.settings.icon_image != blank %}
                  <img src="{{ block.settings.icon_image | img_url: 'original' }}" alt="{{ block.settings.icon_image_alt | default: 'Icon' }}" loading="lazy">
                {% else %}
                  {{ block.settings.icon_svg }}
                {% endif %}
              </div>
              <div class="bc-value-text">
                {{ block.settings.text_content | default: '<p>Brand Value Goes Here</p>' }}
              </div>
            </div>
        {%- endcase -%}
      {%- endfor -%}
    </div>
  </div>
</section>

{% schema %}
{
  "name": "BC Values and Icons",
  "max_blocks": 4,
  "settings": [
    {
      "type": "header",
      "content": "Colors"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "Color Scheme",
      "default": "scheme-1"
    },
    {
      "type": "checkbox",
      "id": "use_custom_colors",
      "label": "Use custom colors instead of a Dawn color scheme",
      "default": false
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "top_border_color",
      "label": "Top Border Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "bottom_border_color",
      "label": "Bottom Border Color",
      "default": "#000000"
    },
    {
      "type": "header",
      "content": "Section Settings"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 150,
      "step": 5,
      "unit": "px",
      "label": "Padding Top",
      "default": 50
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 150,
      "step": 5,
      "unit": "px",
      "label": "Padding Bottom",
      "default": 50
    },
    {
      "type": "range",
      "id": "top_border_thickness",
      "label": "Top Border Thickness",
      "min": 0,
      "max": 30,
      "step": 1,
      "default": 0,
      "unit": "px",
      "info": "Set to 0 to hide border. If section above has a bottom border applied, do not use."
    },
    {
      "type": "range",
      "id": "bottom_border_thickness",
      "label": "Bottom Border Thickness",
      "min": 0,
      "max": 30,
      "step": 1,
      "default": 0,
      "unit": "px",
      "info": "Set to 0 to hide border. If section above has a bottom border applied, do not use."
    },
    {
      "type": "image_picker",
      "id": "background_image",
      "label": "Background Image",
      "info": "Recommended width 2200px."
    },
    {
      "type": "range",
      "id": "background_image_opacity",
      "label": "Background Image Opacity",
      "min": 10,
      "max": 100,
      "step": 5,
      "unit": "%",
      "default": 100
    },
    {
      "type": "range",
      "id": "background_image_vertical_position",
      "label": "Background Image Vertical Position",
      "min": 0,
      "max": 100,
      "step": 1,
      "default": 50,
      "unit": "%"
    },
    {
      "type": "header",
      "content": "Text"
    },
    {
      "type": "range",
      "id": "text_size",
      "label": "Text Font Size",
      "min": 0.5,
      "max": 8,
      "step": 0.1,
      "default": 1.2,
      "unit": "rem",
      "info": "Font size in rem units (good for accessibility)."
    },
    {
      "type": "range",
      "id": "text_line_height",
      "label": "Text Line Height",
      "min": 1,
      "max": 2,
      "step": 0.1,
      "default": 1.4
    },
    {
      "type": "range",
      "id": "text_max_width",
      "label": "Text Max Width",
      "min": 10,
      "max": 100,
      "step": 1,
      "default": 50,
      "unit": "ch"
    },
    {
      "type": "range",
      "id": "mobile_scale_ratio",
      "label": "Mobile Scale Ratio",
      "min": 0.5,
      "max": 1,
      "step": 0.1,
      "default": 0.8,
      "unit": "Γ—",
      "info": "Controls how much ALL text shrinks on smaller screens"
    },
    {
      "type": "range",
      "id": "text_image_spacing",
      "label": "Text-Image Spacing",
      "min": 10,
      "max": 50,
      "step": 5,
      "default": 20,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "column_spacing",
      "label": "Column Spacing",
      "min": 10,
      "max": 120,
      "step": 5,
      "default": 60,
      "unit": "px"
    },
    {
      "type": "header",
      "content": "Media"
    },
    {
      "type": "range",
      "id": "icons_size",
      "label": "Icons Size",
      "min": 16,
      "max": 100,
      "step": 2,
      "default": 32,
      "unit": "px"
    },
    {
      "type": "header",
      "content": "Mobile Settings"
    },
    {
      "type": "range",
      "id": "mobile_padding_top",
      "min": 0,
      "max": 150,
      "step": 5,
      "unit": "px",
      "label": "Mobile Padding Top",
      "default": 40
    },
    {
      "type": "range",
      "id": "mobile_padding_bottom",
      "min": 0,
      "max": 150,
      "step": 5,
      "unit": "px",
      "label": "Mobile Padding Bottom",
      "default": 40
    }
  ],
  "blocks": [
    {
      "name": "Value",
      "type": "value",
      "settings": [
        {
          "type": "image_picker",
          "id": "icon_image",
          "label": "Icon Image (Optional)",
          "info": "Upload an image to use as the icon. This takes precedence over SVG code if both are provided."
        },
        {
          "type": "text",
          "id": "icon_image_alt",
          "label": "Icon Image Alt Text",
          "placeholder": "e.g. Shipping icon"
        },
        {
          "type": "textarea",
          "id": "icon_svg",
          "label": "SVG Icon Code",
          "info": "Paste the inline SVG code here. You can copy icons directly from https://lucide.dev/icons using the 'Copy SVG' button. Make sure the SVG uses 'stroke=\"currentColor\"' or 'fill=\"currentColor\"' so the color setting works."
        },
        {
          "type": "color",
          "id": "icon_color",
          "label": "Icon Color",
          "default": "#000000"
        },
        {
          "type": "richtext",
          "id": "text_content",
          "label": "Text Content",
          "default": "<p>Brand Value Goes Here</p>"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "BC Values and Icons"
    }
  ]
}
{% endschema %}