Semantic-UI Comment Avatar Content
Last Updated :
20 Feb, 2022
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 Avatar Content.
It is equipped with pre-built semantic components that help create responsive layouts using user-friendly HTML. Everyone needs an image of their existence and that image is called a profile picture or avatar.
Semantic UI comment avatar class:
- avatar: This class is used for profile pictures.
Syntax:
<div class="ui comments">
<div class="comment">
<a class="avatar">
<img src="#">
</a>
<div class="content">
<a class="author">...</a>
</div>
</div>
</div>
Example 1: The below example illustrates the Semantic UI comment avatar content.
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 Avatar</h2>
</center>
<div class="ui comments">
<div class="comment">
<a class="avatar">
<img src=
</a>
<div class="content">
<a class="author">GeeksforGeeks</a>
<div class="metadata">
<div class="date">1 day ago</div>
</div>
<div class="text">
<p>Welcome to GeeksforGeeks</p>
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Comment Avatar Content
Example 2: The following code demonstrates the comment avatar content with a reply form and the “Add Comment” button option.
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 Avatar</h2>
</center>
<div class="ui comments">
<div class="comment">
<a class="avatar">
<img src=
</a>
<div class="content">
<a class="author">GeeksforGeeks</a>
<div class="metadata">
<div class="date">1 day ago</div>
</div>
<div class="text">
<p>Welcome to GeeksforGeeks</p>
</div>
<div class="actions">
<a class="reply">Reply</a>
</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>
</div>
</body>
</html>
|
Output:
Semantic-UI Comment Avatar Content
Reference link: https://semantic-ui.com/views/comment.html#avatar
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...