Comments
Every blog has its comment area, and here are a few components for that area.
Default comment
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam porro ipsa sint voluptatum ipsam recusandae, commodi nam aspernatur neque quos rem, quaerat rerum voluptate quo. Numquam ipsam necessitatibus facilis illum.
<div class="comment">
<div class="comment-head">
<figure class="image is-circle">
<img src="..." alt="..." />
</figure>
<div class="info">
<h6 class="name">...</h6>
<p class="profession">...</p>
</div>
<p class="date">...</p>
</div>
<div class="comment-content">
<p>.</p>
</div>
<div class="comment-footer">
...
</div>
</div>
Comment with respond
John Smith
Co-Founder
20/07/2021
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam porro ipsa sint voluptatum ipsam recusandae, commodi nam aspernatur neque quos rem, quaerat rerum voluptate quo. Numquam ipsam necessitatibus facilis illum.
Sarah Thomson
Manager
20/07/2021
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas sapiente quam, quaerat voluptate provident cupiditate, distinctio fugit eum, recusandae quasi placeat nesciunt voluptatibus explicabo. Doloribus repudiandae officia illo quasi excepturi.
<div class="comments">
<div class="comment">
<div class="comment-head">
<figure class="image is-circle">
<img src="..." alt="Comment user profile" />
</figure>
<div class="info">
<h6 class="name">...</h6>
<p class="profession">...</p>
</div>
<p class="date">...</p>
</div>
<div class="comment-content">
<p>...</p>
</div>
<div class="comment-footer">
...
</div>
<div class="comment-respond">
<div class="comment">
<div class="comment-head">
<figure class="image is-circle">
<img src="..." alt="Comment user profile" />
</figure>
<div class="info">
<h6 class="name">...</h6>
<p class="profession">...</p>
</div>
<p class="date">...</p>
</div>
<div class="comment-content">
<p>...</p>
</div>
<div class="comment-footer">
...
</div>
</div>
</div>
</div>
</div>
John Smith
Co-Founder
20/07/2021