Blog Series Card with Part Numbers

Organize multi-part articles and guide your readers through a content series with this specially designed card.

This layout is perfect for tutorials, deep-dives, or any content that's broken into multiple installments. The prominent part number makes it easy for users to identify where they are in the series and which post to read next.

Screenshot of a list of cards, each with a large part number.

Get Source Code Preview

About this Component

The card features a distinct two-column layout. The left column is dedicated entirely to the part number, making it the primary visual anchor. The right column contains the article's title and a short excerpt. The entire card is clickable and fully responsive, stacking into a single column on smaller screens for readability.

Features

Prominent Part Number: A dedicated column with a large number makes the sequence clear and scannable.
Clean Separation: A subtle vertical border visually divides the part number from the article content on larger screens.
Responsive Stacking: The layout intelligently switches from a horizontal two-column view to a vertical stack on mobile, preserving the logical flow of information.
Line-Clamp for Text: Includes an optional CSS technique to truncate the article excerpt to a set number of lines, helping to maintain a uniform and tidy list.

Code Breakdown

HTML Structure

The entire card is an article with a single clickable a tag wrapping the content. The direct children of the link are two div elements that form the columns (.series-card-part-col for the number and .series-card-details-col for the text).

CSS Styling

The main clickable link (.series-card-link) is styled with display: flex and align-items: center. This creates the two-column layout and vertically centers the content of both columns with each other. A border-left on the details column creates the subtle dividing line. On screens narrower than 500px, a media query changes the flex-direction to column, stacking the part number block on top of the details block.

Code

Here's the complete, self-contained code. It's ready to be used to list the articles in your content series.

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

/* Container for the list */
.list-view-container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
    display: grid;
    gap: 1rem;
}

/* === Blog Series Card Styles === */
.series-card {
    --series-card-radius: 12px;
    --series-card-shadow: 0 2px 8px rgba(0,0,0,0.07);

background-color: #ffffff;
    border-radius: var(--series-card-radius);
    box-shadow: var(--series-card-shadow);
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.series-card:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
}

.series-card-link {
    display: flex;
    align-items: center;
    width: 100%;
    color: inherit;
    text-decoration: none;
    padding: 1.25rem;
    gap: 1.25rem;
}

/* Part Number Column */
.series-card-part-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-align: center;
    line-height: 1;
}

.series-card-part-label {
    font-size: 0.8rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.series-card-part-number {
    font-size: 2.25rem;
    font-weight: 700;
    color: #4f46e5;
}

/* Details Column */
.series-card-details-col {
    flex-grow: 1;
    border-left: 1px solid #e5e7eb;
    padding-left: 1.25rem;
}
.series-card-link:hover .series-card-title {
    color: #4f46e5;
}

.series-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 0.5rem;
    transition: color 0.2s ease;
}

.series-card-excerpt {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #4b5563;
    margin: 0;
    /* Optional: Clamp excerpt to 2 lines */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* Responsive Stacking */
@media (max-width: 500px) {
    .series-card-link {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .series-card-details-col {
        border-left: none;
        padding-left: 0;
    }
    .series-card-part-col {
        border-bottom: 1px solid #e5e7eb;
        width: 100%;
        padding-bottom: 1rem;
        flex-direction: row;
        gap: 0.5rem;
        align-items: baseline;
    }
}
</style>

<div class="list-view-container">
    
    
    <article class="series-card">
        <a href="#" class="series-card-link">
            <div class="series-card-part-col">
                <span class="series-card-part-label">Part</span>
                <span class="series-card-part-number">1</span>
            </div>
            <div class="series-card-details-col">
                <h3 class="series-card-title">The Foundations of Atomic Design</h3>
                <p class="series-card-excerpt">Understanding the core principles and how breaking UIs down into their smallest components can create a more scalable and maintainable system.</p>
            </div>
        </a>
    </article>
    
    
     <article class="series-card">
        <a href="#" class="series-card-link">
            <div class="series-card-part-col">
                <span class="series-card-part-label">Part</span>
                <span class="series-card-part-number">2</span>
            </div>
            <div class="series-card-details-col">
                <h3 class="series-card-title">Building Molecules and Organisms</h3>
                <p class="series-card-excerpt">How to effectively combine atoms into more complex components that form the building blocks of your application's user interface.</p>
            </div>
        </a>
    </article>
    
    
     <article class="series-card">
        <a href="#" class="series-card-link">
            <div class="series-card-part-col">
                <span class="series-card-part-label">Part</span>
                <span class="series-card-part-number">3</span>
            </div>
            <div class="series-card-details-col">
                <h3 class="series-card-title">Creating Reusable Page Templates</h3>
                <p class="series-card-excerpt">The final step: combining organisms into reusable page layouts and templates to create a cohesive user experience across your entire product.</p>
            </div>
        </a>
    </article>
    
</div>

View Output