Speaker Highlight Hero Template

Build excitement and credibility for your event by putting your keynote speaker in the spotlight.

This clean, two-column layout prominently features your main speaker, leveraging their reputation to attract attendees and set a professional tone for the event.

Screenshot of an event hero section highlighting a speaker with their photo and name.

Get Source Code Preview

About the Speaker Highlight Hero

Featuring a well-known speaker is a major draw for any conference or webinar. This hero section is designed to maximize that appeal. It dedicates significant visual real estate to the speaker's photo, name, and credentials, immediately signaling the quality and value of your event to potential attendees. It is ideal for event landing pages where speaker reputation is a key selling point.

Features

Speaker-Centric Design: Gives prominence to the speaker's photo and information.
Professional Layout: A balanced, two-column format that looks clean and corporate.
Responsive & Mobile-First: The columns stack vertically on mobile devices, ensuring the content is easy to read.
Clear CTA: A prominent button encourages users to register or learn more.

Code Breakdown

This component is delivered as a CSS block for your website's head and an HTML block for the body.

The structure is a main section element containing a .speaker-hero-container div. We use CSS Flexbox for the layout by setting display: flex on the container. For mobile, the default flex-direction: column stacks the image and text blocks. A media query for wider screens switches the flex-direction to row, creating the side-by-side appearance. Both child divs, one for the figure and one for the text content, have a flex value of 1 to ensure they share the container's space equally on desktop.

Code

<style>
    :root {
        --shh-padding: 3rem 1.5rem;
        --shh-bg-color: #111827;
        --shh-text-color: #d1d5db;
        --shh-headline-color: #ffffff;
        --shh-accent-color: #818cf8;
        --shh-cta-bg: #818cf8;
        --shh-cta-text-color: #1e1b4b;
        --shh-cta-hover-bg: #a78bfa;
        --shh-max-width: 1100px;
    }
    .speaker-highlight-hero {
        box-sizing: border-box;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        background-color: var(--shh-bg-color);
        padding: var(--shh-padding);
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .speaker-highlight-hero * {
         box-sizing: border-box;
    }
    .speaker-hero-container {
        display: flex;
        flex-direction: column-reverse;
        gap: 2rem;
        max-width: var(--shh-max-width);
        width: 100%;
        align-items: center;
    }
    .speaker-hero-content {
        text-align: center;
        color: var(--shh-text-color);
    }
    .speaker-hero-content .keynote {
        font-size: 1rem;
        font-weight: 600;
        text-transform: uppercase;
        color: var(--shh-accent-color);
        margin: 0;
    }
    .speaker-hero-content .name {
        font-size: clamp(2.5rem, 6vw, 3.5rem);
        color: var(--shh-headline-color);
        font-weight: 800;
        line-height: 1.1;
        margin: 0.5rem 0;
    }
    .speaker-hero-content .title {
        font-size: 1.1rem;
        line-height: 1.6;
        margin: 0 0 2rem 0;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
    .speaker-hero-content .cta {
        display: inline-block;
        background-color: var(--shh-cta-bg);
        color: var(--shh-cta-text-color);
        padding: 0.9rem 2rem;
        font-size: 1.05rem;
        font-weight: 700;
        border: none;
        border-radius: 8px;
        text-decoration: none;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    .speaker-hero-content .cta:hover {
        background-color: var(--shh-cta-hover-bg);
    }
    .speaker-hero-image-wrapper {
        flex-shrink: 0;
    }
    .speaker-hero-image-wrapper .image {
        width: 250px;
        height: 250px;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid var(--shh-accent-color);
        box-shadow: 0 0 25px rgba(129, 140, 248, 0.4);
    }
    
    @media (min-width: 768px) {
        .speaker-highlight-hero {
            padding: 5rem 1.5rem;
        }
        .speaker-hero-container {
            flex-direction: row;
            gap: 4rem;
        }
        .speaker-hero-content {
            text-align: left;
        }
        .speaker-hero-content .title, .speaker-hero-content .cta {
            margin-left: 0;
            margin-right: 0;
        }
        .speaker-hero-image-wrapper .image {
            width: 300px;
            height: 300px;
        }
    }
</style>

<section class="speaker-highlight-hero">
    <div class="speaker-hero-container">

<div class="speaker-hero-content">
            <p class="keynote">Keynote Speaker</p>
            <h1 class="name">Dr. Anya Sharma</h1>
            <p class="title">Lead AI Ethicist at SynthCore & Author of "The Algorithmic Conscience"</p>
            <a href="#" role="button" class="cta">View Session Details</a>
        </div>
        
    </div>
</section>

View Output