Semantic-UI Comment Metadata Content

Last Updated : 10 Feb, 2022

Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is a development framework used to create beautiful and responsive layouts.

Semantic UI Comment is used to display comments to the content. The comment is used to get and display feedback on the user's content. The comment comes with a reply button, form, date, etc.

Semantic UI Comment Content Metadata is used to display arbitrary details such as the number of likes on the comment, views or ratings, or the date when the content was published on the content.

Semantic UI Comment Content Metadata Class:

metadata: The div container with this class is used to display the metadata about the comment. The div container can contain other div containers also.

Syntax: Add the metadata class to the div container inside the content container as follows:

<div class="ui comments">
  <div class="comment">
    <div class="content">
        ...
        <div class="metadata"> ... </div>
        ...
    </div>
  </div>
</div>

Below example illustrate the Semantic-UI Comment Metadata Content:

Example: In this example, we have date and rating inside the metadata content.

HTML

<!DOCTYPE html>
<html lang="en">

<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" style="color:green">
            GeeksforGeeks
        </h1>

        <strong>Semantic-UI Comment Metadata Content</strong>
    </center>

    <div class="ui mini comments" id="comments">
        <h3 class="ui dividing header" id="commentsHeader">
            Comments
        </h3>
        <div class="comment">
            <div class="content">
                <a class="author">
                    Manav
                </a>
                <div class="metadata">
                    <span class="date">
                        Today at 5:42PM
                    </span>
                    <div class="rating">
                        <i class="star icon yellow"></i>
                        04
                    </div>
                </div>
                <div class="text">
                    How artistic!
                </div>
                <div class="actions">
                    <a class="reply">
                        Reply
                    </a>
                </div>
            </div>
        </div>

        <div class="comment">
            <div class="content">
                <a class="author">
                    Elliot Fu
                </a>
                <div class="metadata">
                    <span class="date">
                        Yesterday at 12:30AM
                    </span>
                    <div class="rating">
                        <i class="star icon yellow"></i>
                        30
                    </div>
                </div>
                <div class="text">
                    <p>
                        This has been very useful for 
                        my research. Thanks as well!
                    </p>

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

</html>

Output:

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

Semantic-UI Comment Content

manavsarkar07

Improve

Article Tags :

Semantic-UI Comment Metadata Content

Similar Reads

Thank You!

What kind of Experience do you want to share?