Commentary
The comments component is used to capture client entered comments as a response to the primary page content. This a typical use case for many SaaS type applications.
Comments is a recursive component that supports an unlimited amount of levels of comments responses.
The client avatar is useful to encourage engagement. An HTML time tag is available to capture
when the client responded. A footer area is also supported and usualy conatins actionable buttons or links.
The comment body can also contain a form but needs to be styled with a with-form class to align the form
within the comment body.
Usage
| Classes: | |
|---|---|
.comments |
Defines the parent ul element. |
.comment |
Style the child li element that contains the comment information. |
.with-form |
When message area is a form, adjusts margins and padding to align form with comments structure. |
| Dependencies: | |
|---|---|
| File: | comments.css |
| Variables: | --border-main, --gap-col, --mar-vert, --padding, --padding-normal, --size-5 |
Examples
<ul class="comments" aria-label="Comments in response to current article.">
<li class="comment">
<figure class="avatar avatar-nm">
<img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/gl-man2.png" alt="Avatar LG">
</figure>
<div>
<p><strong>Richard Smith</strong>
<a href="#comments-top" aria-label="link to author"><span class="icon-bg-link"></span></a>
</p>
<time datetime="2022-01-18T14:54">Commented 2 months ago</time>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mattis, nunc id mollis mattis, mi leo suscipit turpis,
ac pulvinar nulla dolor a tortor. In vel nibh quis enim eleifend tincidunt ut sit amet nulla.
</p>
<footer>
<a href="#comments-top">Reply</a>
<a href="#comments-top">Report abuse</a>
</footer>
</div>
</li>
<li>
<ul class="comments" aria-label="Comments in response to parent comment.">
<li class="comment">
<figure class="avatar avatar-nm">
<img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/gl-woman2.png" alt="Avatar LG also">
</figure>
<div>
<p><strong>Jane Doe</strong>
<a href="#comments-top" aria-label="link to author"><span class="icon-bg-link"></span></a>
</p>
<time datetime="2022-03-30T14:54">Commented 6 weeks ago</time>
<p>Etiam at tellus pulvinar, convallis lacus nec, hendrerit magna. Morbi interdum porta dui at tempor.
Quisque ante justo, aliquet eu vestibulum vitae, elementum tincidunt leo.
</p>
<footer>
<a href="#comments-top">Reply</a>
<a href="#comments-top">Report abuse</a>
</footer>
</div>
</li>
<li>
<ul class="comments" aria-label="Comments in response to parent comment.">
<li class="comment">
<figure class="avatar avatar-nm">
<img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/gl-man1.png" alt="Avatar LG third">
</figure>
<div>
<p><strong>Chris Jones</strong>
<a href="#comments-top" aria-label="link to author"><span class="icon-bg-link"></span></a>
</p>
<time datetime="2022-03-30T14:54">Commented 8 days ago</time>
<p>Etiam at tellus pulvinar, convallis lacus nec, hendrerit magna. Morbi interdum porta dui at tempor.
Quisque ante justo, aliquet eu vestibulum vitae, elementum tincidunt leo.
</p>
<footer>
<a href="#comments-top">Reply</a>
<a href="#comments-top">Report abuse</a>
</footer>
</div>
</li>
<li class="comment">
<figure class="avatar avatar-nm">
<img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/gl-woman2.png" alt="Avatar LG also">
</figure>
<div>
<p><strong>Jane Doe</strong>
<a href="#comments-top" aria-label="link to author"><span class="icon-bg-link"></span></a>
</p>
<time datetime="2022-03-30T14:54">Responded 6 weeks ago</time>
<p>Jane Doe's response to a comment made to her comment.</p>
<footer>
<a href="#comments-top">Reply</a>
<a href="#comments-top">Report abuse</a>
</footer>
</div>
</li>
</ul>
</li>
<li class="comment">
<figure class="avatar avatar-nm">
<img src="https://zaphodbb-pm.github.io/goldilocks-css/img/demo/gl-man2.png" alt="Avatar LG">
</figure>
<div>
<p><strong>Richard Smith</strong>
<a href="#comments-top" aria-label="link to author"><span class="icon-bg-link"></span></a>
</p>
<time datetime="2022-01-18T14:54">Responded 2 months ago</time>
<p>Richard's response to comments of his comment.</p>
<footer>
<a href="#comments-top">Reply</a>
<a href="#comments-top">Report abuse</a>
</footer>
</div>
</li>
</ul>
</li>
<li class="with-form">
<figure class="avatar avatar-nm" data-initials="JS">
<div></div>
</figure>
<form class="form" action="/my-handling-form-page" method="post">
<label>
<span>Text Area</span>
<textarea rows="5" placeholder="Text area input" name="textarea_field"></textarea>
</label>
<div class="form-footer">
<button type="submit" class="is-danger-outlined has-hover">Submit!</button>
<button type="button" class="is-danger-outlined has-hover">Cancel</button>
</div>
</form>
</li>
</ul>
Richard Smith
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mattis, nunc id mollis mattis, mi leo suscipit turpis, ac pulvinar nulla dolor a tortor. In vel nibh quis enim eleifend tincidunt ut sit amet nulla.
Jane Doe
Etiam at tellus pulvinar, convallis lacus nec, hendrerit magna. Morbi interdum porta dui at tempor. Quisque ante justo, aliquet eu vestibulum vitae, elementum tincidunt leo.
Chris Jones
Etiam at tellus pulvinar, convallis lacus nec, hendrerit magna. Morbi interdum porta dui at tempor. Quisque ante justo, aliquet eu vestibulum vitae, elementum tincidunt leo.
Jane Doe
Jane Doe's response to a comment made to her comment.
Richard Smith
Richard's response to comments of his comment.