UIKit CSS Tutorial
Introduction →

Comment Component

Comment Component: UIKit provides a comprehensive comment system for building threaded discussions, feedback sections, and social comment features. It includes nested comments, user avatars, timestamps, and voting systems.

Live Examples

1. Basic Comment Structure

Example Preview
User Avatar

John Doe

This is a great article! I found the section about responsive design particularly helpful. Looking forward to more content like this.

Code:
<!-- Basic Comment Structure -->
<article class="uk-comment uk-comment-primary">
  <header class="uk-comment-header uk-grid-medium uk-flex-middle" uk-grid>
    <div class="uk-width-auto">
      <img class="uk-comment-avatar" src="avatar.jpg" width="50" height="50" alt="User Avatar">
    </div>
    <div class="uk-width-expand">
      <h4 class="uk-comment-title uk-margin-remove">
        <a class="uk-link-reset" href="#">John Doe</a>
      </h4>
      <ul class="uk-comment-meta uk-subnav uk-subnav-divider uk-margin-remove-top">
        <li><a href="#">2 days ago</a></li>
        <li><a href="#">Reply</a></li>
        <li><a href="#">Like</a></li>
        <li><a href="#">Share</a></li>
      </ul>
    </div>
  </header>
  <div class="uk-comment-body">
    <p>This is a great article! I found the section about responsive design particularly helpful.</p>
  </div>
</article>

<!-- Default Style Comment -->
<article class="uk-comment uk-comment-default">
  <header class="uk-comment-header uk-grid-medium uk-flex-middle" uk-grid>
    <div class="uk-width-auto">
      <img class="uk-comment-avatar" src="avatar.jpg" width="50" height="50" alt="User Avatar">
    </div>
    <div class="uk-width-expand">
      <h4 class="uk-comment-title uk-margin-remove">
        <a class="uk-link-reset" href="#">Jane Smith</a>
      </h4>
      <ul class="uk-comment-meta uk-subnav uk-subnav-divider uk-margin-remove-top">
        <li><a href="#">1 hour ago</a></li>
        <li><a href="#">Reply</a></li>
        <li><a href="#">Like</a></li>
      </ul>
    </div>
  </header>
  <div class="uk-comment-body">
    <p>Thanks for sharing this information.</p>
  </div>
</article>

2. Nested Comments (Threaded Replies)

Example Preview
Code:
<!-- Nested Comments -->
<article class="uk-comment uk-comment-primary">
  <!-- Main comment content -->
  <header class="uk-comment-header">...</header>
  <div class="uk-comment-body">...</div>
</article>

<!-- Comment Replies List -->
<div class="uk-comment-list uk-margin-medium-left">
  <!-- First Level Reply -->
  <article class="uk-comment uk-comment-default">
    <header class="uk-comment-header">...</header>
    <div class="uk-comment-body">...</div>
  </article>
  
  <!-- Second Level Reply (Nested) -->
  <div class="uk-comment-list uk-margin-medium-left">
    <article class="uk-comment uk-comment-secondary">
      <header class="uk-comment-header">...</header>
      <div class="uk-comment-body">...</div>
    </article>
  </div>
  
  <!-- Another First Level Reply -->
  <article class="uk-comment uk-comment-default">
    <header class="uk-comment-header">...</header>
    <div class="uk-comment-body">...</div>
  </article>
</div>

3. Comment with Actions & Voting

Example Preview
User Avatar

Emma DavisVerified

Posted 5 hours ago • Edited 2 hours ago

This tutorial saved me hours of work! The examples are clear and easy to follow. I especially appreciate the real-world use cases.

Helpful12 people found this helpful
User Avatar
OP

Author NameAuthorAdmin

Original Poster • Last active: Just now
Top Contributor

Thanks for the feedback everyone! I'm glad you found the tutorial helpful. I'll be creating more advanced tutorials soon.

