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

Family

comments

Tier

base

Kind

component

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.