Team Member List

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Team Member 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: #f0f4f8;
            margin: 0;
            padding: 2rem;
            display: flex;
            justify-content: center;
        }

/* ==========================================================================
           Team Member Component Styles - Copy from here
           ========================================================================== */
        .team-members-template {
            --team-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --bg-color: #f0f4f8;
            --card-bg-color: #ffffff;
            --primary-text-color: #1e293b;
            --secondary-text-color: #64748b;
            --accent-color: #3b82f6;
            --card-border-color: #e2e8f0;
            --card-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
            --card-hover-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
            --card-border-radius: 0.75rem;

font-family: var(--team-font-family);
            color: var(--primary-text-color);
            width: 100%;
            max-width: 1200px;
        }
        
        .team-members-template *,
        .team-members-template *::before,
        .team-members-template *::after {
            box-sizing: border-box;
        }

.team-members-template .team-header {
            text-align: center;
            margin-bottom: 3rem;
        }

.team-members-template .team-header h2 {
            font-size: 2.5rem;
            margin: 0 0 0.5rem 0;
        }

.team-members-template .team-header p {
            font-size: 1.1rem;
            color: var(--secondary-text-color);
            max-width: 600px;
            margin: 0 auto;
        }
        
        .team-members-template .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
        }
        
        .team-members-template .team-card {
            background: var(--card-bg-color);
            border: 1px solid var(--card-border-color);
            border-radius: var(--card-border-radius);
            box-shadow: var(--card-shadow);
            padding: 2rem;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .team-members-template .team-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--card-hover-shadow);
        }

.team-members-template .profile-image {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            margin: 0 auto 1.5rem;
            border: 4px solid var(--card-bg-color);
            box-shadow: 0 0 0 1px var(--card-border-color);
        }

.team-members-template .member-name {
            font-size: 1.25rem;
            font-weight: 600;
            margin: 0;
        }
        
        .team-members-template .member-role {
            color: var(--accent-color);
            font-size: 0.9rem;
            font-weight: 500;
            margin: 0.25rem 0 1rem 0;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

.team-members-template .social-links {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
            gap: 1rem;
        }

.team-members-template .social-links a {
            color: var(--secondary-text-color);
            display: inline-block;
            transition: color 0.3s ease;
        }
        
        .team-members-template .social-links a:hover {
            color: var(--accent-color);
        }

.team-members-template .social-links svg {
            width: 20px;
            height: 20px;
        }
    </style>
</head>
<body>

<section class="team-members-template">
    <header class="team-header">
        <h2>Meet the Architects</h2>
        <p>We are a diverse team of dreamers, builders, and problem-solvers united by a passion for innovation.</p>
    </header>

<div class="team-grid">
        <article class="team-card">
            <img src="https://placehold.co/120x120/E2E8F0/64748B" alt="A photo of Alistair Finch." class="profile-image">
            <h3 class="member-name">Alistair Finch</h3>
            <p class="member-role">Lead Metaphysical Engineer</p>
            <ul class="social-links">
                <li><a href="#" aria-label="Alistair Finch on Twitter">
                    <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.223.085a4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
                </a></li>
                <li><a href="#" aria-label="Alistair Finch on LinkedIn">
                    <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z"/></svg>
                </a></li>
            </ul>
        </article>
        
        <article class="team-card">
            <img src="https://placehold.co/120x120/E2E8F0/64748B" alt="A photo of Zephyr Blackwood." class="profile-image">
            <h3 class="member-name">Zephyr Blackwood</h3>
            <p class="member-role">Chief Chaos Coordinator</p>
            <ul class="social-links">
                <li><a href="#" aria-label="Zephyr Blackwood on Twitter">
                    <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.223.085a4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
                </a></li>
                <li><a href="#" aria-label="Zephyr Blackwood on GitHub">
                    <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
                </a></li>
            </ul>
        </article>
        
        <article class="team-card">
            <img src="https://placehold.co/120x120/E2E8F0/64748B" alt="A photo of Cassandra Bolt." class="profile-image">
            <h3 class="member-name">Cassandra Bolt</h3>
            <p class="member-role">Director of Digital Alchemy</p>
            <ul class="social-links">
                <li><a href="#" aria-label="Cassandra Bolt on LinkedIn">
                    <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z"/></svg>
                </a></li>
                 <li><a href="#" aria-label="Cassandra Bolt on Github">
                    <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
                </a></li>
            </ul>
        </article>
    </div>
</section>

</body>
</html>