Code:
<!-- Comment with Actions -->
<article class="uk-comment uk-comment-default">
  <header class="uk-comment-header uk-grid-medium uk-flex-middle" uk-grid>
    <div class="uk-width-auto">
      <img class="uk-comment-avatar uk-border-circle" src="avatar.jpg" alt="User Avatar">
    </div>
    <div class="uk-width-expand">
      <div class="uk-flex uk-flex-between uk-flex-middle">
        <div>
          <h4 class="uk-comment-title uk-margin-remove">
            <a class="uk-link-reset" href="#">Emma Davis</a>
            <span class="uk-label uk-label-success uk-margin-small-left">Verified</span>
          </h4>
          <div class="uk-comment-meta">
            <span>Posted 5 hours ago • Edited 2 hours ago</span>
          </div>
        </div>
        <div class="uk-text-meta">
          <button class="uk-button uk-button-text">
            <span uk-icon="icon: more"></span>
          </button>
        </div>
      </div>
    </div>
  </header>
  <div class="uk-comment-body">
    <p>Comment content here...</p>
    
    <!-- Action Buttons -->
    <div class="uk-grid-small uk-child-width-auto" uk-grid>
      <div>
        <button class="uk-button uk-button-default uk-button-small">
          <span uk-icon="icon: heart"></span>
          <span class="uk-margin-small-left">42</span>
        </button>
      </div>
      <div>
        <button class="uk-button uk-button-default uk-button-small">
          <span uk-icon="icon: reply"></span>
          <span class="uk-margin-small-left">Reply</span>
        </button>
      </div>
      <!-- More buttons... -->
    </div>
  </div>
  
  <!-- Comment Footer -->
  <footer class="uk-comment-footer">
    <div class="uk-grid-small uk-flex-middle" uk-grid>
      <div class="uk-width-expand">
        <div class="uk-flex uk-flex-wrap uk-flex-middle">
          <span class="uk-label uk-label-success uk-margin-small-right">
            <span uk-icon="icon: check"></span>
            Helpful
          </span>
          <span class="uk-text-meta">12 people found this helpful</span>
        </div>
      </div>
      <div class="uk-width-auto">
        <div class="uk-button-group">
          <button class="uk-button uk-button-default uk-button-small">
            <span uk-icon="icon: chevron-up"></span>
            Upvote
          </button>
          <button class="uk-button uk-button-default uk-button-small">
            <span uk-icon="icon: chevron-down"></span>
            Downvote
          </button>
        </div>
      </div>
    </div>
  </footer>
</article>

<!-- Comment with Badges -->
<article class="uk-comment uk-comment-primary">
  <header class="uk-comment-header uk-grid-medium uk-flex-middle" uk-grid>
    <div class="uk-width-auto">
      <div class="uk-position-relative">
        <img class="uk-comment-avatar uk-border-circle" src="avatar.jpg" alt="User Avatar">
        <div class="uk-badge uk-badge-notification uk-position-top-right">OP</div>
      </div>
    </div>
    <div class="uk-width-expand">
      <h4 class="uk-comment-title uk-margin-remove">
        <a class="uk-link-reset" href="#">Author Name</a>
        <span class="uk-label uk-label-warning uk-margin-small-left">Author</span>
        <span class="uk-label">Admin</span>
      </h4>
    </div>
  </header>
  <div class="uk-comment-body">
    <p>Comment content...</p>
  </div>
</article>

4. Comment Forms & Reply System

Example Preview

Add a Comment

User Avatar

Michael Brown

Has anyone tried implementing this with React? I'm curious about the best approach.

User Avatar

Lisa Wang

Posted 3 days ago • Last edited: 1 hour ago

This solution worked perfectly for my project. The performance improvement was significant!

