Reply/Comment Thread Card

Display a self-contained conversation with this card designed to show a parent comment and its direct replies.

This is a core component for forums, social feeds, or any product that allows threaded discussions. It visually groups a main post with its responses, using indentation and a "thread line" to show the relationship between them.

Screenshot of a comment thread card, showing a main comment with two indented replies.

Get Source Code Preview

About this Component

This template is designed as a single unit containing both an original post and its direct child comments. The replies are visually nested with both indentation and a vertical line, a common UI pattern that makes conversation flow easy to understand. This design intentionally supports a single level of nesting to maintain readability and a clean layout on all screen sizes.

Features

Clear Thread Visualization: Uses indentation and a CSS-generated vertical line to visually connect replies to their parent comment.
Semantic Structure: The main container is a section, with each comment being a distinct article.
Single-Level Nesting: A robust and readable approach that works well for displaying the start of a conversation.

Code Breakdown

HTML Structure

The entire component is a section with the class .thread-card. Inside, the parent comment is the first article. All replies are then grouped together inside a separate div with the class .thread-replies. Each reply is its own article within this div.

CSS Styling

The visual nesting is created with CSS. The .thread-replies container has a padding-left to create the indentation. This container is also set to position: relative, which allows a ::before pseudo-element to be positioned absolutely within it. This pseudo-element is styled as a thin vertical line and positioned on the left side, within the padded area, to create the "thread line" that visually links the replies.

Code

Here's the complete code. This component is ideal for displaying snippets of conversations in an activity feed or on a main discussion page.

<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-thread {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

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

background-color: #ffffff;
    border-radius: var(--thread-radius);
    box-shadow: var(--thread-shadow);
    max-width: 600px;
    width: 100%;
}

/* Individual comment styles (reused) */
.thread-comment-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.25rem;
}
.thread-comment-item:not(:last-child) {
    border-bottom: 1px solid #f3f4f6;
}

.thread-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.thread-main-content {
    flex-grow: 1;
}

.thread-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.thread-author { font-weight: 600; color: #111827; }
.thread-handle { font-size: 0.9rem; color: #6b7280; }
.thread-time { font-size: 0.875rem; color: #6b7280; }

.thread-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #374151;
    margin: 0;
}
.thread-text p { margin: 0 0 1em; }
.thread-text p:last-child { margin-bottom: 0; }

/* The container for nested replies */
.thread-replies {
    padding-left: 3rem; /* Indentation for replies */
    position: relative;
    border-top: 1px solid #f3f4f6;
    background-color: #fafafa;
}

/* The vertical "thread line" connecting replies */
.thread-replies::before {
    content: '';
    position: absolute;
    left: 41px; /* Aligns with avatars */
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #e5e7eb;
}

</style>

<div class="demo-container-thread">
    <section class="thread-card">
        
        
        <article class="thread-comment-item">
            <img src="https://placehold.co/88x88/f59e0b/ffffff/png?text=F" alt="Avatar of Felix" class="thread-avatar">
            <div class="thread-main-content">
                <header class="thread-header">
                    <span class="thread-author">Felix Quinn</span>
                    <span class="thread-handle">@felixquinn</span>
                    <time class="thread-time" datetime="2025-11-01T10:00:00Z">&bull; Nov 1, 2025</time>
                </header>
                <div class="thread-text">
                    <p>Does anyone know if it's possible to animate CSS Grid tracks? I'm trying to create a smooth collapse/expand animation for a sidebar.</p>
                </div>
            </div>
        </article>
        
        
        <div class="thread-replies">
            
            <article class="thread-comment-item">
                <img src="https://placehold.co/88x88/1d4ed8/ffffff/png?text=N" alt="Avatar of Nora" class="thread-avatar">
                <div class="thread-main-content">
                    <header class="thread-header">
                        <span class="thread-author">Nora Ives</span>
                        <span class="thread-handle">@nora_dev</span>
                        <time class="thread-time" datetime="2025-11-01T10:15:00Z">&bull; Nov 1, 2025</time>
                    </header>
                    <div class="thread-text">
                        <p>Yes! You can transition the 'grid-template-rows' or 'grid-template-columns' properties. Setting a row from '1fr' to '0fr' will animate its height smoothly.</p>
                    </div>
                </div>
            </article>
            
            
            <article class="thread-comment-item">
                <img src="https://placehold.co/88x88/ec4899/ffffff/png?text=E" alt="Avatar of Elara" class="thread-avatar">
                <div class="thread-main-content">
                    <header class="thread-header">
                        <span class="thread-author">Elara Vance</span>
                        <span class="thread-handle">@elara_ux</span>
                        <time class="thread-time" datetime="2025-11-01T10:20:00Z">&bull; Nov 1, 2025</time>
                    </header>
                    <div class="thread-text">
                        <p>Exactly what Nora said. Just make sure the content inside the track has 'overflow: hidden' or it might spill out during the animation.</p>
                    </div>
                </div>
            </article>
        </div>
        
    </section>
</div>

View Output