Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀
Feature Cards Section
Feature sections showcase product benefits or service offerings with icon-based cards in a responsive grid. This is one of the most common website sections - found on landing pages, about pages, and product pages.
Feature Section Design
- Section header - Centered title + subtitle introducing the features
- Icon cards - Each card has an emoji/icon, title, and short description
- Grid layout - responsive auto-fit grid, typically 3 columns on desktop
- Icon container - Circular or rounded-square background behind each icon
- Consistent height - Cards stretch to equal height automatically with Grid
- Hover - Border-left accent color or icon background change on hover
Feature Cards Code
/* Feature section */
.features-section {
padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 3vw, 3rem);
max-width: 1200px;
margin: 0 auto;
}
.section-header {
text-align: center;
margin-bottom: 48px;
}
.section-header h2 {
font-size: clamp(1.5rem, 3vw, 2.5rem);
color: #1a1a2e;
margin-bottom: 12px;
}
.section-header p {
color: #666;
max-width: 500px;
margin: 0 auto;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.feature-card {
background: white;
border-radius: 16px;
padding: 32px;
text-align: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
transition: transform 0.3s, box-shadow 0.3s;
}
.feature-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.feature-icon {
width: 64px; height: 64px;
background: #f0f4ff;
border-radius: 16px;
display: flex; align-items: center; justify-content: center;
font-size: 1.8em;
margin: 0 auto 16px;
}
.feature-card h3 { color: #1a1a2e; margin-bottom: 8px; }
.feature-card p { color: #666; line-height: 1.6; font-size: 0.95em; }Tip
The icon container pattern (64px square with rounded corners and soft background color) makes emoji/SVG icons look professional. Without the container, icons float in empty space. The container gives them visual weight and structure.
Grid handles two-dimensional layouts - rows AND columns simultaneously
Common Mistake
Not limiting subtitle line length in section headers. A subtitle stretching 1200px across is unreadable. Always add max-width: 500px (or similar) + margin: 0 auto on the subtitle paragraph to keep line length comfortable.
Practice Task
Build a features section: (1) Centered section header with h2 + subtitle (max-width: 500px), (2) 3-column auto-fit grid of feature cards, (3) Each card: icon in rounded container + title + description, (4) Hover effect with translateY(-4px).
Quick Quiz
Key Takeaways
- Feature sections showcase product benefits or service offerings with icon-based cards in a responsive grid.
- Section header - Centered title + subtitle introducing the features
- Icon cards - Each card has an emoji/icon, title, and short description
- Grid layout - responsive auto-fit grid, typically 3 columns on desktop