Author & Article Summary Card

Feature your authors prominently alongside their work with this two-column summary card.

This layout is designed for content platforms where the author's identity is a special feature. By placing the author in a dedicated column, it gives them more weight than a standard byline. Perfect for building author credibility and recognition.

Screenshot of an article summary card with a distinct author column.

Get Source Code Preview

About this Component

The card uses a horizontal, two-column layout on desktop, clearly separating the author's information from the article's summary. A subtle vertical border reinforces this separation. On mobile devices, the layout responsively stacks, placing the author's details above the article content in a format that remains clean and readable.

Features

Author-Forward Design: The dedicated author column puts the writer front and center.
Responsive Stacking: The horizontal layout intelligently switches to a stacked vertical layout on smaller screens to ensure an optimal reading experience everywhere.
Clickable Wrapper: The entire card is wrapped in a single anchor tag, providing a large, user-friendly click target that directs to the full article.
Semantic Structure: Uses an article container and a time element for proper document structure.

Code Breakdown

HTML Structure

The entire card is an article. A single a tag wraps two child div elements for the author column (.aas-card-author-col) and the article column (.aas-card-article-col). For accessibility, the main link uses aria-labelledby to reference the id of the article title.

CSS Styling

The two-column layout is created by setting display: flex on the card's main anchor tag (.aas-card-link). The author column is given a fixed width and prevented from shrinking with flex-shrink: 0. The article column uses flex-grow: 1 to fill the remaining horizontal space.

A media query checks for screens narrower than 640px and changes the flex-direction of the main link to column. This is what causes the two columns to stack vertically. The styling for the author column is also adjusted within the media query to create a horizontal byline on mobile.

Code

Here is the complete code. This component is ready to be used in a list to build a main blog or articles page for a multi-author website.

<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: 1.5rem;
}

/* === Author & Article Summary Card Styles === */
.aas-card {
    --aas-radius: 12px;
    --aas-shadow: 0 4px 10px rgba(0,0,0,0.06);

background-color: #ffffff;
    border-radius: var(--aas-radius);
    box-shadow: var(--aas-shadow);
    display: flex;
    transition: box-shadow 0.2s ease;
}

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

.aas-card-link {
    display: flex;
    color: inherit;
    text-decoration: none;
    padding: 1.5rem;
    width: 100%;
}

/* Author Column */
.aas-card-author-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-shrink: 0;
    width: 120px;
    margin-right: 1.5rem;
    border-right: 1px solid #e5e7eb;
    padding-right: 1.5rem;
}

.aas-card-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 0.75rem;
}

.aas-card-author-name {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
    color: #111827;
}

/* Article Column */
.aas-card-article-col {
    flex-grow: 1;
}

.aas-card-meta {
    display: flex;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
    align-items: center;
}
.aas-card-category {
    font-weight: 500;
    color: #4f46e5;
}

.aas-card-title {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.5rem;
}
.aas-card-link:hover .aas-card-title {
    text-decoration: underline;
}

.aas-card-excerpt {
    font-size: 1rem;
    line-height: 1.6;
    color: #4b5563;
    margin: 0;
}

/* Responsive Stacking */
@media (max-width: 640px) {
    .aas-card-link {
        flex-direction: column;
    }
    .aas-card-author-col {
        flex-direction: row;
        width: 100%;
        margin-right: 0;
        margin-bottom: 1rem;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        padding-right: 0;
        padding-bottom: 1rem;
        text-align: left;
    }
    .aas-card-avatar {
        width: 48px;
        height: 48px;
        margin-bottom: 0;
        margin-right: 1rem;
    }
}
</style>

<div class="list-view-container">
    
    
    <article class="aas-card">
        <a href="#" class="aas-card-link" aria-labelledby="article-title-1">
            <div class="aas-card-author-col">
                <img src="https://placehold.co/160x160/ef4444/ffffff/png?text=CR" alt="Avatar of Caspian Rowe" class="aas-card-avatar">
                <span class="aas-card-author-name">Caspian Rowe</span>
            </div>
            <div class="aas-card-article-col">
                <div class="aas-card-meta">
                    <span class="aas-card-category">Case Study</span> &bull; 
                    <time datetime="2025-10-15">Oct 15, 2025</time>
                </div>
                <h3 class="aas-card-title" id="article-title-1">How Apex Digital Scaled to a Million Users</h3>
                <p class="aas-card-excerpt">A detailed look into the technical and strategic decisions that powered our exponential growth over the last year.</p>
            </div>
        </a>
    </article>
    
    
    <article class="aas-card">
         <a href="#" class="aas-card-link" aria-labelledby="article-title-2">
            <div class="aas-card-author-col">
                <img src="https://placehold.co/160x160/22c55e/ffffff/png?text=AZ" alt="Avatar of Adelaide Vance" class="aas-card-avatar">
                <span class="aas-card-author-name">Adelaide Vance</span>
            </div>
            <div class="aas-card-article-col">
                <div class="aas-card-meta">
                    <span class="aas-card-category">Opinion</span> &bull; 
                    <time datetime="2025-10-12">Oct 12, 2025</time>
                </div>
                <h3 class="aas-card-title" id="article-title-2">The Enduring Power of Semantic HTML</h3>
                <p class="aas-card-excerpt">Why writing clean, semantic markup is more important than ever for accessibility, SEO, and long-term maintainability.</p>
            </div>
        </a>
    </article>
</div>

View Output