Webinar/Online Meeting Card with Join Button

Promote your virtual events with this professional card, designed to feature key information and a clear call-to-action.

This template is ideal for listing webinars, online workshops, or team meetings. It includes styles for different event states, such as a prominent "Live Now" indicator to attract immediate attention.

Screenshot of two online meeting cards, one with an animated 'Live' status.

Get Source Code Preview

About this Component

This component provides a clear structure for communicating the essential details of an online event. The example demonstrates how to use a modifier class to visually change the card's state for a live event, making the call-to-action button more prominent and adding an animated status indicator.

Features

"Live" State Styling: Use the .is-live modifier class to instantly change the card's appearance for an event that is currently in progress.
Pulsing Indicator: The "live" state includes a subtle, animated pulsing dot created with CSS @keyframes to draw the user's eye.
Disabled State: Shows how to use the :disabled pseudo-class to style the button for upcoming events where the call-to-action is not yet available.
Iconography: Uses clear icons to label key details like the event host and time, improving scannability.

Code Breakdown

HTML Structure

Each card is a semantic article. To indicate a live event, you add the .is-live class to this main element. The content is structured with a header for the title, a ul for the list of details, and a footer for the action button. The pulsing "live" dot is simply an empty span that is styled by the CSS.

CSS Styling

The layout is managed with Flexbox. The main card uses flex-direction: column, and the detail list (.webinar-card-details) has flex-grow: 1, which pushes the footer to the bottom for consistent alignment. The "Live" indicator's pulsing effect is created with an @keyframes rule named pulse that animates the element's opacity. All state-specific styles, like the green colors and the animated dot, are scoped under the .is-live modifier class.

Code

Here is the complete, self-contained code. Toggle the live state by adding or removing the .is-live class from the main card element.

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f3f4f6;
    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(320px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
}

/* Keyframes for the pulsing "live" dot */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
}

/* === Webinar Card Styles === */
.webinar-card {
    --webinar-card-radius: 12px;
    --webinar-card-shadow: 0 4px 10px rgba(0,0,0,0.06);

background-color: #ffffff;
    border-radius: var(--webinar-card-radius);
    box-shadow: var(--webinar-card-shadow);
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
}

.webinar-card-header {
    margin-bottom: 1.25rem;
}
.webinar-card-category {
    font-size: 0.8rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}
.webinar-card-title {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.webinar-card-details {
    flex-grow: 1;
    display: grid;
    gap: 0.75rem;
    color: #374151;
    list-style: none;
    margin: 0;
    padding: 0;
}
.webinar-card-detail-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.webinar-card-detail-item svg {
    width: 20px;
    height: 20px;
    color: #9ca3af;
    flex-shrink: 0;
}

.webinar-card-footer {
    margin-top: 1.5rem;
}

.webinar-card-cta {
    width: 100%;
    background-color: #4f46e5;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.webinar-card-cta:hover {
    background-color: #4338ca;
}

/* === "Live" State Styles === */
.webinar-card.is-live .webinar-card-category {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #16a34a;
}
.webinar-card.is-live .live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #22c55e;
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.webinar-card.is-live .webinar-card-cta {
    background-color: #16a34a;
}
.webinar-card.is-live .webinar-card-cta:hover {
    background-color: #15803d;
}

/* === "Upcoming" State Style (Disabled) === */
.webinar-card-cta:disabled {
    background-color: #d1d5db;
    cursor: not-allowed;
}

</style>

<div class="cards-grid-container">
    
    
    <article class="webinar-card is-live">
        <header class="webinar-card-header">
            <div class="webinar-card-category">
                <span class="live-dot"></span>LIVE NOW
            </div>
            <h3 class="webinar-card-title">The Future of Responsive Design</h3>
        </header>
        <ul class="webinar-card-details">
            <li class="webinar-card-detail-item">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M10 8a3 3 0 100-6 3 3 0 000 6zM3.465 14.493a1.23 1.23 0 00.41 1.412A9.957 9.957 0 0010 18c2.31 0 4.438-.784 6.131-2.095a1.23 1.23 0 00.41-1.412l-1.92-3.839c-.328-.657-.968-1.07-1.706-1.07H6.522c-.738 0-1.378.413-1.706 1.07l-1.92 3.839z" /></svg>
                <span>Hosted by Elara Vance</span>
            </li>
            <li class="webinar-card-detail-item">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zM4.5 6.5A1.25 1.25 0 003.25 7.75v7.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-7.5A1.25 1.25 0 0015.25 6.5H4.5z" clip-rule="evenodd"/></svg>
                <time datetime="2024-10-28T14:00:00Z">October 28, 2024 at 2:00 PM UTC</time>
            </li>
        </ul>
        <footer class="webinar-card-footer">
            <button class="webinar-card-cta" type="button">Join Meeting Now</button>
        </footer>
    </article>
    
    
    <article class="webinar-card">
         <header class="webinar-card-header">
            <div class="webinar-card-category">Upcoming Webinar</div>
            <h3 class="webinar-card-title">Getting Started with CSS Grid</h3>
        </header>
         <ul class="webinar-card-details">
            <li class="webinar-card-detail-item">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M10 8a3 3 0 100-6 3 3 0 000 6zM3.465 14.493a1.23 1.23 0 00.41 1.412A9.957 9.957 0 0010 18c2.31 0 4.438-.784 6.131-2.095a1.23 1.23 0 00.41-1.412l-1.92-3.839c-.328-.657-.968-1.07-1.706-1.07H6.522c-.738 0-1.378.413-1.706 1.07l-1.92 3.839z" /></svg>
                <span>Hosted by Dr. Aris Thorne</span>
            </li>
            <li class="webinar-card-detail-item">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zM4.5 6.5A1.25 1.25 0 003.25 7.75v7.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-7.5A1.25 1.25 0 0015.25 6.5H4.5z" clip-rule="evenodd"/></svg>
                <time datetime="2024-11-05T18:00:00Z">November 5, 2024 at 6:00 PM UTC</time>
            </li>
        </ul>
        <footer class="webinar-card-footer">
            <button class="webinar-card-cta" type="button" disabled>Registration opens soon</button>
        </footer>
    </article>

</div>

View Output