Code:
<!-- New Comment Form -->
<div class="uk-card uk-card-default uk-card-body">
  <h4 class="uk-card-title">Add a Comment</h4>
  <form>
    <div class="uk-margin">
      <textarea class="uk-textarea" rows="4" placeholder="Write your comment here..."></textarea>
    </div>
    <div class="uk-grid-small uk-flex-middle" uk-grid>
      <div class="uk-width-expand">
        <div class="uk-flex uk-flex-wrap uk-flex-middle">
          <button class="uk-button uk-button-default uk-button-small" type="button">
            <span uk-icon="icon: image"></span>
          </button>
          <!-- More formatting buttons -->
        </div>
      </div>
      <div class="uk-width-auto">
        <button class="uk-button uk-button-primary" type="submit">Post Comment</button>
      </div>
    </div>
  </form>
</div>

<!-- Reply Form with Toggle -->
<article class="uk-comment uk-comment-default">
  <header class="uk-comment-header">
    <h4 class="uk-comment-title">Michael Brown</h4>
    <ul class="uk-comment-meta">
      <li><a href="#" uk-toggle="target: #reply-form-1">Reply</a></li>
    </ul>
  </header>
  <div class="uk-comment-body">
    <p>Comment content...</p>
  </div>
  
  <!-- Hidden Reply Form -->
  <div id="reply-form-1" hidden>
    <div class="uk-card uk-card-body uk-card-secondary">
      <form>
        <div class="uk-grid-small" uk-grid>
          <div class="uk-width-1-1">
            <textarea class="uk-textarea" rows="3" placeholder="Reply to Michael Brown..."></textarea>
          </div>
          <div class="uk-width-auto">
            <div class="uk-button-group">
              <button class="uk-button uk-button-default" type="button" uk-toggle="target: #reply-form-1">Cancel</button>
              <button class="uk-button uk-button-primary" type="submit">Reply</button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</article>

<!-- Comment with Edit Form -->
<article class="uk-comment uk-comment-primary">
  <header class="uk-comment-header">
    <div class="uk-flex uk-flex-between uk-flex-middle">
      <h4 class="uk-comment-title">Lisa Wang</h4>
      <div class="uk-button-group">
        <button class="uk-button uk-button-text uk-button-small" uk-toggle="target: #edit-form-1">
          <span uk-icon="icon: pencil"></span> Edit
        </button>
      </div>
    </div>
  </header>
  
  <!-- Original Comment -->
  <div class="uk-comment-body" id="original-comment-1">
    <p>Original comment content...</p>
  </div>
  
  <!-- Edit Form -->
  <div id="edit-form-1" class="uk-comment-body" hidden>
    <form>
      <div class="uk-margin">
        <textarea class="uk-textarea" rows="3">Original comment text...</textarea>
      </div>
      <div class="uk-flex uk-flex-right">
        <button class="uk-button uk-button-default" type="button" uk-toggle="target: #edit-form-1; target: #original-comment-1">Cancel</button>
        <button class="uk-button uk-button-primary" type="submit">Save Changes</button>
      </div>
    </form>
  </div>
</article>

5. Comment List & Pagination

Example Preview

Comments (24)

Showing 1-10 of 24 comments
User Avatar

James WilsonTop Comment

2 hours ago • +15 votes

Excellent tutorial! The step-by-step approach made it easy to follow even for beginners.

User Avatar

Robert Taylor

5 hours ago • +8 votes

Could you provide more examples of responsive breakpoints?

User Avatar

Maria Garcia

1 day ago • 0 votes

I implemented this in my project and it works great! Thanks for sharing.

Showing 10 of 24 comments
Code:
<!-- Comments Header -->
<div class="uk-flex uk-flex-between uk-flex-middle">
  <div>
    <h3 class="uk-margin-remove-bottom">Comments (24)</h3>
    <div class="uk-text-meta">Showing 1-10 of 24 comments</div>
  </div>
  <div>
    <div class="uk-button-group">
      <button class="uk-button uk-button-default uk-button-small uk-active">Newest</button>
      <button class="uk-button uk-button-default uk-button-small">Oldest</button>
      <button class="uk-button uk-button-default uk-button-small">Top Rated</button>
    </div>
  </div>
