← Back to Sections
BC Icons and Image
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 3 values/features in a responsive grid layout with a prominent hero image or video
- Fully customizable inline SVG icons (Lucide-compatible) with color controls, or upload custom icon images
- Rich text support for both headings and descriptions with extensive typography controls
- Hero media section supporting both images and videos with opacity controls and customizable dimensions
- Responsive typography that scales beautifully on all devices with mobile-specific scaling ratios
- Flexible styling options: use your theme's colors or apply complete custom branding including borders
- Mobile-optimized layout that transforms to a 2x2 grid on tablets and stacks vertically on phones
- Optional call-to-action button with custom styling or theme integration
- Adjustable content card width and comprehensive padding controls for perfect spacing
Perfect for: Trust badges, brand values, service highlights, company principles, product feature showcases, or any content that combines compelling visuals with icon-supported descriptive text in a premium card layout.
{%- 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 %}
padding: {{ section.settings.padding_top }}px {{ section.settings.padding_horizontal_desktop }}px {{ section.settings.padding_bottom }}px {{ section.settings.padding_horizontal_desktop }}px;
{% if section.settings.top_border_thickness > 0 %}
border-top: {{ section.settings.top_border_thickness }}px solid {{ section.settings.top_border_color }};
{% endif %}
{% if section.settings.bottom_border_thickness > 0 %}
border-bottom: {{ section.settings.bottom_border_thickness }}px solid {{ section.settings.bottom_border_color }};
{% endif %}
}
.section-{{ section.id }} .bc-main-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.section-{{ section.id }} .bc-content-card {
background-color: {{ section.settings.inner_background_color }};
border-radius: 22px;
display: flex;
flex-direction: column;
align-items: stretch;
position: relative;
max-width: {{ section.settings.content_card_max_width }}px;
}
.section-{{ section.id }} .bc-main-image {
max-height: {{ section.settings.main_media_height }}px;
width: 100%;
object-fit: cover;
border-top-left-radius: 22px;
border-top-right-radius: 22px;
opacity: {{ section.settings.image_opacity }}%;
display: block;
}
.section-{{ section.id }} .bc-main-video {
max-height: {{ section.settings.main_media_height }}px;
width: 100%;
object-fit: cover;
border-top-left-radius: 22px;
border-top-right-radius: 22px;
opacity: {{ section.settings.video_opacity }}%;
display: block;
}
.section-{{ section.id }} .bc-bottom-section {
display: flex;
justify-content: space-between;
gap: 40px;
padding: 40px;
}
.section-{{ section.id }} .bc-value-column {
width: 25%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.section-{{ section.id }} .bc-icon {
width: {{ section.settings.icon_size }}px;
color: {{ section.settings.icon_color }};
}
.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;
}
.section-{{ section.id }} .bc-value-heading * {
font-size: clamp({{ section.settings.value_heading_size | times: section.settings.value_heading_mobile_scale_ratio }}rem, 4vw, {{ section.settings.value_heading_size }}rem) !important;
line-height: {{ section.settings.value_heading_line_height }};
max-width: {{ section.settings.value_heading_max_width }}ch;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.section-{{ section.id }} .bc-value-text * {
font-size: clamp({{ section.settings.value_text_size | times: section.settings.value_text_mobile_scale_ratio }}rem, 4vw, {{ section.settings.value_text_size }}rem) !important;
line-height: {{ section.settings.value_text_line_height }};
max-width: {{ section.settings.value_text_max_width }}ch;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.section-{{ section.id }} .button {
position: absolute;
top: 25px;
right: 25px;
}
{% if section.settings.use_custom_button_style %}
.section-{{ section.id }} .bc-button {
padding: {{ section.settings.button_padding_top }}px {{ section.settings.button_padding_horizontal }}px {{ section.settings.button_padding_bottom }}px {{ section.settings.button_padding_horizontal }}px;
background-color: {{ section.settings.button_background_color }};
color: {{ section.settings.button_text_color }};
border: {{ section.settings.button_border_width }}px solid {{ section.settings.button_border_color }};
border-radius: {{ section.settings.button_border_radius }}px;
text-decoration: none;
display: inline-block;
transition: background-color 0.3s ease;
}
.section-{{ section.id }} .bc-button:hover {
background-color: {{ section.settings.button_hover_background_color }};
}
{% endif %}
@media screen and (max-width: 991px) {
.section-{{ section.id }} {
padding-left: {{ section.settings.padding_horizontal_tablet }}px;
padding-right: {{ section.settings.padding_horizontal_tablet }}px;
}
.section-{{ section.id }} .bc-bottom-section {
gap: 30px;
padding: 20px;
}
.section-{{ section.id }} .bc-value-column {
width: unset !important;
}
}
@media screen and (max-width: 767px) {
.section-{{ section.id }} {
padding-left: {{ section.settings.padding_horizontal_mobile }}px;
padding-right: {{ section.settings.padding_horizontal_mobile }}px;
}
.section-{{ section.id }} .bc-main-image {
max-height: {{ section.settings.main_media_height | times: 0.7 | round }}px;
min-height: {{ section.settings.main_media_height | times: 0.7 | round }}px;
}
.section-{{ section.id }} .bc-main-video {
max-height: {{ section.settings.main_media_height | times: 0.7 | round }}px;
min-height: {{ section.settings.main_media_height | times: 0.7 | round }}px;
}
.section-{{ section.id }} .bc-bottom-section {
flex-direction: column;
gap: 40px;
padding: 40px;
display: grid;
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
}
.section-{{ section.id }} .bc-value-column {
width: 100%;
}
}
@media screen and (max-width: 479px) {
.section-{{ section.id }} .bc-main-image {
max-height: {{ section.settings.main_media_height | times: 0.6 | round }}px;
min-height: {{ section.settings.main_media_height | times: 0.6 | round }}px;
}
.section-{{ section.id }} .bc-main-video {
max-height: {{ section.settings.main_media_height | times: 0.6 | round }}px;
min-height: {{ section.settings.main_media_height | times: 0.6 | round }}px;
}
.section-{{ section.id }} .bc-bottom-section {
padding: 40px;
display: flex;
}
}
{%- endstyle -%}
{% comment %} Designed and Developed by Bungalow Creative. Get sections like these at The Section Studio https://bungalowcreative.co/pages/the-section-studio {% endcomment %}
<div class="section-{{ section.id }}{% unless section.settings.use_custom_colors %} color-{{ section.settings.color_scheme }}{% endunless %}">
<div class="bc-main-wrapper">
<div class="bc-content-card">
{% if section.settings.main_video != blank %}
{{
section.settings.main_video
| video_tag:
controls: false,
autoplay: true,
loop: true,
muted: true,
preload: 'auto',
class: 'bc-main-video',
loading: section.settings.image_loading
}}
{% elsif section.settings.main_image != blank %}
{{
section.settings.main_image
| image_url: width: 1200
| image_tag:
alt: section.settings.main_image_alt,
class: 'bc-main-image',
loading: section.settings.image_loading
}}
{% else %}
<div style="background-color: #f5f5f5; height: 400px; display: flex; align-items: center; justify-content: center; border-top-left-radius: 22px; border-top-right-radius: 22px;">
<p>Add an image or video</p>
</div>
{% endif %}
<div class="bc-bottom-section">
{% for i in (1..3) %}
{% assign icon_image_setting = 'icon_image_' | append: i %}
{% assign icon_image_alt_setting = 'icon_image_alt_' | append: i %}
{% assign icon_svg_setting = 'icon_svg_' | append: i %}
{% assign value_heading_setting = 'value_heading_' | append: i %}
{% assign value_text_setting = 'value_text_' | append: i %}
<div class="bc-value-column">
<div class="bc-icon" style="color: {{ section.settings.icon_color }};">
{% if section.settings[icon_image_setting] != blank %}
<img
src="{{ section.settings[icon_image_setting] | image_url: 'original' }}"
alt="{{ section.settings[icon_image_alt_setting] | default: 'Icon' }}"
loading="lazy"
>
{% elsif section.settings[icon_svg_setting] != blank %}
{{ section.settings[icon_svg_setting] }}
{% endif %}
</div>
<div class="bc-value-heading">
{{ section.settings[value_heading_setting] | default: '<h3>Your Heading Goes Here</h3>' }}
</div>
<div class="bc-value-text">
{{
section.settings[value_text_setting]
| default: '<p>Add your description text here to explain this value or benefit.</p>'
}}
</div>
</div>
{% endfor %}
</div>
{% if section.settings.button_link != blank %}
<a
href="{{ section.settings.button_link }}"
class="button{% if section.settings.use_theme_button_class %} {{ section.settings.theme_button_class }}{% endif %}{% if section.settings.use_custom_button_style %} bc-button{% endif %}"
>
{{ section.settings.button_text | default: 'Click me' }}
</a>
{% endif %}
</div>
</div>
</div>
{% schema %}
{
"name": "BC Icons and Image",
"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": "inner_background_color",
"label": "Inner Card Background Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "icon_color",
"label": "Icon Color",
"default": "#000000"
},
{
"type": "color",
"id": "button_background_color",
"label": "Button Background Color",
"default": "#000000"
},
{
"type": "color",
"id": "button_text_color",
"label": "Button Text Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "button_hover_background_color",
"label": "Button Hover Background Color",
"default": "#333333"
},
{
"type": "color",
"id": "button_border_color",
"label": "Button Border 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": "content_card_max_width",
"label": "Content Card Maximum Width",
"min": 400,
"max": 1600,
"step": 50,
"default": 1000,
"unit": "px"
},
{
"type": "range",
"id": "padding_top",
"label": "Top Padding",
"min": 0,
"max": 150,
"step": 5,
"default": 80,
"unit": "px"
},
{
"type": "range",
"id": "padding_bottom",
"label": "Bottom Padding",
"min": 0,
"max": 150,
"step": 5,
"default": 80,
"unit": "px"
},
{
"type": "range",
"id": "padding_horizontal_desktop",
"label": "Horizontal Padding (Desktop)",
"min": 0,
"max": 150,
"step": 5,
"default": 50,
"unit": "px"
},
{
"type": "range",
"id": "padding_horizontal_tablet",
"label": "Horizontal Padding (Tablet)",
"min": 0,
"max": 150,
"step": 5,
"default": 40,
"unit": "px"
},
{
"type": "range",
"id": "padding_horizontal_mobile",
"label": "Horizontal Padding (Mobile)",
"min": 0,
"max": 150,
"step": 5,
"default": 10,
"unit": "px"
},
{
"type": "range",
"id": "top_border_thickness",
"label": "Top Border Thickness",
"min": 0,
"max": 20,
"step": 1,
"default": 0,
"unit": "px"
},
{
"type": "range",
"id": "bottom_border_thickness",
"label": "Bottom Border Thickness",
"min": 0,
"max": 20,
"step": 1,
"default": 0,
"unit": "px"
},
{
"type": "range",
"id": "icon_size",
"label": "Icon Size",
"min": 12,
"max": 200,
"step": 4,
"default": 28,
"unit": "px"
},
{
"type": "header",
"content": "Text Content"
},
{
"type": "richtext",
"id": "value_heading_1",
"label": "Value 1 Heading",
"default": "<h3>Value 1</h3>"
},
{
"type": "richtext",
"id": "value_text_1",
"label": "Value 1 Text",
"default": "<p>Add your description text here to explain this value or benefit.</p>"
},
{
"type": "richtext",
"id": "value_heading_2",
"label": "Value 2 Heading",
"default": "<h3>Value 2</h3>"
},
{
"type": "richtext",
"id": "value_text_2",
"label": "Value 2 Text",
"default": "<p>Add your description text here to explain this value or benefit.</p>"
},
{
"type": "richtext",
"id": "value_heading_3",
"label": "Value 3 Heading",
"default": "<h3>Value 3</h3>"
},
{
"type": "richtext",
"id": "value_text_3",
"label": "Value 3 Text",
"default": "<p>Add your description text here to explain this value or benefit.</p>"
},
{
"type": "header",
"content": "Typography - Value Headings"
},
{
"type": "range",
"id": "value_heading_size",
"label": "Value Heading Font Size",
"min": 0.5,
"max": 8,
"step": 0.1,
"default": 1.6,
"unit": "rem",
"info": "Font size in rem units (good for accessibility)"
},
{
"type": "range",
"id": "value_heading_line_height",
"label": "Value Heading Line Height",
"min": 1,
"max": 2,
"step": 0.1,
"default": 1.4
},
{
"type": "range",
"id": "value_heading_max_width",
"label": "Value Heading Max Width",
"min": 10,
"max": 100,
"step": 1,
"default": 50,
"unit": "ch"
},
{
"type": "range",
"id": "value_heading_mobile_scale_ratio",
"label": "Value Heading Mobile Scale Ratio",
"min": 0.5,
"max": 1,
"step": 0.1,
"default": 0.7,
"unit": "×",
"info": "Controls how much text shrinks on smaller screens"
},
{
"type": "header",
"content": "Typography - Value Text"
},
{
"type": "range",
"id": "value_text_size",
"label": "Value Text Font Size",
"min": 0.5,
"max": 8,
"step": 0.1,
"default": 1.4,
"unit": "rem",
"info": "Font size in rem units (good for accessibility)"
},
{
"type": "range",
"id": "value_text_line_height",
"label": "Value Text Line Height",
"min": 1,
"max": 2,
"step": 0.1,
"default": 1.5
},
{
"type": "range",
"id": "value_text_max_width",
"label": "Value Text Max Width",
"min": 10,
"max": 100,
"step": 1,
"default": 60,
"unit": "ch"
},
{
"type": "range",
"id": "value_text_mobile_scale_ratio",
"label": "Value Text Mobile Scale Ratio",
"min": 0.5,
"max": 1,
"step": 0.1,
"default": 1,
"unit": "×",
"info": "Controls how much text shrinks on smaller screens"
},
{
"type": "header",
"content": "Media"
},
{
"type": "image_picker",
"id": "main_image",
"label": "Main Image"
},
{
"type": "text",
"id": "main_image_alt",
"label": "Main Image Alt Text",
"placeholder": "Describe the image"
},
{
"type": "video",
"id": "main_video",
"label": "Main Video (Optional)",
"info": "Video takes precedence over image if both are provided"
},
{
"type": "range",
"id": "main_media_height",
"label": "Media Height",
"min": 200,
"max": 800,
"step": 50,
"default": 550,
"unit": "px",
"info": "Controls the height of both images and videos"
},
{
"type": "range",
"id": "image_opacity",
"label": "Image Opacity",
"min": 10,
"max": 100,
"step": 5,
"unit": "%",
"default": 100
},
{
"type": "range",
"id": "video_opacity",
"label": "Video Opacity",
"min": 10,
"max": 100,
"step": 5,
"unit": "%",
"default": 100
},
{
"type": "select",
"id": "image_loading",
"label": "Image Loading",
"options": [
{
"value": "lazy",
"label": "Lazy"
},
{
"value": "eager",
"label": "Eager"
}
],
"default": "lazy"
},
{
"type": "header",
"content": "Icons - Value 1"
},
{
"type": "image_picker",
"id": "icon_image_1",
"label": "Icon 1 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_1",
"label": "Icon 1 Image Alt Text",
"placeholder": "e.g. Shipping icon"
},
{
"type": "textarea",
"id": "icon_svg_1",
"label": "Icon 1 SVG 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": "header",
"content": "Icons - Value 2"
},
{
"type": "image_picker",
"id": "icon_image_2",
"label": "Icon 2 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_2",
"label": "Icon 2 Image Alt Text",
"placeholder": "e.g. Quality icon"
},
{
"type": "textarea",
"id": "icon_svg_2",
"label": "Icon 2 SVG 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": "header",
"content": "Icons - Value 3"
},
{
"type": "image_picker",
"id": "icon_image_3",
"label": "Icon 3 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_3",
"label": "Icon 3 Image Alt Text",
"placeholder": "e.g. Speed icon"
},
{
"type": "textarea",
"id": "icon_svg_3",
"label": "Icon 3 SVG 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": "header",
"content": "Buttons"
},
{
"type": "text",
"id": "button_text",
"label": "Button Text",
"default": "Shop Now",
"placeholder": "Shop Now"
},
{
"type": "url",
"id": "button_link",
"label": "Button Link"
},
{
"type": "checkbox",
"id": "use_theme_button_class",
"label": "Use theme button styling",
"info": "Only enable this if your theme uses a different class than 'button' for its primary buttons."
},
{
"type": "text",
"id": "theme_button_class",
"label": "Theme button class",
"info": "Enter your theme's main button class (e.g. 'btn', 'primary-button') if it's not 'button'.",
"placeholder": "e.g. btn btn--primary"
},
{
"type": "checkbox",
"id": "use_custom_button_style",
"label": "Use custom button styling",
"info": "Enable this to apply custom styles (padding, colors, radius, etc.) to this section's buttons."
},
{
"type": "range",
"id": "button_padding_top",
"label": "Button Top Padding",
"min": 0,
"max": 50,
"step": 1,
"default": 12,
"unit": "px"
},
{
"type": "range",
"id": "button_padding_bottom",
"label": "Button Bottom Padding",
"min": 0,
"max": 50,
"step": 1,
"default": 12,
"unit": "px"
},
{
"type": "range",
"id": "button_padding_horizontal",
"label": "Button Horizontal Padding",
"min": 0,
"max": 50,
"step": 1,
"default": 24,
"unit": "px"
},
{
"type": "range",
"id": "button_border_radius",
"label": "Button Border Radius",
"min": 0,
"max": 50,
"step": 1,
"default": 4,
"unit": "px"
},
{
"type": "range",
"id": "button_border_width",
"label": "Button Border Width",
"min": 0,
"max": 10,
"step": 1,
"default": 0,
"unit": "px"
}
],
"presets": [
{
"name": "BC Icons and Image"
}
]
}
{% endschema %}
