Service Overview Card

Clearly introduce your core services or product features with this bold and modern overview card.

This layout is designed to be highly scannable and visually engaging. It uses a large, prominent icon to represent the service, followed by a clear, centered title and a brief description.

Screenshot of three service overview cards with large, centered icons and different colors.

Get Source Code Preview

About this Component

A common pattern on landing pages is a row of cards, each introducing a core benefit or service. This component is built exactly for that purpose. It uses a centered layout to create a balanced, symmetrical design that draws the user's eye to the icon first.

Features

Icon-Led Design: The large, colorful icon at the top serves as a strong visual anchor for each service.
Color Theming with CSS Variables: The icon and background colors can be easily changed using CSS variables, and the template includes examples of how to create color variations with simple modifier classes.
Centered Layout: A clean, centered text alignment gives the card a formal and balanced appearance.
Clickable Card: The entire card is a single, clickable link, making for a large and easy-to-use target.

Code Breakdown

HTML Structure

Each card is an article wrapped in a single a tag to make it fully clickable. The structure is simple. It consists of a div that wraps the icon, followed by an h3 title, and a p element for the description.

CSS Styling

The card uses text-align: center to center all the content. The icon's large, circular background is created by giving the .service-card-icon-wrapper a specific padding and a border-radius of 50%. The icon and background colors are controlled by two CSS variables: --service-card-icon-bg and --service-card-icon-color. This makes customization simple, as you can create different color themes just by adding a new class (like .style-2 in the example) that overrides these variables.

Code

Here is the complete, self-contained code. To create different color versions, you can add new CSS modifier classes that change the color variables, as demonstrated in the example. You can also replace the SVG icons with your own as required.

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f9fafb;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* === Grid Container for the Cards === */
.cards-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
}

/* === Service Overview Card Styles === */
.service-card {
    --service-card-radius: 12px;
    --service-card-padding: 2.5rem 2rem;
    --service-card-icon-bg: #e0e7ff; /* A light indigo */
    --service-card-icon-color: #4338ca; /* A dark indigo */

background-color: #ffffff;
    border-radius: var(--service-card-radius);
    padding: var(--service-card-padding);
    border: 1px solid #e5e7eb;
    text-align: center;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
}

.service-card a.service-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.service-card a.service-card-link:hover .service-card-title {
    color: var(--service-card-icon-color);
}

.service-card-icon-wrapper {
    display: inline-flex;
    padding: 1rem;
    background-color: var(--service-card-icon-bg);
    border-radius: 50%;
    margin-bottom: 1.5rem;
}
.service-card-icon-wrapper svg {
    width: 40px;
    height: 40px;
    color: var(--service-card-icon-color);
}

.service-card-title {
    font-size: 1.375rem;
    font-weight: 600;
    color: #1f2937;
    margin-top: 0;
    margin-bottom: 0.75rem;
    transition: color 0.2s ease;
}

.service-card-description {
    font-size: 1rem;
    line-height: 1.6;
    color: #4b5563;
    margin: 0;
}

/* Color Variations */
.service-card.style-2 {
    --service-card-icon-bg: #dcfce7;
    --service-card-icon-color: #16a34a;
}
.service-card.style-3 {
    --service-card-icon-bg: #ffedd5;
    --service-card-icon-color: #f97316;
}
</style>

<div class="cards-grid-container">
    
    
    <article class="service-card">
        <a href="#" class="service-card-link">
            <div class="service-card-icon-wrapper">
                
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M18.729,9.216C18.456,5.743,15.542,3,12,3c-3.03,0-5.631,1.968-6.47,4.838C3.136,8.669,1.5,11.187,1.5,13.5c0,3.308,2.692,6,6,6h9.75c2.895,0,5.25-2.355,5.25-5.25C22.5,11.888,20.948,9.861,18.729,9.216z M15.693,11.537C15.577,11.817,15.303,12,15,12h-1.5v3c0,0.828-0.672,1.5-1.5,1.5s-1.5-0.672-1.5-1.5v-3H9c-0.303,0-0.577-0.183-0.693-0.463c-0.116-0.28-0.052-0.603,0.163-0.818l3-3C11.616,7.573,11.808,7.5,12,7.5s0.384,0.073,0.53,0.22l3,3C15.745,10.934,15.809,11.257,15.693,11.537z"/>
                </svg>
            </div>
            <h3 class="service-card-title">Cloud Solutions</h3>
            <p class="service-card-description">Leverage our scalable and secure cloud infrastructure to power your applications globally.</p>
        </a>
    </article>
    
    
    <article class="service-card style-2">
        <a href="#" class="service-card-link">
            <div class="service-card-icon-wrapper">
                
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M21.66 3.75c-4.65 0-8.36-1.35-9.66-3.75C10.66 2.4 6.95 3.75 2.3 3.75c0 6.75-1.4 16.5 9.66 20.5 11.06-4 9.66-13.75 9.66-20.5z"></path>
                </svg>
            </div>
            <h3 class="service-card-title">Data Security</h3>
            <p class="service-card-description">Protect your sensitive information with our robust security protocols and 24/7 monitoring.</p>
        </a>
    </article>

<article class="service-card style-3">
        <a href="#" class="service-card-link">
            <div class="service-card-icon-wrapper">
                
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M13.526 13.636A3.018 3.018 0 0 1 14.063 13.5c0.378 0 0.74 0.07 1.073 0.198L16.467 11.906l0.051 0.029A2.99 2.99 0 0 1 15.75 9.938c0-1.657 1.344-3 3-3 1.657 0 3 1.344 3 3 0 1.657-1.344 3-3 3-0.344 0-0.675-0.058-0.983-0.165l-1.341 1.973A2.987 2.987 0 0 1 17.063 16.5c0 1.657-1.344 3-3 3-1.657 0-3-1.344-3-3 0-0.916 0.41-1.736 1.057-2.286l-1.947-3.87A3.013 3.013 0 0 1 9.563 10.5a3.005 3.005 0 0 1-0.765-0.098l-1.38 2.431C7.883 12.297 8.297 13.335 8.297 14.063c0 1.657-1.344 3-3 3-1.657 0-3-1.344-3-3 0-1.657 1.344-3 3-3 0.249 0 0.491 0.03 0.722 0.087l1.389-2.452C6.962 9.091 6.563 8.084 6.563 7.5c0-1.657 1.344-3 3-3 1.657 0 3 1.344 3 3 0 0.897-0.394 1.701-1.017 2.251l1.981 3.891zM18.75 11.438c0.829 0 1.5-0.672 1.5-1.5s-0.672-1.5-1.5-1.5-1.5 0.672-1.5 1.5 0.672 1.5 1.5 1.5zM5.297 16.5c0.829 0 1.5-0.672 1.5-1.5s-0.672-1.5-1.5-1.5-1.5 0.672-1.5 1.5 0.672 1.5 1.5 1.5zM9.563 9c0.829 0 1.5-0.672 1.5-1.5s-0.672-1.5-1.5-1.5-1.5 0.672-1.5 1.5 0.672 1.5 1.5 1.5zM14.063 18.188c0.829 0 1.5-0.672 1.5-1.5s-0.672-1.5-1.5-1.5-1.5 0.672-1.5 1.5 0.672 1.5 1.5 1.5z" fill-rule="evenodd"/>
                </svg>                
            </div>
            <h3 class="service-card-title">Automation API</h3>
            <p class="service-card-description">Build powerful integrations and automate workflows with our flexible and well-documented API.</p>
        </a>
    </article>
</div>

View Output