</div>

<!-- Comments List -->
<div class="uk-comment-list">
  <!-- Comment 1 -->
  <article class="uk-comment uk-comment-default">
    <header class="uk-comment-header uk-grid-medium uk-flex-middle" uk-grid>
      <div class="uk-width-auto">
        <img class="uk-comment-avatar" src="avatar.jpg" alt="User Avatar">
      </div>
      <div class="uk-width-expand">
        <h4 class="uk-comment-title uk-margin-remove">
          <a class="uk-link-reset" href="#">James Wilson</a>
          <span class="uk-label uk-label-success uk-margin-small-left">Top Comment</span>
        </h4>
        <div class="uk-comment-meta">
          <span>2 hours ago • <span class="uk-text-success">+15 votes</span></span>
        </div>
      </div>
    </header>
    <div class="uk-comment-body">
      <p>Comment content...</p>
    </div>
  </article>
  
  <!-- More comments... -->
</div>

<!-- Pagination -->
<div class="uk-flex uk-flex-center">
  <ul class="uk-pagination">
    <li><a href="#"><span uk-pagination-previous></span></a></li>
    <li class="uk-active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li class="uk-disabled"><span>...</span></li>
    <li><a href="#">10</a></li>
    <li><a href="#"><span uk-pagination-next></span></a></li>
  </ul>
</div>

<!-- Load More Button -->
<div class="uk-text-center">
  <button class="uk-button uk-button-default">
    <span uk-icon="icon: refresh" class="uk-margin-small-right"></span>
    Load More Comments
  </button>
  <div class="uk-text-meta uk-margin-small-top">Showing 10 of 24 comments</div>
</div>

Comment Classes Reference

Core Classes

ClassDescriptionUsage
.uk-commentBase comment container<article class="uk-comment">
.uk-comment-primaryPrimary style commentuk-comment uk-comment-primary
.uk-comment-defaultDefault style commentuk-comment uk-comment-default
.uk-comment-secondarySecondary style commentuk-comment uk-comment-secondary
.uk-comment-bodyComment content area<div class="uk-comment-body">
.uk-comment-headerComment header area<header class="uk-comment-header">
.uk-comment-footerComment footer area<footer class="uk-comment-footer">

Structure Classes

ClassDescriptionUsage
.uk-comment-titleComment author name/title<h4 class="uk-comment-title">
.uk-comment-metaComment metadata (time, actions)<ul class="uk-comment-meta">
.uk-comment-avatarUser avatar/image<img class="uk-comment-avatar">
.uk-comment-listContainer for multiple comments<div class="uk-comment-list">
.uk-comment-replyReply form container<div class="uk-comment-reply">

Complete Real-World Examples

Blog Post Comments Section

