Team Member Card With Avatar Role

<!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;
}

/* === Team Member Card Styles === */
.tm-card {
    --tm-card-radius: 12px;
    --tm-card-padding: 2rem 1.5rem;
    --tm-card-shadow: 0 4px 10px rgba(0,0,0,0.06);

background-color: #ffffff;
    border-radius: var(--tm-card-radius);
    padding: var(--tm-card-padding);
    box-shadow: var(--tm-card-shadow);
    text-align: center;
}

.tm-card .tm-card-avatar {
    width: 112px;  /* 7rem */
    height: 112px; /* 7rem */
    border-radius: 50%;
    object-fit: cover;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 3px #a5b4fc; /* An indigo-tinted shadow border */
}

.tm-card .tm-card-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    margin-top: 0;
    margin-bottom: 0.25rem;
}

.tm-card .tm-card-role {
    font-size: 1rem;
    color: #4f46e5; /* Indigo */
    margin-top: 0;
    margin-bottom: 1rem;
}

.tm-card .tm-card-socials {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.tm-card .tm-card-social-link {
    color: #9ca3af; /* Gray for icons */
    transition: color 0.2s ease-in-out;
}

.tm-card .tm-card-social-link:hover {
    color: #4f46e5;
}

.tm-card .tm-card-social-link svg {
    width: 24px;
    height: 24px;
}
</style>

<div class="cards-grid-container">
    
    
    <article class="tm-card">
        
        <img class="tm-card-avatar" src="https://picsum.photos/id/64/112/112" alt="Profile photo of Dr. Aris Thorne.">
        <h3 class="tm-card-name">Dr. Aris Thorne</h3>
        <p class="tm-card-role">Chief Science Officer</p>
        <div class="tm-card-socials">
            <a href="#" class="tm-card-social-link" aria-label="LinkedIn">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.25 6.5 1.75 1.75 0 016.5 8.25zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.1 1.16 3.1 3.99z" /></svg>
            </a>
            <a href="#" class="tm-card-social-link" aria-label="Website">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.125" stroke="currentColor" fill="none">
                <path d="M14.974,20.895A9.322,9.322,0,1,1,21.322,12.056a13.965,13.965,0,0,1-.274,2.25 M14.197,19.162A17.625,17.625,0,0,1,12,21.262 M12,2.625A12.802,12.802,0,0,1,16.339,11.25a12.776,12.776,0,0,1,.034,1.819 M12,2.625A12.784,12.784,0,0,0,7.616,12.172c0,6.075,2.73,7.875,4.372,9.09 M3.889,7.462L20.156,7.462 M12,2.621L12,21.262 M4.144,17.055L13.89,17.055 M2.678,12.172L21.322,11.944 M20.089,21.375L21.75,19.71l-3-3,1.706-1.091a.142.142,0,0,0-.045-.262L14.678,14.014a.146.146,0,0,0-.172.172L15.75,20.028a.146.146,0,0,0,.266.049L17.089,18.375Z"/>
                </svg>
            </a>
        </div>
    </article>

<article class="tm-card">
        
        <img class="tm-card-avatar" src="https://picsum.photos/id/342/112/112" alt="Profile photo of Elara Vance.">
        <h3 class="tm-card-name">Elara Vance</h3>
        <p class="tm-card-role">Lead Product Designer</p>
        <div class="tm-card-socials">
            <a href="#" class="tm-card-social-link" aria-label="LinkedIn">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.25 6.5 1.75 1.75 0 016.5 8.25zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.1 1.16 3.1 3.99z" /></svg>
            </a>
            <a href="#" class="tm-card-social-link" aria-label="X">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg>
            </a>
        </div>
    </article>

<article class="tm-card">
        
        <img class="tm-card-avatar" src="https://placehold.co/112x112/666/fff/png?text=CR" alt="Profile photo of Caspian Reed.">
        <h3 class="tm-card-name">Caspian Reed</h3>
        <p class="tm-card-role">Principal Engineer</p>
        <div class="tm-card-socials">
            <a href="#" class="tm-card-social-link" aria-label="LinkedIn">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.25 6.5 1.75 1.75 0 016.5 8.25zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.1 1.16 3.1 3.99z" /></svg>
            </a>
             <a href="#" class="tm-card-social-link" aria-label="X">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg>
            </a>
        </div>
    </article>
    
</div>