Semantic-UI | Comment
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. It uses a class to add CSS to the elements.
A comment is like a forum where you can give you feedback.
Example1: This example creating the comment section using Semantic-ui.
html
<!DOCTYPE html><html><head> <title>Semantic UI</title> <link href= rel="stylesheet" /> <script src= </script></head><body> <div style="margin-top: 20px" class="ui container"> <div class="ui comments"> <h3 class="ui dividing header">Comments</h3> <div class="comment"> <a class="avatar"> <img src= </a> <div class="content"> <a class="author">Geeksforgeeks</a> <div class="metadata"> <span class="date">Yesterday at 3:32PM</span> </div> <div class="text"> Good Work </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> <div class="comment"> <a class="avatar"> <img src= </a> <div class="content"> <a class="author">Rahul</a> <div class="metadata"> <span class="date">Yesterday at 12:30AM</span> </div> <div class="text"> <p>Nice Job, I wish I could do that.</p> </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> <div class="comments"> <div class="comment"> <a class="avatar"> <img src= </a> <div class="content"> <a class="author">Rishab</a> <div class="metadata"> <span class="date">2 Minutes ago</span> </div> <div class="text"> Just need some practice. </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> </div> </div> <div class="comment"> <a class="avatar"> <img src= </a> <div class="content"> <a class="author">Nitin</a> <div class="metadata"> <span class="date">3 days ago</span> </div> <div class="text"> Loved it! </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> <form class="ui reply form"> <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></body></html> |
Output:
Example2: This example creates the comment section using Semantic-ui.
HTML
<!DOCTYPE html><html><head> <title>Semantic UI Comment Types</title> <link href= rel="stylesheet" /> integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= </script> <style> body{ margin:20px; } </style> </head><body> <div class="ui container"> <hr> <br> <div class="ui comments"> <h2 class="ui dividing header">Comments</h2> <div class="comment"> <a class="avatar"> <img src= </a> <div class="content"> <a class="author">GeeksforGeeks</a> <div class="text"> Welcome to GeeksforGeeks. </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> <div class="comment"> <a class="avatar"> <img src= </a> <div class="content"> <a class="author">Krishna</a> <div class="text"> Thank you so much. </div> <div class="actions"> <a class="reply">Reply</a> </div> </div> </div> </div> <form class="ui reply form"> <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> </body></html> |
Output:
Please Login to comment...