<!-- Blog Comments Section -->
<div class="uk-card uk-card-default uk-card-body">
  <h2 class="uk-card-title">Comments Section</h2>
  
  <!-- Comment Stats -->
  <div class="uk-grid-small uk-flex-middle" uk-grid>
    <div class="uk-width-expand">
      <div class="uk-flex uk-flex-middle">
        <div class="uk-margin-small-right">
          <span class="uk-text-large uk-text-bold">42</span>
          <span class="uk-text-meta">Comments</span>
        </div>
        <div class="uk-margin-small-right">
          <span class="uk-text-large uk-text-bold">128</span>
          <span class="uk-text-meta">Replies</span>
        </div>
        <div>
          <span class="uk-label uk-label-success">
            <span uk-icon="icon: comments"></span>
            Active Discussion
          </span>
        </div>
      </div>
    </div>
    <div class="uk-width-auto">
      <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button">
          Sort By <span uk-icon="icon: triangle-down"></span>
        </button>
        <div uk-dropdown="mode: click">
          <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Newest First</a></li>
            <li><a href="#">Oldest First</a></li>
            <li><a href="#">Most Liked</a></li>
            <li><a href="#">Author Replies</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Featured Comments -->
  <div class="uk-margin-medium-top">
    <h3 class="uk-heading-divider">Featured Comments</h3>
    <div class="uk-comment-list">
      <article class="uk-comment uk-comment-primary uk-card uk-card-secondary uk-card-body">
        <header class="uk-comment-header uk-grid-medium uk-flex-middle" uk-grid>
          <div class="uk-width-auto">
            <img class="uk-comment-avatar uk-border-circle" src="featured-avatar.jpg" width="60" height="60" alt="Featured User">
          </div>
          <div class="uk-width-expand">
            <h4 class="uk-comment-title uk-margin-remove">
              <a class="uk-link-reset" href="#">Expert Reviewer</a>
              <span class="uk-label uk-label-warning uk-margin-small-left">Expert</span>
            </h4>
            <div class="uk-comment-meta">
              <span>Technical Reviewer • 2 days ago</span>
            </div>
          </div>
          <div class="uk-width-auto">
            <button class="uk-button uk-button-default">
              <span uk-icon="icon: star"></span>
              Featured
            </button>
          </div>
        </header>
        <div class="uk-comment-body">
          <p>This is an excellent tutorial that covers all the essential aspects of UIKit's comment system. The examples are practical and well-explained.</p>
          <div class="uk-alert-success" uk-alert>
            <p><strong>Editor's Note:</strong> This comment has been featured for its detailed and helpful feedback.</p>
          </div>
        </div>
      </article>
    </div>
  </div>
  
  <!-- All Comments -->
  <div class="uk-margin-medium-top">
    <h3 class="uk-heading-divider">All Comments</h3>
    <div class="uk-comment-list">
      <!-- Comment threads would go here -->
    </div>
  </div>
  
  <!-- Comment Form -->
  <div class="uk-margin-large-top">
    <div class="uk-card uk-card-secondary uk-card-body">
      <h3 class="uk-card-title">Join the Discussion</h3>
      <form class="uk-grid-small" uk-grid>
        <div class="uk-width-1-1">
          <textarea class="uk-textarea" rows="5" placeholder="Share your thoughts... (Markdown supported)"></textarea>
        </div>
        <div class="uk-width-1-2@s">
          <div class="uk-text-small">
            <label><input class="uk-checkbox" type="checkbox"> Notify me of new comments</label>
          </div>
        </div>
        <div class="uk-width-1-2@s">
          <div class="uk-flex uk-flex-right">
            <button class="uk-button uk-button-default uk-margin-small-right" type="button">Preview</button>
            <button class="uk-button uk-button-primary" type="submit">Post Comment</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

Product Review System

