Semantic-UI Comment Reply Form Content

Last Updated : 15 Jun, 2022

In this article, we are going to learn about comment replies from content. Semantic-UI is an open-source front-end development framework like bootstrap that is used to design a responsive website.

It is equipped with pre-built semantic components that help create responsive layouts using user-friendly HTML, and it uses predefined CSS and jQuery to incorporate different frameworks.

There are four types of content in the comment element, and these contents are listed below:

Avatar content: The profile image that is present on the left side of the comment, and that small-size profile image is called an avatar.
Metadata content: Whenever an individual makes any comment on a website then there is an arbitrary amount of metadata is defined. A comment can contain extra information about the comment.
Actions: A comment can contain a list of some actions a user may perform related to the comment for example if a user wants to hide the comment then they can hide the comment if there was an option for that.
Reply form: A comment can contain a form to reply to a comment, and this may have arbitrary content.

In simple words, whenever you made a comment on your Instagram profile then beneath your comment there is an option of replying to them again.

Syntax:

<div class="actions">
    <a class="reply">reply</a>
</div>

Approach:

Create an HTML file and import semantic-UI framework.
After that, you just have to include a comment with the reply form.
In the final step, you can apply some CSS properties to enhance your website interface.

Example1: The below example illustrates the Semantic-UI comment reply form content.

HTML

< !DOCTYPE html >
    <html>
 
        <head>
            <link
                href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
                rel="stylesheet" />
        </head>
 
        <body>
            <center>
                <h1 class="ui header green">
                    GeeksforGeeks
                </h1>
 
                <strong>
                    Semantic UI - Comment Reply Form Content
                </strong>
            </center>
 
 
            <div class="ui large comments">
                <h3 class="ui dividing header">
                    Comments
                </h3>
 
                <div class="comment">
                    <a class="avatar">
                        <!-- If you need any profile picture -->
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220210074537/color3.png" />
                    </a>
 
                    <div class="content">
                        <a class="author">Avantika</a>
                        <div class="metadata">
                            <span class="date">
                                Today at 5:42PM
                            </span>
                        </div>
 
                        <div class="text">
                            How artistic!
                        </div>
 
                        <div class="actions">
                            <a class="reply">Reply</a>
                        </div>
                    </div>
                </div>
            </div>
        </body>
 
    </html>

Output:

Example2: The below example illustrates the Semantic-UI comment reply form content.

HTML

<!DOCTYPE html>
<html>
<head>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />
</head>
<body>
    <center>
        <h1 class="ui header green">
            GeeksforGeeks
        </h1>
        <strong>
            Semantic UI - Comment Reply Form Content
        </strong>
    </center>
    <div class="ui large comments">
        <h3 class="ui dividing header">
            Comments
        </h3>
        <div class="ui comments">
            <div class="comment">
                <a class="avatar">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220525220724/green1-300x171.jpg">
                </a>
                <div class="content">
                    <a class="author">Kishor</a>
                    <div class="metadata">
                        <span class="date">Today at 6:42PM</span>
                    </div>
                    <div class="text">
                        cool!
                    </div>
                    <div class="actions">
                        <a class="reply">Reply</a>
                    </div>
                </div>
            </div>
            <div class="comment">
                <a class="avatar">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220210074518/color11-300x169.png">
                </a>
                <div class="content">
                    <a class="author">raja</a>
                    <div class="metadata">
                        <span class="date">Yesterday at 12:30AM</span>
                    </div>
                    <div class="text">
                         
<p>This page is awesome </p>
 
                    </div>
                    <div class="actions">
                        <a class="reply">Reply</a>
                    </div>
                </div>
                <div class="comments">
                    <div class="comment">
                        <a class="avatar">
                            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220210074140/color2-300x166.jfif">
                        </a>
                        <div class="content">
                            <a class="author">Krishna</a>
                            <div class="metadata">
                                <span class="date">Just now</span>
                            </div>
                            <div class="text">
                                Thank you raja and kishor.
                            </div>
                            <div class="actions">
                                <a class="reply">Reply</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="comment">
                <form class="ui reply form">
                    <grammarly-extension data-grammarly-shadow-root="true"
                        style="position: absolute; top: 0px; left: 0px; pointer-events: none;"
                        class="cGcvT">
                    </grammarly-extension>
                    <grammarly-extension data-grammarly-shadow-root="true"
                        style="mix-blend-mode: darken; position: absolute; 
                            top: 0px; left: 0px; pointer-events: none;"
                        class="cGcvT"></grammarly-extension>
                    <div class="field">
                        <textarea spellcheck="false"></textarea>
                    </div>
                    <div class="ui blue labeled submit icon button">
                        <i class="icon edit"></i> Add Reply
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>