Feature Grid Components
Showcase of all 6 feature grid variants for features, stats, and process steps.
Variant: icons
Icon circles with heading and description. The default feature display.
Why Choose Us
Features with icon circles
ISO Certified
Quality assured to international standards.
40+ Years
Decades of industry expertise.
UK-Wide
Collection and delivery nationwide.
4.3★ Rated
Highly rated on Google reviews.
{
"component": "feature-grid",
"variant": "icons",
"data": {
"heading": "Why Choose Us",
"subheading": "Features with icon circles",
"columns": 4,
"features": [
{ "icon": "fa-award", "heading": "ISO Certified", "body": "Quality assured to international standards." },
{ "icon": "fa-clock", "heading": "40+ Years", "body": "Decades of industry expertise." },
{ "icon": "fa-truck", "heading": "UK-Wide", "body": "Collection and delivery nationwide." },
{ "icon": "fa-star", "heading": "4.3★ Rated", "body": "Highly rated on Google reviews." }
]
}
}<section class="py-4">
<div class="container">
<div class="text-center mb-5">
<h2 class="mb-3">Why Choose Us</h2>
<p class="lead text-muted">Features with icon circles</p>
</div>
<div class="row g-4">
<div class="col-md-6 col-lg-3">
<div class="text-center">
<div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 50px; height: 50px;">
<i class="fas fa-award text-primary"></i>
</div>
<h5 class="mb-2">ISO Certified</h5>
<p class="small text-dark-muted mb-0">Quality assured to international standards.</p>
</div>
</div>
<!-- Additional features... -->
</div>
</div>
</section>Variant: stats
Large numbers or statistics with labels. Great for impressive figures.
Our Track Record
40+
Years Experience
Since 1978
10K+
Projects Completed
And counting
500+
Happy Clients
Across the UK
4.3
Google Rating
5-star reviews
{
"component": "feature-grid",
"variant": "stats",
"data": {
"heading": "Our Track Record",
"columns": 4,
"features": [
{ "number": "40+", "heading": "Years Experience", "body": "Since 1978" },
{ "number": "10K+", "heading": "Projects Completed", "body": "And counting" },
{ "number": "500+", "heading": "Happy Clients", "body": "Across the UK" },
{ "number": "4.3", "heading": "Google Rating", "body": "5-star reviews" }
],
"bg": "light"
}
}<section class="bg-light py-4">
<div class="container">
<div class="text-center mb-5">
<h2 class="mb-3">Our Track Record</h2>
</div>
<div class="row g-4">
<div class="col-md-6 col-lg-3">
<div class="text-center p-4">
<div class="display-4 text-primary mb-3">40+</div>
<h5 class="mb-2">Years Experience</h5>
<p class="text-dark-muted small mb-0">Since 1978</p>
</div>
</div>
<!-- Additional stats... -->
</div>
</div>
</section>Variant: icon-cards
Icons inside card containers with borders and shadows.
Our Services
Features in elevated cards
Chrome Plating
Mirror-finish chrome for all metal types.
Gold Plating
Luxurious gold finishes for decorative items.
Nickel Plating
Durable nickel for industrial applications.
{
"component": "feature-grid",
"variant": "icon-cards",
"data": {
"heading": "Our Services",
"subheading": "Features in elevated cards",
"columns": 3,
"features": [
{ "icon": "fa-gem", "heading": "Chrome Plating", "body": "Mirror-finish chrome for all metal types." },
{ "icon": "fa-crown", "heading": "Gold Plating", "body": "Luxurious gold finishes for decorative items." },
{ "icon": "fa-shield", "heading": "Nickel Plating", "body": "Durable nickel for industrial applications." }
]
}
}<section class="py-4">
<div class="container">
<div class="text-center mb-5">
<h2 class="mb-3">Our Services</h2>
<p class="lead text-muted">Features in elevated cards</p>
</div>
<div class="row g-4">
<div class="col-md-6 col-lg-4">
<div class="card h-100 text-center p-4">
<div class="card-body">
<div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 50px; height: 50px;">
<i class="fas fa-gem text-primary"></i>
</div>
<h5 class="card-title mb-2">Chrome Plating</h5>
<p class="card-text text-dark-muted small mb-0">Mirror-finish chrome for all metal types.</p>
</div>
</div>
</div>
<!-- Additional cards... -->
</div>
</div>
</section>Variant: process
Numbered process steps. Perfect for explaining workflows.
How It Works
Our simple process
1
Consultation
Discuss your requirements with our experts.
2
Quotation
Receive a detailed written quote.
3
Processing
Expert craftsmen apply your finish.
4
Delivery
Careful packaging and delivery.
{
"component": "feature-grid",
"variant": "process",
"data": {
"heading": "How It Works",
"subheading": "Our simple process",
"columns": 4,
"features": [
{ "number": "1", "heading": "Consultation", "body": "Discuss your requirements with our experts." },
{ "number": "2", "heading": "Quotation", "body": "Receive a detailed written quote." },
{ "number": "3", "heading": "Processing", "body": "Expert craftsmen apply your finish." },
{ "number": "4", "heading": "Delivery", "body": "Careful packaging and delivery." }
],
"bg": "light"
}
}<section class="bg-light py-4">
<div class="container">
<div class="text-center mb-5">
<h2 class="mb-3">How It Works</h2>
<p class="lead text-muted">Our simple process</p>
</div>
<div class="row g-4">
<div class="col-md-6 col-lg-3">
<div class="text-center">
<div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
<span class="text-primary fw-bold fs-4">1</span>
</div>
<h5 class="mb-2">Consultation</h5>
<p class="small text-dark-muted mb-0">Discuss your requirements with our experts.</p>
</div>
</div>
<!-- Additional steps... -->
</div>
</div>
</section>Variant: text-only
Simple text features without icons or numbers. Clean and minimal.
What We Offer
Expert Consultation
Free initial consultation to discuss your requirements.
Quality Finishes
Premium finishes that last for decades.
Fast Turnaround
Quick processing without compromising quality.
{
"component": "feature-grid",
"variant": "text-only",
"data": {
"heading": "What We Offer",
"columns": 3,
"features": [
{ "heading": "Expert Consultation", "body": "Free initial consultation to discuss your requirements." },
{ "heading": "Quality Finishes", "body": "Premium finishes that last for decades." },
{ "heading": "Fast Turnaround", "body": "Quick processing without compromising quality." }
]
}
}<section class="py-4">
<div class="container">
<div class="text-center mb-5">
<h2 class="mb-3">What We Offer</h2>
</div>
<div class="row g-4">
<div class="col-md-6 col-lg-4">
<div>
<h5 class="text-primary mb-2">Expert Consultation</h5>
<p class="text-dark-muted mb-0">Free initial consultation to discuss your requirements.</p>
</div>
</div>
<!-- Additional features... -->
</div>
</div>
</section>Variant: dark-bg
Icons on dark background. High contrast and dramatic.
Premium Features
What sets us apart
Certified Quality
ISO 9001 certified processes.
Trusted Partner
Long-term client relationships.
Expert Team
Skilled craftsmen with decades of experience.
Eco-Friendly
Environmentally responsible practices.
{
"component": "feature-grid",
"variant": "dark-bg",
"data": {
"heading": "Premium Features",
"subheading": "What sets us apart",
"columns": 4,
"features": [
{ "icon": "fa-certificate", "heading": "Certified Quality", "body": "ISO 9001 certified processes." },
{ "icon": "fa-handshake", "heading": "Trusted Partner", "body": "Long-term client relationships." },
{ "icon": "fa-tools", "heading": "Expert Team", "body": "Skilled craftsmen with decades of experience." },
{ "icon": "fa-leaf", "heading": "Eco-Friendly", "body": "Environmentally responsible practices." }
]
}
}<section class="bg-dark py-4">
<div class="container">
<div class="text-center mb-5">
<h2 class="mb-3 text-light-primary">Premium Features</h2>
<p class="lead text-light-muted">What sets us apart</p>
</div>
<div class="row g-4">
<div class="col-md-6 col-lg-3">
<div class="text-center">
<div class="bg-primary bg-opacity-25 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 50px; height: 50px;">
<i class="fas fa-certificate text-warning"></i>
</div>
<h5 class="mb-2 text-light-primary">Certified Quality</h5>
<p class="small text-light-muted mb-0">ISO 9001 certified processes.</p>
</div>
</div>
<!-- Additional features... -->
</div>
</div>
</section>