<!-- Product Reviews -->
<div class="uk-card uk-card-default uk-card-body">
  <h2 class="uk-card-title">Customer Reviews</h2>
  
  <!-- Review Summary -->
  <div class="uk-grid-medium" uk-grid>
    <div class="uk-width-1-3@m">
      <div class="uk-text-center">
        <div class="uk-text-large uk-text-bold">4.5</div>
        <div class="uk-margin-small">
          <span class="uk-text-warning" uk-icon="icon: star; ratio: 0.8"></span>
          <span class="uk-text-warning" uk-icon="icon: star; ratio: 0.8"></span>
          <span class="uk-text-warning" uk-icon="icon: star; ratio: 0.8"></span>
          <span class="uk-text-warning" uk-icon="icon: star; ratio: 0.8"></span>
          <span class="uk-text-warning" uk-icon="icon: star; ratio: 0.8"></span>
        </div>
        <div class="uk-text-meta">Based on 128 reviews</div>
      </div>
    </div>
    <div class="uk-width-2-3@m">
      <!-- Rating breakdown -->
      <div class="uk-grid-small uk-child-width-1-1" uk-grid>
        <div>
          <div class="uk-flex uk-flex-middle">
            <div class="uk-width-expand">
              <div class="uk-progress">
                <div class="uk-progress-bar" style="width: 80%;"></div>
              </div>
            </div>
            <div class="uk-width-auto uk-text-small uk-margin-small-left">
              5 stars (102)
            </div>
          </div>
        </div>
        <!-- More rating bars... -->
      </div>
    </div>
  </div>
  
  <!-- Reviews List -->
  <div class="uk-margin-medium-top">
    <div class="uk-comment-list">
      <!-- Review 1 -->
      <article class="uk-comment uk-comment-default uk-padding uk-background-muted uk-border-rounded">
        <header class="uk-comment-header uk-grid-medium uk-flex-middle" uk-grid>
          <div class="uk-width-auto">
            <img class="uk-comment-avatar uk-border-circle" src="user1.jpg" width="50" height="50" alt="User">
          </div>
          <div class="uk-width-expand">
            <h4 class="uk-comment-title uk-margin-remove">
              <a class="uk-link-reset" href="#">Verified Buyer</a>
              <span class="uk-label uk-label-success uk-margin-small-left">Verified Purchase</span>
            </h4>
            <div class="uk-comment-meta">
              <div class="uk-flex uk-flex-wrap uk-flex-middle">
                <div class="uk-margin-small-right">
                  <span class="uk-text-warning" uk-icon="icon: star"></span>
                  <span class="uk-text-warning" uk-icon="icon: star"></span>
                  <span class="uk-text-warning" uk-icon="icon: star"></span>
                  <span class="uk-text-warning" uk-icon="icon: star"></span>
                  <span class="uk-text-warning" uk-icon="icon: star"></span>
                </div>
                <div>Purchased on December 12, 2023</div>
              </div>
            </div>
          </div>
        </header>
        <div class="uk-comment-body">
          <h5>Excellent product quality!</h5>
          <p>The product arrived on time and works exactly as described. The build quality is excellent and it's very easy to use.</p>
          
          <!-- Review Images -->
          <div class="uk-grid-small uk-child-width-1-4" uk-grid>
            <div>
              <img src="review-image1.jpg" alt="Product Image">
            </div>
            <div>
              <img src="review-image2.jpg" alt="Product Image">
            </div>
          </div>
          
          <!-- Helpful Votes -->
          <div class="uk-flex uk-flex-between uk-flex-middle uk-margin-top">
            <div>
              <span class="uk-text-meta">Was this review helpful?</span>
              <button class="uk-button uk-button-text uk-margin-small-left">Yes (24)</button>
              <button class="uk-button uk-button-text">No (2)</button>
            </div>
            <div>
              <button class="uk-button uk-button-text">Report</button>
            </div>
          </div>
        </div>
        
        <!-- Seller Response -->
        <div class="uk-comment-reply uk-margin-top">
          <article class="uk-comment uk-comment-primary">
            <header class="uk-comment-header uk-grid-medium uk-flex-middle" uk-grid>
              <div class="uk-width-auto">
                <span class="uk-icon uk-icon-image" style="background-color: #1e87f0; color: white; padding: 5px; border-radius: 50%;">S</span>
              </div>
              <div class="uk-width-expand">
                <h4 class="uk-comment-title uk-margin-remove">
                  <span class="uk-text-bold">Seller Response</span>
                  <span class="uk-label uk-label-warning uk-margin-small-left">Official Response</span>
                </h4>
                <div class="uk-comment-meta">
                  <span>December 13, 2023</span>
                </div>
              </div>
            </header>
            <div class="uk-comment-body">
              <p>Thank you for your positive review! We're glad you're satisfied with our product. If you have any questions, please don't hesitate to contact our support team.</p>
            </div>
          </article>
        </div>
      </article>
      
      <!-- More reviews... -->
    </div>
  </div>
</div>

