Service Overview Card

<!DOCTYPE html>
<title>My Example</title>

<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>