Open In App

Semantic-UI Comment Variations Threaded Variant

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

Semantic UI has a bunch of components for users to design web pages. One of them is “Comment”. A comment is the user feedback to the website. There are different variations of comments. One of the variations is “threaded”

Semantic UI Comment Threaded Variation is a list of comments that can be threaded to show the relationship between different conversations or comments from users. For example, replying to a comment. In this article, we will implement comment threaded variation with code examples.

Semantic-UI Comment Variations Threaded Variant Class:

  • threaded: This class is used to create a comment section to show the relationship between conversations.

Syntax:

<div class="ui threaded comments">
     <div class="ui comment">
        ....
     </div>
     <div class="ui comment">
       ....
     </div>
</div>

Below example illustrate the Semantic-UI Comment Variations Threaded Variant:

Example: The following example demonstrates the threaded comment variation with other relevant classes.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
  
    <link rel="stylesheet"
          href=
</head>
  
<body>
    <center>
        <h1 class="ui green">Geeksforgeeks</h1>
        <strong>Semantic UI Comment threaded</strong>
    </center>
  
    <div class="ui threaded comments">
        <h3 class="ui dividing header"></h3>
  
        <!-- first user's comment -->
        <div class="comment">
            <a class="avatar">
                <img src=
            </a>
            <div class="content">
                <a class="author">John</a>
                <div class="metadata">
                    <span class="date">
                      Yesterday at 9:10PM
                    </span>
                </div>
                <div class="text">
                    <p>This platform is outstanding.</p>
                </div>
                <div class="actions">
                    <a class="reply">Reply</a>
                </div>
            </div>
        </div>
  
        <!-- second user's comment -->
        <div class="comment">
            <a class="avatar">
                <img src=
            </a>
            <div class="content">
                <a class="author">Peter</a>
                <div class="metadata">
                    <span class="date">
                      Today at 12:30AM
                    </span>
                </div>
                <div class="text">
                    <p>This platform helped me learn DSA.</p>
                </div>
                <div class="actions">
                    <a class="reply">Reply</a>
                </div>
            </div>
  
            <!-- Comment Threaded Variation -->
            <!-- Reply to second user's comment -->
            <div class="comments">
                <div class="comment">
                    <a class="avatar">
                        <img src=
                    </a>
                    <div class="content">
                        <a class="author">
                          Geeks for Geeks
                        </a>
                        <div class="metadata">
                            <span class="date">Just now</span>
                        </div>
                        <div class="text">
                            Thanks Peter xD
                        </div>
                        <div class="actions">
                            <a class="reply">Reply</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
  
        <!-- Third user's comment -->
        <div class="comment">
            <a class="avatar">
                <img src=
            </a>
            <div class="content">
                <a class="author">Joe</a>
                <div class="metadata">
                    <span class="date">5 days ago</span>
                </div>
                <div class="text">
                    Dude, this is fantastic. Thanks so much 🙂
                </div>
                <div class="actions">
                    <a class="reply">Reply</a>
                </div>
            </div>
        </div>
  
        <form class="ui reply form">
            <div class="field">
                <textarea></textarea>
            </div>
            <button class="ui primary button">
            Reply
          </button>
        </form>
    </div>
</body>
  
</html>



Output :
Semantic-UI Comment Variations Threaded Variant

Semantic-UI Comment Variations Threaded Variant

Reference Link: https://semantic-ui.com/views/comment.html#threaded



Last Updated : 03 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads