Features Section Block | Custom Cap BD

Overview

The Features Section Block allows you to create eye-catching feature grids on your homepage. Each block can contain up to 8 features with titles, descriptions, and icons.

Creating a Features Block

Via Sanity Studio

Navigate to /studio in your browser
Go to Homepage Blocks in the sidebar
Click Create → Features Section Block
Fill in the block details:

Block Settings

Block Name - Internal name for organization (e.g., "Why Choose Us")
Section Title - Optional heading displayed above features
Section Description - Optional subtitle text

Adding Features

Click Add Feature to create feature cards (1-8 features recommended):

Feature Title - Main heading (e.g., "24/7 Support")
Feature Description - Explanation text (2-3 sentences)
Lucide Icon Name - Icon to display (see icon list below)

Styling Options

Background Color - Custom background for the entire section
Text Color - Override default text color
Display Order - Position on homepage (lower numbers first)
Visible - Show/hide the block
Full Width - Recommended: true for features sections

Click Publish when done

Via Admin UI

Navigate to /admin/ui-config/homepage
Find your features block in the list
Click Edit button
Modify section header and features
Click Save Changes

Icon Selection

Features use Lucide Icons. Enter the icon name exactly as shown on their website.

Popular Icons

Icon Name	Best For
`Terminal`	Development, Technical features
`Heart`	Customer care, Community
`Cloud`	Cloud services, Storage
`DollarSign`	Pricing, Value propositions
`Zap`	Speed, Performance
`Shield`	Security, Protection
`Users`	Team, Community
`Settings`	Customization, Configuration
`Headphones`	Support, Help
`TrendingUp`	Growth, Analytics

Browse all 1,000+ icons at lucide.dev/icons

Best Practices

Layout Recommendations

4 Features - Classic grid (2x2 on desktop)
6 Features - Extended grid (3x2)
8 Features - Full grid (4x2)
Odd Numbers - Works but may look unbalanced on desktop

Content Guidelines

Titles:

Keep concise (2-5 words)
Use action-oriented language
Be specific and benefit-focused

Descriptions:

Aim for 10-20 words
Explain the benefit clearly
Avoid jargon

Icons:

Choose icons that visually represent the feature
Use consistent style (all outlined or all filled)
Test on both light and dark themes

Example Configuration

Block Name: "Why Choose Custom Cap BD"
Section Title: "Features That Set Us Apart"
Section Description: "Discover the advantages of working with us"

Features:
1. Title: "Custom Design Tools"
   Description: "Advanced 3D designer with real-time preview and professional templates"
   Icon: "Palette"

2. Title: "Fast Turnaround"
   Description: "Industry-leading production times without compromising quality"
   Icon: "Zap"

3. Title: "Premium Materials"
   Description: "Only the highest quality fabrics and embroidery threads"
   Icon: "Award"

4. Title: "Expert Support"
   Description: "Dedicated team available 24/7 to assist with your projects"
   Icon: "Headphones"

Adding to Homepage

After creating the block:

Go to Sanity Studio → Homepage Configuration
Open the active configuration
Under Homepage Blocks, click Add
Search for your features block
Drag to reorder if needed
Publish the configuration

Changes appear on the homepage immediately!

Troubleshooting

Icon Not Showing

Verify the icon name matches exactly (case-sensitive)
Check lucide.dev for correct spelling
Try a common icon like Heart or Star to test

Features Not Displaying

Check the Visible toggle is enabled
Ensure the block is added to an active Homepage Configuration
Verify at least one feature is added

Styling Issues

Background/text colors override the theme - use sparingly
Features section works best with Full Width enabled
Test on mobile devices for responsive layout