Open In App

Semantic-UI Comment Actions Content

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. In this article, we are going to learn about comment actions content.  

It is equipped with pre-built semantic components that help create responsive layouts using user-friendly HTML. 

A comment can contain a list of actions a user may perform related to this comment in an application.

Semantic UI Comment Actions Content Class:

  • actions: This class is used to provide some action on the comment.

Syntax:

<div class="actions">...</div>

Example 1:The below example illustrates the Semantic UI comment actions content with the reply, save, hide,  and an icon class.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
    <style>
       body
       {
         margin-left:10px;
         margin-right:10px;
       }
    </style>
</head>
  
<body>
    <center>
        <h1 class="ui header green">GeeksforGeeks</h1>
        <strong>Semantic UI Comment Action</strong>
    </center>
      
    <div class="ui comments">
      <div class="comment">
            <a class="avatar">
              <img src=
            </a>
            <div class="content">
              <a class="author">Priya</a>
              <div class="text">
                GeeksforGeeks is the best site to learn DSA.
              </div>
              <div class="actions">
                <a class="reply">Reply</a>
                <a class="save">Save</a>
                <a class="hide">Hide</a>
                <a> <i class="expand icon"></i> Full-screen
                </a>
              </div>
            </div>
      </div>
    </div>
    <form class="ui reply form">
        <div class="field">
          <textarea></textarea>
        </div>
        <div class="ui primary submit labeled icon button">
          <i class="icon edit"></i> Add Comment
        </div>
    </form>
</body>
</html>


Output:

Semantic-UI Comment Actions Content

Semantic-UI Comment Actions Content

Example 2: The following code demonstrates the use of the actions class with an icon and reply class.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <center>
        <h1 class="ui header green">GeeksforGeeks</h1>
        <h2>Semantic UI Comment Action</h2>
    </center>
      
    <div class="ui comments">
      <div class="comment">
        <a class="avatar">
          <img src=
        </a>
        <div class="content">
          <a class="author">Author</a>
          <div class="text">
            GeeksforGeeks is the best site to learn DSA.
          </div>
          <div class="actions">
            <a class="reply">Reply</a>   
            <a>
              <i class="expand icon"></i>
              Full-screen
            </a>
          </div>
        </div>
      </div>
    </div>
</body>
</html>


Output:

Semantic-UI Comment Actions Content

Semantic-UI Comment Actions Content

Reference link: https://semantic-ui.com/views/comment.html#actions



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