Custom Comment Styles

/* Custom Comment Styles */
/* Chat-style Comments */
.uk-comment-chat {
  max-width: 80%;
  margin-left: auto;
  margin-right: 0;
  background: #e3f2fd;
  border-radius: 15px 15px 0 15px;
  padding: 15px;
}

.uk-comment-chat .uk-comment-header {
  margin-bottom: 10px;
}

.uk-comment-chat .uk-comment-body {
  padding: 0;
}

/* Timeline Comments */
.uk-comment-timeline {
  position: relative;
  padding-left: 40px;
}

.uk-comment-timeline:before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e5e5e5;
}

.uk-comment-timeline .uk-comment-avatar {
  position: absolute;
  left: -40px;
  top: 0;
  border: 3px solid white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Card-style Comments */
.uk-comment-card {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.uk-comment-card:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

/* Minimal Comments */
.uk-comment-minimal {
  background: none;
  border: none;
  padding: 0;
}

.uk-comment-minimal .uk-comment-header {
  margin-bottom: 5px;
}

.uk-comment-minimal .uk-comment-body {
  padding: 0;
  font-size: 0.9em;
}

/* Gradient Background Comments */
.uk-comment-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 10px;
  padding: 20px;
}

.uk-comment-gradient .uk-comment-title a {
  color: white;
}

.uk-comment-gradient .uk-comment-meta {
  color: rgba(255,255,255,0.8);
}

/* Comment with Quote */
.uk-comment-quote {
  border-left: 4px solid #1e87f0;
  padding-left: 20px;
  background: #f8f9fa;
}

.uk-comment-quote .uk-comment-body:before {
  content: '"';
  font-size: 3em;
  color: #1e87f0;
  line-height: 0;
  vertical-align: -0.4em;
}

.uk-comment-quote .uk-comment-body:after {
  content: '"';
  font-size: 3em;
  color: #1e87f0;
  line-height: 0;
  vertical-align: -0.4em;
}

/* Animated Comments */
.uk-comment-animated {
  animation: fadeInUp 0.5s ease;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Comment Badge Styles */
.uk-comment-badge {
  position: relative;
}

.uk-comment-badge:after {
  content: 'NEW';
  position: absolute;
  top: -10px;
  right: -10px;
  background: #f0506e;
  color: white;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.7em;
  font-weight: bold;
}

/* Usage Examples */
<article class="uk-comment uk-comment-chat">
  <!-- Chat style comment -->
</article>

<article class="uk-comment uk-comment-timeline">
  <!-- Timeline comment -->
</article>

<article class="uk-comment uk-comment-card">
  <!-- Card style comment -->
</article>

<article class="uk-comment uk-comment-gradient">
  <!-- Gradient comment -->
</article>

<article class="uk-comment uk-comment-quote">
  <!-- Quote style comment -->
</article>

<article class="uk-comment uk-comment-animated">
  <!-- Animated comment -->
</article>
Best Practices for Comment Systems:
  • Always include user avatars for better visual identification
  • Use clear timestamps and relative time formats
  • Implement nested comments with proper indentation levels
  • Provide moderation tools for administrators
  • Include voting/rating systems for community moderation
  • Implement spam protection and content filtering
  • Make comment forms accessible and user-friendly
  • Support markdown or rich text formatting
  • Include notification systems for replies
  • Implement pagination for large comment threads
  • Ensure mobile-responsive comment layouts
  • Provide keyboard navigation for accessibility
  • Include user verification badges for trusted users
  • Implement comment sorting options (newest, oldest, top-rated)
  • Add report/flag functionality for inappropriate content
Introduction →
Logo

HiFi Toolkit is a free online platform offering essential tools and converters for developers, designers, and everyday productivity tasks.

Follow Us

Our Tools
Our Company
Special Tools

© 2026 HiFi Toolkit. All rights reserved.

Terms & ConditionsPrivacy Policy