← Back to Sections
BC Numbered Steps
A numbered steps section designed to guide customers through your process, from initial contact to final delivery. Perfect for showcasing how your service works, explaining your methodology, or breaking down complex procedures into digestible phases.
Key Features:
- Display up to any number of sequential steps with automatic numbering
- Large, prominent numbers styled as H2 headings for maximum visual impact
- Rich text support for detailed step descriptions and formatting
- Responsive typography using clamp() for perfect scaling across all devices
- Elegant gap-based spacing system for clean, professional layout
- Optional section header to introduce your process
- Mobile-optimized design that transitions from horizontal to vertical stacking
- Full color scheme integration with custom color override options
- Comprehensive padding and spacing controls for precise layout control
Perfect for: Service processes, how-it-works sections, onboarding flows, project timelines, installation guides, or any multi-step procedure that benefits from clear numerical progression.
{%- 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 %}
justify-content: center;
align-items: center;
padding: {{ section.settings.desktop_padding_top }}px {{ section.settings.desktop_padding_horizontal }}px {{ section.settings.desktop_padding_bottom }}px {{ section.settings.desktop_padding_horizontal }}px;
display: flex;
flex-direction: {% if section.settings.show_header %}column{% else %}row{% endif %};
overflow: hidden;
border-top: {{ section.settings.border_top_thickness }}px solid {{ section.settings.border_color }};
border-bottom: {{ section.settings.border_bottom_thickness }}px solid {{ section.settings.border_color }};
}
.section-{{ section.id }} .bc-section-header * {
font-size: clamp({{ section.settings.header_size | times: section.settings.header_mobile_scale_ratio }}rem, 4vw, {{ section.settings.header_size }}rem) !important;
line-height: {{ section.settings.header_line_height }};
max-width: {{ section.settings.header_max_width }}ch;
margin-top: 0 !important;
margin-bottom: 0 !important;
text-align: center;
width: 100%;
}
.section-{{ section.id }} .bc-steps-container {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
gap: {{ section.settings.column_gap }}px;
}
.section-{{ section.id }} .bc-step-column {
width: 25%;
padding: {{ section.settings.column_vertical_padding }}px 0;
display: flex;
gap: {{ section.settings.content_gap }}px;
}
.section-{{ section.id }} .bc-step-number {
font-size: clamp({{ section.settings.number_size | times: section.settings.number_mobile_scale_ratio }}rem, 4vw, {{ section.settings.number_size }}rem);
line-height: {{ section.settings.number_line_height }};
max-width: {{ section.settings.number_max_width }}ch;
align-self: center;
color: {{ section.settings.number_color }};
margin-top: 0;
margin-bottom: 0;
}
.section-{{ section.id }} .bc-step-number * {
font-size: inherit !important;
line-height: inherit !important;
max-width: inherit !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.section-{{ section.id }} .bc-step-text * {
font-size: clamp({{ section.settings.text_size | times: section.settings.text_mobile_scale_ratio }}rem, 4vw, {{ section.settings.text_size }}rem) !important;
line-height: {{ section.settings.text_line_height }};
max-width: {{ section.settings.text_max_width }}ch;
align-self: center;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
@media screen and (max-width: 991px) {
.section-{{ section.id }} {
padding: {{ section.settings.tablet_padding_top }}px {{ section.settings.tablet_padding_horizontal }}px {{ section.settings.tablet_padding_bottom }}px {{ section.settings.tablet_padding_horizontal }}px;
}
.section-{{ section.id }} .bc-steps-container {
grid-template-rows: auto auto;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 1fr;
display: grid;
gap: {{ section.settings.tablet_column_gap }}px;
}
.section-{{ section.id }} .bc-step-column {
width: 100%;
}
}
@media screen and (max-width: 767px) {
.section-{{ section.id }} {
padding: {{ section.settings.mobile_padding_top }}px {{ section.settings.mobile_padding_horizontal }}px {{ section.settings.mobile_padding_bottom }}px {{ section.settings.mobile_padding_horizontal }}px;
}
.section-{{ section.id }} .bc-step-column {
padding: {{ section.settings.mobile_column_vertical_padding }}px 0;
flex-direction: column;
}
.section-{{ section.id }} .bc-steps-container {
grid-template-columns: 1fr;
gap: {{ section.settings.mobile_column_gap }}px;
}
.section-{{ section.id }} .bc-step-text * {
text-align: center !important;
}
}
{%- endstyle -%}
<div class="section-{{ section.id }}{% unless section.settings.use_custom_colors %} color-{{ section.settings.color_scheme }}{% endunless %}">
{% comment %} Designed and Developed by Bungalow Creative. Get sections like these at The Section Studio https://bungalowcreative.co/pages/the-section-studio {% endcomment %}
{% if section.settings.show_header %}
<div class="bc-section-header">{{ section.settings.header_text | default: '<h2>Your Heading Goes Here</h2>' }}</div>
{% endif %}
<div class="bc-steps-container">
{% for block in section.blocks %}
{% if block.type == 'step' %}
<div class="bc-step-column">
<div class="bc-step-number">{{ block.settings.step_number | default: '<h2>01.</h2>' }}</div>
<div class="bc-step-text">
{{ block.settings.step_text | default: '<p>This is some text inside of a div block.</p>' }}
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% schema %}
{
"name": "BC Numbered Steps",
"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": "number_color",
"label": "Number Color",
"default": "#000000"
},
{
"type": "header",
"content": "Section Settings"
},
{
"type": "range",
"id": "desktop_padding_top",
"label": "Desktop Top Padding",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"default": 20
},
{
"type": "range",
"id": "desktop_padding_bottom",
"label": "Desktop Bottom Padding",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"default": 20
},
{
"type": "range",
"id": "desktop_padding_horizontal",
"label": "Desktop Horizontal Padding",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"default": 50
},
{
"type": "range",
"id": "tablet_padding_top",
"label": "Tablet Top Padding",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"default": 20
},
{
"type": "range",
"id": "tablet_padding_bottom",
"label": "Tablet Bottom Padding",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"default": 20
},
{
"type": "range",
"id": "tablet_padding_horizontal",
"label": "Tablet Horizontal Padding",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"default": 40
},
{
"type": "range",
"id": "mobile_padding_top",
"label": "Mobile Top Padding",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"default": 20
},
{
"type": "range",
"id": "mobile_padding_bottom",
"label": "Mobile Bottom Padding",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"default": 20
},
{
"type": "range",
"id": "mobile_padding_horizontal",
"label": "Mobile Horizontal Padding",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"default": 10
},
{
"type": "range",
"id": "column_gap",
"label": "Desktop Column Gap",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"default": 40
},
{
"type": "range",
"id": "tablet_column_gap",
"label": "Tablet Column Gap",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"default": 30
},
{
"type": "range",
"id": "mobile_column_gap",
"label": "Mobile Column Gap",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"default": 20
},
{
"type": "range",
"id": "column_vertical_padding",
"label": "Column Vertical Padding",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"default": 20
},
{
"type": "range",
"id": "mobile_column_vertical_padding",
"label": "Mobile Column Vertical Padding",
"min": 0,
"max": 100,
"step": 5,
"unit": "px",
"default": 20
},
{
"type": "range",
"id": "content_gap",
"label": "Number to Text Gap",
"min": 0,
"max": 50,
"step": 5,
"unit": "px",
"default": 20
},
{
"type": "range",
"id": "border_top_thickness",
"label": "Top Border Thickness",
"min": 0,
"max": 10,
"step": 1,
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "border_bottom_thickness",
"label": "Bottom Border Thickness",
"min": 0,
"max": 10,
"step": 1,
"unit": "px",
"default": 0
},
{
"type": "color",
"id": "border_color",
"label": "Border Color",
"default": "#000000"
},
{
"type": "header",
"content": "Text"
},
{
"type": "checkbox",
"id": "show_header",
"label": "Show Header",
"default": false
},
{
"type": "richtext",
"id": "header_text",
"label": "Header Text",
"default": "<h2>Your Heading Goes Here</h2>"
},
{
"type": "range",
"id": "header_size",
"label": "Header Font Size",
"min": 0.5,
"max": 8,
"step": 0.1,
"default": 5,
"unit": "rem",
"info": "Font size in rem units (good for accessibility)"
},
{
"type": "range",
"id": "header_line_height",
"label": "Header Line Height",
"min": 1,
"max": 2,
"step": 0.1,
"default": 1.4
},
{
"type": "range",
"id": "header_max_width",
"label": "Header Max Width",
"min": 10,
"max": 100,
"step": 1,
"default": 50,
"unit": "ch"
},
{
"type": "range",
"id": "header_mobile_scale_ratio",
"label": "Header Mobile Scale Ratio",
"min": 0.5,
"max": 1,
"step": 0.1,
"default": 0.7,
"unit": "×",
"info": "Controls how much header shrinks on smaller screens"
},
{
"type": "range",
"id": "number_size",
"label": "Number Font Size",
"min": 0.5,
"max": 8,
"step": 0.1,
"default": 4,
"unit": "rem",
"info": "Font size in rem units (good for accessibility)"
},
{
"type": "range",
"id": "number_line_height",
"label": "Number Line Height",
"min": 1,
"max": 2,
"step": 0.1,
"default": 1.4
},
{
"type": "range",
"id": "number_max_width",
"label": "Number Max Width",
"min": 10,
"max": 100,
"step": 1,
"default": 50,
"unit": "ch"
},
{
"type": "range",
"id": "number_mobile_scale_ratio",
"label": "Number Mobile Scale Ratio",
"min": 0.5,
"max": 1,
"step": 0.1,
"default": 0.9,
"unit": "×",
"info": "Controls how much numbers shrink on smaller screens"
},
{
"type": "range",
"id": "text_size",
"label": "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": "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": "text_mobile_scale_ratio",
"label": "Text Mobile Scale Ratio",
"min": 0.5,
"max": 1,
"step": 0.1,
"default": 1,
"unit": "×",
"info": "Controls how much text shrinks on smaller screens"
}
],
"blocks": [
{
"type": "step",
"name": "Step",
"settings": [
{
"type": "richtext",
"id": "step_number",
"label": "Step Number",
"default": "<h2>01.</h2>"
},
{
"type": "richtext",
"id": "step_text",
"label": "Step Text",
"default": "<p>This is some text inside of a div block.</p>"
}
]
}
],
"presets": [
{
"name": "BC Numbered Steps",
"blocks": [
{
"type": "step",
"settings": {
"step_number": "<h2>01.</h2>",
"step_text": "<p>This is some text inside of a div block.</p>"
}
},
{
"type": "step",
"settings": {
"step_number": "<h2>02.</h2>",
"step_text": "<p>This is some text inside of a div block.</p>"
}
},
{
"type": "step",
"settings": {
"step_number": "<h2>03.</h2>",
"step_text": "<p>This is some text inside of a div block.</p>"
}
},
{
"type": "step",
"settings": {
"step_number": "<h2>04.</h2>",
"step_text": "<p>This is some text inside of a div block.</p>"
}
}
]
}
]
}
{% endschema %}
