Feature List Template

Present your product's main features in a clean, modern grid-based layout.

This template is ideal for landing pages or product sections where you need to communicate value to your customers clearly and concisely.

Screenshot of a feature list with icons arranged in a grid.

Get Source Code Preview

About this Template

This feature list uses CSS Grid to create a beautiful and robust layout. On small screens, features are displayed in a single, easy-to-read column. On larger screens, the list automatically reflows into a two or three column grid without complex media queries. The entire component is self-contained within a single CSS class, making it safe to use in any project.

Features

Fully Responsive Grid: Uses modern CSS to create a flexible grid that adapts to any screen size.
Self-Contained: All styles are scoped to the .feature-list-template class to prevent interfering with your website's existing styles.
Easy to Customize: All core design tokens like colors, fonts, and spacing are defined in CSS custom properties for quick and easy themeing.
Semantic and Accessible: Built with semantic section and h2 tags for a logical document structure. SVG icons include title elements for screen readers.

Code Breakdown

The component is wrapped in a section with the class .feature-list-template. This class serves as the hook for all of the component's styling.

The grid itself is a div with the class .features-grid, which is set to display: grid. We use the grid-template-columns property with the value repeat(auto-fit, minmax(280px, 1fr)). This tells the browser to create as many columns as will fit, with each column being a minimum of 280px wide and a maximum of one flexible unit. It is a handy technique for creating responsive grids with minimal code.

Code

Here's the full code for the template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Feature List</title>
    <style>
        /* ==========================================================================
           Styles for Demo Preview Only
           ========================================================================== */
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f8f9fa;
            margin: 0;
            padding: 2rem;
            display: flex;
            justify-content: center;
        }

/* ==========================================================================
           Feature List Component Styles - Copy from here
           ========================================================================== */
        .feature-list-template {
            --feature-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --feature-bg-color: #f8f9fa;
            --feature-item-bg: #ffffff;
            --primary-text-color: #212529;
            --secondary-text-color: #6c757d;
            --accent-color: #0d6efd;
            --card-border-color: #dee2e6;
            --card-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
            --card-border-radius: .5rem;

font-family: var(--feature-font-family);
            color: var(--primary-text-color);
            width: 100%;
            max-width: 1200px;
        }
        
        .feature-list-template *,
        .feature-list-template *::before,
        .feature-list-template *::after {
            box-sizing: border-box;
        }
        
        .feature-list-template .feature-list-header {
            text-align: center;
            margin-bottom: 3rem;
        }
        
        .feature-list-template .feature-list-header h2 {
            font-size: 2.25rem;
            margin: 0 0 0.5rem 0;
        }
        
        .feature-list-template .feature-list-header p {
            font-size: 1.1rem;
            color: var(--secondary-text-color);
            max-width: 600px;
            margin: 0 auto;
        }

.feature-list-template .features-grid {
            display: grid;
            gap: 2rem;
            /* Create a responsive grid without media queries */
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        }

.feature-list-template .feature-item {
            background-color: var(--feature-item-bg);
            border: 1px solid var(--card-border-color);
            border-radius: var(--card-border-radius);
            padding: 2rem;
            text-align: center;
        }

.feature-list-template .feature-icon {
            background-color: var(--accent-color);
            border-radius: 50%;
            color: #fff;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 60px;
            height: 60px;
            margin-bottom: 1.5rem;
        }

.feature-list-template .feature-icon svg {
            width: 32px;
            height: 32px;
        }

.feature-list-template .feature-item h3 {
            font-size: 1.25rem;
            margin: 0 0 0.75rem 0;
            color: var(--primary-text-color);
        }

.feature-list-template .feature-item p {
            margin: 0;
            color: var(--secondary-text-color);
            line-height: 1.6;
        }
    </style>
</head>
<body>

<section class="feature-list-template">
    <header class="feature-list-header">
        <h2>Core Features</h2>
        <p>Explore the advanced capabilities that make our Cosmic Console a universe ahead of the competition.</p>
    </header>

<div class="features-grid">
        <div class="feature-item">
            <div class="feature-icon">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" role="img">
                    <title>Speed</title>
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
                </svg>
            </div>
            <h3>Warp Speed Processing</h3>
            <p>Our system uses quantum flux algorithms to deliver results before you even think of the query. Blazingly fast is an understatement.</p>
        </div>

<div class="feature-item">
            <div class="feature-icon">
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" role="img">
                    <title>Security</title>
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.286zm0 13.036h.008v.008h-.008v-.008z" />
                </svg>
            </div>
            <h3>Asteroid-Proof Security</h3>
            <p>With 256-bit stellar encryption and a decentralized nebula-based ledger your data is safer than in a black hole.</p>
        </div>

<div class="feature-item">
            <div class="feature-icon">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" role="img">
                    <title>Integration</title>
                    <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
                </svg>
            </div>
            <h3>Universal Integration</h3>
            <p>Connect seamlessly with over 1,138 alien and terrestrial platforms using our simple wormhole API. No adapter required.</p>
        </div>
    </div>
</section>

</body>
</html>

View Output