Conference Speaker Card

Showcase your event's speakers in a visually engaging format with this professional conference speaker card.

This component is specifically designed for event and conference websites. It combines a large, high-impact headshot with the speaker's name and professional title overlaid, along with a separate section for their talk's topic.

Get Source Code Preview

About this Component

This card template leads with a strong visual in the form of the speaker's photo. To ensure the text is always readable, the speaker's name and title are positioned over a semi-transparent gradient at the bottom of the image. The card body below provides space to tease the content of their talk, encouraging users to click for more information.

Features

Image with Text Overlay: The speaker's name and professional title are elegantly overlaid on their photo for a modern, polished look.
Gradient for Readability: A subtle linear gradient is applied over the bottom of the image to ensure the white text is readable against any photo.
Dedicated Topic Section: Includes a separate area below the image to feature the title and an excerpt of the speaker's presentation.
Clickable Card: The entire card is wrapped in a single anchor tag, making the whole unit a large, easy-to-use clickable target.

Code Breakdown

HTML Structure

Each card is an article. The entire card is made clickable by wrapping its contents in a single a tag. The structure is split into two parts: an image container and a body container. The image container holds the speaker's photo and an absolutely positioned div (.speaker-card-info) for the overlaid name and title. The body (.speaker-card-body) contains an h4 for the talk topic and a p for a short excerpt.

CSS Styling

The .speaker-card-image-container has position: relative, which allows the .speaker-card-info block to be positioned absolutely within it, at the bottom. The text overlay's gradient effect is achieved with the linear-gradient() function, which creates a smooth transition from transparent at the top to a semi-opaque black at the bottom, ensuring text contrast and readability.

Code

Here is the complete code. Simply customize the speaker photos, names, titles, and talk details to build out your event's speaker section.

<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(300px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
}

/* === Conference Speaker Card Styles === */
.speaker-card {
    --speaker-card-radius: 12px;
    --speaker-card-shadow: 0 4px 10px rgba(0,0,0,0.08);

background-color: #ffffff;
    border-radius: var(--speaker-card-radius);
    box-shadow: var(--speaker-card-shadow);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.speaker-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
}

.speaker-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.speaker-card-link:hover .speaker-card-name {
    color: #4f46e5;
}

.speaker-card-image-container {
    position: relative;
    background-color: #e5e7eb;
}

.speaker-card-image {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
}

.speaker-card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem 1.25rem;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
    color: #ffffff;
}

.speaker-card-name {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    transition: color 0.2s ease;
}

.speaker-card-title {
    font-size: 0.95rem;
    opacity: 0.9;
    margin: 0;
}

/* Card body with talk info */
.speaker-card-body {
    padding: 1.25rem;
}

.speaker-card-body .talk-topic {
    font-size: 1rem;
    font-weight: 500;
    margin: 0 0 0.5rem;
}

.speaker-card-body .talk-excerpt {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #4b5563;
    margin: 0;
}
</style>

<div class="cards-grid-container">

<article class="speaker-card">
        <a href="#" class="speaker-card-link">
            <div class="speaker-card-image-container">
                
                <img class="speaker-card-image" src="https://placehold.co/600x560/a78bfa/ffffff/png?text=Elara" alt="Headshot of Elara Vance.">
                <div class="speaker-card-info">
                    <h3 class="speaker-card-name">Elara Vance</h3>
                    <p class="speaker-card-title">Lead UX Architect, Starlight Solutions</p>
                </div>
            </div>
            <div class="speaker-card-body">
                <h4 class="talk-topic">Topic: The Ethics of AI in Design</h4>
                <p class="talk-excerpt">Exploring the complex ethical landscape that designers must navigate in the age of artificial intelligence...</p>
            </div>
        </a>
    </article>

<article class="speaker-card">
        <a href="#" class="speaker-card-link">
            <div class="speaker-card-image-container">
                
                <img class="speaker-card-image" src="https://placehold.co/600x560/7dd3fc/ffffff/png?text=Caspian" alt="Headshot of Caspian Reed.">
                <div class="speaker-card-info">
                    <h3 class="speaker-card-name">Caspian Reed</h3>
                    <p class="speaker-card-title">Principal Engineer, Apex Digital</p>
                </div>
            </div>
            <div class="speaker-card-body">
                <h4 class="talk-topic">Topic: Scaling Infrastructure for a Billion Users</h4>
                <p class="talk-excerpt">A deep dive into the architecture and strategies required to build systems that are both resilient and...</p>
            </div>
        </a>
    </article>
    
    
     <article class="speaker-card">
        <a href="#" class="speaker-card-link">
            <div class="speaker-card-image-container">
                
                <img class="speaker-card-image" src="https://placehold.co/600x560/fca5a5/ffffff/png?text=Zoya" alt="Headshot of Zoya Khan.">
                <div class="speaker-card-info">
                    <h3 class="speaker-card-name">Zoya Khan</h3>
                    <p class="speaker-card-title">CEO, Quantum Innovations</p>
                </div>
            </div>
            <div class="speaker-card-body">
                <h4 class="talk-topic">Keynote: The Future of Human-Computer Interaction</h4>
                <p class="talk-excerpt">Join us for an inspiring look at the technologies that will shape our digital interactions for the next decade...</p>
            </div>
        </a>
    </article>
    
</div>

View Output