Podcast Episode Card

Feature your latest podcast episodes in a clean, professional, and list-friendly format with this specialized card.

This component is designed to give listeners all the key information they need at a glance. This includes the episode number and duration, a compelling title, and a brief summary, all accompanied by an unmissable play button.

Screenshot of a card for a podcast episode, with title, summary, and a large play button.

Get Source Code Preview

About this Component

This card presents its content in a clear, top-to-bottom hierarchy. The header area groups the main clickable elements (the episode title and the play button) while a distinct, border-separated section below provides the episode summary. The layout is managed with Flexbox, ensuring all elements are neatly aligned.

Features

Action-Oriented Header: The title (which links to the episode page) and the main "play" button are placed together for prominence.
Clear Information Hierarchy: A metadata line provides important details like episode number and duration, while the larger title draws the most attention.
Standalone or List Format: The card is self-contained and works equally well on its own or stacked in a vertical list of episodes.
Accessible: The title is a semantic heading, and the play button has a clear aria-label.

Code Breakdown

HTML Structure

Each episode card is an article. A header element contains the main details and the play button. The episode summary is placed in a separate div below the header. The title is a clickable link for users who may want to navigate to a dedicated page for the episode to see show notes or transcripts.

CSS Styling

The card header (.episode-card-header) is styled with display: flex and justify-content: space-between. This creates the two-column layout, pushing the title block to the left and the play button to the far right. The play button itself uses Flexbox to perfectly center the SVG icon inside it. A subtle box-shadow and transform on the button's hover state adds a pleasing micro-interaction.

Code

Here's the complete code. It's ready to be used for a podcast website or any audio-based content list.

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

/* Optional: a container to center the card on the page for demonstration */
.demo-container-podcast {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

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

background-color: #ffffff;
    border-radius: var(--episode-radius);
    box-shadow: var(--episode-shadow);
    max-width: 600px;
    width: 100%;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.episode-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
}

.episode-card-meta {
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.episode-card-title {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.75rem;
}
.episode-card-title-link {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}
.episode-card-title-link:hover {
    color: #4f46e5;
}

/* Play button */
.episode-play-btn {
    flex-shrink: 0;
    background-color: #4f46e5;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3);
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.episode-play-btn:hover {
    background-color: #4338ca;
    transform: scale(1.05);
}
.episode-play-btn svg {
    width: 24px;
    height: 24px;
    margin-left: 3px; /* Optical alignment */
}

/* Episode Summary */
.episode-card-summary {
    font-size: 1rem;
    line-height: 1.6;
    color: #374151;
    margin: 1.25rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid #e5e7eb;
}

</style>

<div class="demo-container-podcast">
    <article class="episode-card" aria-labelledby="episode-title-1">
        <header class="episode-card-header">
            <div>
                <p class="episode-card-meta">Episode 42 &bull; 32 min</p>
                <a href="#" class="episode-card-title-link">
                    <h3 class="episode-card-title" id="episode-title-1">The Art of Component-Based Design</h3>
                </a>
            </div>
            <button class="episode-play-btn" type="button" aria-label="Play Episode">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.647c1.295.748 1.295 2.535 0 3.284L7.279 20.99c-1.25.715-2.779-.217-2.779-1.643V5.653z" clip-rule="evenodd" /></svg>
            </button>
        </header>
        <div class="episode-card-summary">
            <p>We sit down with UX Architect, Elara Vance, to discuss the principles of atomic design, the challenges of building scalable UI libraries, and the future of component-driven development.</p>
        </div>
    </article>
</div>

View Output