comments discussion blog social replies comments discussion blog reply form social feedback blog comment section comment list with reply form
Comments Base
Fetch pattern JSON:
curl https://webspire.de/patterns/comments/base.json base.html
<section class="ws-comments" aria-label="Comments">
<h2 class="text-lg font-semibold text-[var(--ws-comments-text)]">3 Comments</h2>
<form class="mt-6" aria-label="Add a comment">
<label for="comment-text" class="sr-only">Your comment</label>
<textarea id="comment-text" rows="3" placeholder="Write a comment..." class="block w-full rounded-lg border border-[var(--ws-comments-border)] bg-[var(--ws-comments-bg)] px-4 py-3 text-sm text-[var(--ws-comments-text)] shadow-sm placeholder:opacity-50 focus:border-[var(--ws-comments-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-comments-action-bg)]"></textarea>
<div class="mt-3 flex justify-end">
<button type="submit" class="rounded-lg bg-[var(--ws-comments-action-bg)] px-4 py-2 text-sm font-medium text-[var(--ws-comments-action-text)] transition hover:opacity-90">Submit</button>
</div>
</form>
<div class="mt-8 space-y-6">
<article class="flex gap-4">
<span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-sm font-medium text-indigo-700">AB</span>
<div>
<div class="flex items-center gap-2">
<span class="text-sm font-semibold text-[var(--ws-comments-text)]">Alice Brown</span>
<time class="text-xs text-[var(--ws-comments-text-muted)]">2 hours ago</time>
</div>
<p class="mt-1 text-sm text-[var(--ws-comments-text-soft)]">Great article! I found the section on responsive design particularly helpful.</p>
<button type="button" class="mt-2 text-xs font-medium text-[var(--ws-comments-action-bg)]">Reply</button>
</div>
</article>
<article class="flex gap-4">
<span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-sm font-medium text-emerald-700">CD</span>
<div>
<div class="flex items-center gap-2">
<span class="text-sm font-semibold text-[var(--ws-comments-text)]">Chris Davis</span>
<time class="text-xs text-[var(--ws-comments-text-muted)]">5 hours ago</time>
</div>
<p class="mt-1 text-sm text-[var(--ws-comments-text-soft)]">Would love to see a follow-up on accessibility best practices. This is a solid foundation.</p>
<button type="button" class="mt-2 text-xs font-medium text-[var(--ws-comments-action-bg)]">Reply</button>
</div>
</article>
<article class="flex gap-4">
<span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-amber-100 text-sm font-medium text-amber-700">EF</span>
<div>
<div class="flex items-center gap-2">
<span class="text-sm font-semibold text-[var(--ws-comments-text)]">Emma Foster</span>
<time class="text-xs text-[var(--ws-comments-text-muted)]">1 day ago</time>
</div>
<p class="mt-1 text-sm text-[var(--ws-comments-text-soft)]">Thanks for sharing this! I've bookmarked it for reference in my next project.</p>
<button type="button" class="mt-2 text-xs font-medium text-[var(--ws-comments-action-bg)]">Reply</button>
</div>
</article>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
commentsdiscussionblogsocialreplies
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Comment count heading. |
| form | Yes | Comment input form with textarea and submit button. |
| comments | Yes | List of existing comments with avatar, author, date, text, and reply link. |
Blog comment section with a comment count heading, text input form, and a list of existing comments. Each comment shows an avatar with initials, author name, timestamp, comment text, and a reply link.