User Comment Card

Display user comments in a clean, indented format perfect for building discussion threads and online conversations.

This layout is perfect for blogs and forums. It combines a user avatar with their name, a timestamp, comment text, and action buttons. The template is structured to handle nested replies gracefully.

Screenshot of a comment thread with a parent comment and an indented reply.

Get Source Code Preview

About this Component

A clear comment layout is vital for fostering community discussion. This template provides a robust structure for displaying a thread of comments, including parent-level comments and their indented replies. The component prevents infinitely-nested threads which can break layouts on smaller devices and makes conversations easier to follow.

Features

Logical Threading: The HTML is structured to group a parent comment with its replies. CSS handles a single level of indentation to maintain readability and prevent layout issues.
Reply Context: A "Replying to @username" element is included to ensure the conversation's flow is always clear, even if the original comment has scrolled out of view.
Semantic Time Element: The timestamp uses the HTML time element with a machine-readable datetime attribute.
Action Buttons: A footer provides users with clear action buttons for engagement.

Code Breakdown

HTML Structure

This template uses a nested structure to create threads. Each parent comment and its direct replies are wrapped in a div with the class .uc-card-wrapper. Inside, the parent comment is a standard article. All of its replies are grouped in a separate div with the class .uc-card-replies. For clarity, a reply includes a .uc-card-reply-context element, which explicitly states who the user is replying to.

CSS Styling

Each individual comment (.uc-card) is a flex container, aligning the avatar and the text content side-by-side. The indentation for replies is handled by applying a margin-left to the .uc-card-replies container. This indents the entire block of replies at once. This method prevents layouts from breaking on mobile devices by limiting the nesting depth to a single visual level, as any further replies to replies would simply appear within this same indented block, distinguished by their "Replying To" context.

Code

Here's the complete code. You can build out threads by creating new .uc-card-wrapper blocks for each new top-level comment, and by adding reply article elements inside the .uc-card-replies container.

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

/* A container to layout the comments list */
.comment-thread-container {
    background-color: #ffffff;
    max-width: 720px;
    margin: 2rem auto; /* Centers the list */
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    display: grid;
    gap: 1.25rem;
}

/* === User Comment Card Styles === */
.uc-card-wrapper {
    /* Each wrapper contains the card and its potential replies */
    display: grid;
    gap: 1.25rem;
}

.uc-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.uc-card-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.uc-card-main {
    flex-grow: 1;
}

.uc-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    flex-wrap: wrap; /* Allows timestamp to wrap on small screens */
}

.uc-card-author {
    font-weight: 600;
    color: #111827;
}

.uc-card-time {
    font-size: 0.875rem;
    color: #6b7280;
}

/* "Replying to" element for nested comments */
.uc-card-reply-context {
    font-size: 0.875rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}
.uc-card-reply-context svg {
    width: 16px;
    height: 16px;
}
.uc-card-reply-context strong {
    font-weight: 600;
    color: #4f46e5;
}

.uc-card-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #374151;
    margin: 0 0 0.5rem;
}

.uc-card-actions {
    display: flex;
    gap: 1.25rem;
}

.uc-card-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    transition: color 0.2s ease-in-out;
}
.uc-card-action-btn:hover {
    color: #111827;
}
.uc-card-action-btn svg {
    width: 20px;
    height: 20px;
}

/* Container for indented replies */
.uc-card-replies {
    /* This handles the indentation for a block of replies */
    margin-left: 3.5rem; /* The width of avatar + gap */
    display: grid;
    gap: 1.25rem;
}
</style>

<div class="comment-thread-container">

<div class="uc-card-wrapper">
        
        <article class="uc-card">
            <img src="https://placehold.co/88x88/f59e0b/ffffff/png?text=F" alt="Avatar of Felix Quinn" class="uc-card-avatar">
            <div class="uc-card-main">
                <header class="uc-card-header"><span class="uc-card-author">Felix Quinn</span><time class="uc-card-time" datetime="2023-10-27T10:30:00">&bull; 1hr ago</time></header>
                <p class="uc-card-text">This is an excellent breakdown. The point about accessible star ratings is particularly important and often overlooked. Great work!</p>
                <footer class="uc-card-actions"><button class="uc-card-action-btn"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 10V20M8 10L4 9.99998V20L8 20M8 10L13.1956 3.93847C13.6886 3.3633 14.4642 3.11604 15.1992 3.29977L15.2467 3.31166C16.5885 3.64711 17.1929 5.21057 16.4258 6.36135L14 9.99998H18.5604C19.8225 9.99998 20.7691 11.1546 20.5216 12.3922L19.3216 18.3922C19.1346 19.3271 18.3138 20 17.3604 20L8 20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Like</button><button class="uc-card-action-btn"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 17V15.8C20 14.1198 20 13.2798 19.673 12.638C19.3854 12.0735 18.9265 11.6146 18.362 11.327C17.7202 11 16.8802 11 15.2 11H4M4 11L8 7M4 11L8 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Reply</button></footer>
            </div>
        </article>

<div class="uc-card-replies">
            <article class="uc-card">
                <img src="https://placehold.co/88x88/1d4ed8/ffffff/png?text=N" alt="Avatar of Nora Ives" class="uc-card-avatar">
                <div class="uc-card-main">
                    <header class="uc-card-header"><span class="uc-card-author">Nora Ives</span><time class="uc-card-time" datetime="2023-10-27T10:38:00">&bull; 52m ago</time></header>
                    <div class="uc-card-reply-context">
                         <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 17V15.8C20 14.1198 20 13.2798 19.673 12.638C19.3854 12.0735 18.9265 11.6146 18.362 11.327C17.7202 11 16.8802 11 15.2 11H4M4 11L8 7M4 11L8 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                         Replying to <strong>@felixquinn</strong>
                    </div>
                    <p class="uc-card-text">Couldn't agree more. I've been advocating for this approach for years. It's great to see a practical template that other developers can use right away.</p>
                    <footer class="uc-card-actions"><button class="uc-card-action-btn"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 10V20M8 10L4 9.99998V20L8 20M8 10L13.1956 3.93847C13.6886 3.3633 14.4642 3.11604 15.1992 3.29977L15.2467 3.31166C16.5885 3.64711 17.1929 5.21057 16.4258 6.36135L14 9.99998H18.5604C19.8225 9.99998 20.7691 11.1546 20.5216 12.3922L19.3216 18.3922C19.1346 19.3271 18.3138 20 17.3604 20L8 20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Like</button><button class="uc-card-action-btn"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 17V15.8C20 14.1198 20 13.2798 19.673 12.638C19.3854 12.0735 18.9265 11.6146 18.362 11.327C17.7202 11 16.8802 11 15.2 11H4M4 11L8 7M4 11L8 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Reply</button></footer>
                </div>
            </article>
        </div>
    </div>

<div class="uc-card-wrapper">
        <article class="uc-card">
            <img src="https://placehold.co/88x88/65a30d/ffffff/png?text=A" alt="Avatar of Alex Rivera" class="uc-card-avatar">
            <div class="uc-card-main">
                <header class="uc-card-header"><span class="uc-card-author">Alex Rivera</span><time class="uc-card-time" datetime="2023-10-27T11:05:00">&bull; 25m ago</time></header>
                <p class="uc-card-text">Just implemented this on my blog's new theme. Dropped in perfectly. This saved me at least a couple of hours.</p>
                 <footer class="uc-card-actions"><button class="uc-card-action-btn"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 10V20M8 10L4 9.99998V20L8 20M8 10L13.1956 3.93847C13.6886 3.3633 14.4642 3.11604 15.1992 3.29977L15.2467 3.31166C16.5885 3.64711 17.1929 5.21057 16.4258 6.36135L14 9.99998H18.5604C19.8225 9.99998 20.7691 11.1546 20.5216 12.3922L19.3216 18.3922C19.1346 19.3271 18.3138 20 17.3604 20L8 20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Like</button><button class="uc-card-action-btn"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 17V15.8C20 14.1198 20 13.2798 19.673 12.638C19.3854 12.0735 18.9265 11.6146 18.362 11.327C17.7202 11 16.8802 11 15.2 11H4M4 11L8 7M4 11L8 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Reply</button></footer>
            </div>
        </article>
    </div>

</div>

View Output