Includes styles for comments, for example for a blog section on your site.
The Comment component consists of the comment itself, a comment header, including an avatar, a title and metadata, and a comment body.
| Class | Description |
|---|---|
.gls-comment |
Add this class to define the Comment component. |
.gls-comment-body |
Add this class to create a comment body. |
.gls-comment-header |
Add this class to create a comment header. |
.gls-comment-title |
Add this class to a heading to create a comment title. |
.gls-comment-meta |
Add this class to create metadata about your comment, e.g. a subnav. |
.gls-comment-avatar |
Add this class to an <img> element to create an avatar for the comment author. |
<article class="gls-comment">
<header class="gls-comment-header">
<img class="gls-comment-avatar" src="" width="" height="" alt="">
<h4 class="gls-comment-title"></h4>
<ul class="gls-comment-meta gls-subnav"></ul>
</header>
<div class="gls-comment-body"></div>
</article>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<article class="gls-comment">
<header class="gls-comment-header">
<div class="gls-grid-medium gls-flex-middle" gls-grid>
<div class="gls-width-auto">
<img class="gls-comment-avatar" src="https://utahhealthcare.github.io/gloss-docs/images/avatar.jpg" width="80" height="80" alt="">
</div>
<div class="gls-width-expand">
<h4 class="gls-comment-title gls-margin-remove"><a class="gls-link-reset" href="#">Author</a></h4>
<ul class="gls-comment-meta gls-subnav gls-subnav-divider gls-margin-remove-top">
<li><a href="#">12 days ago</a></li>
<li><a href="#">Reply</a></li>
</ul>
</div>
</div>
</header>
<div class="gls-comment-body">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</article>
To style a comment differently, for example to highlight it as the admin’s comment, just add the .gls-comment-primary class.
<article class="gls-comment gls-comment-primary">...</article>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<article class="gls-comment gls-comment-primary">
<header class="gls-comment-header">
<div class="gls-grid-medium gls-flex-middle" gls-grid>
<div class="gls-width-auto">
<img class="gls-comment-avatar" src="https://utahhealthcare.github.io/gloss-docs/images/avatar.jpg" width="80" height="80" alt="">
</div>
<div class="gls-width-expand">
<h4 class="gls-comment-title gls-margin-remove"><a class="gls-link-reset" href="#">Author</a></h4>
<ul class="gls-comment-meta gls-subnav gls-subnav-divider gls-margin-remove-top">
<li><a href="#">12 days ago</a></li>
<li><a href="#">Reply</a></li>
</ul>
</div>
</div>
</header>
<div class="gls-comment-body">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</article>
Add the .gls-comment-list class to a <ul> element to create a list of comments. You can nest any number of <ul> elements inside a comment list.
<ul class="gls-comment-list">
<li>
<article class="gls-comment">...</article>
<ul>
<li>
<article class="gls-comment">...</article>
</li>
</ul>
</li>
</ul>
<ul class="gls-comment-list">
<li>
<article class="gls-comment gls-visible-toggle" tabindex="-1">
<header class="gls-comment-header gls-position-relative">
<div class="gls-grid-medium gls-flex-middle" gls-grid>
<div class="gls-width-auto">
<img class="gls-comment-avatar" src="https://utahhealthcare.github.io/gloss-docs/images/avatar.jpg" width="80" height="80" alt="">
</div>
<div class="gls-width-expand">
<h4 class="gls-comment-title gls-margin-remove"><a class="gls-link-reset" href="#">Author</a></h4>
<p class="gls-comment-meta gls-margin-remove-top"><a class="gls-link-reset" href="#">12 days ago</a></p>
</div>
</div>
<div class="gls-position-top-right gls-position-small gls-hidden-hover"><a class="gls-link-muted" href="#">Reply</a></div>
</header>
<div class="gls-comment-body">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</article>
<ul>
<li>
<article class="gls-comment gls-comment-primary gls-visible-toggle" tabindex="-1">
<header class="gls-comment-header gls-position-relative">
<div class="gls-grid-medium gls-flex-middle" gls-grid>
<div class="gls-width-auto">
<img class="gls-comment-avatar" src="https://utahhealthcare.github.io/gloss-docs/images/avatar.jpg" width="80" height="80" alt="">
</div>
<div class="gls-width-expand">
<h4 class="gls-comment-title gls-margin-remove"><a class="gls-link-reset" href="#">Author</a></h4>
<p class="gls-comment-meta gls-margin-remove-top"><a class="gls-link-reset" href="#">12 days ago</a></p>
</div>
</div>
<div class="gls-position-top-right gls-position-small gls-hidden-hover"><a class="gls-link-muted" href="#">Reply</a></div>
</header>
<div class="gls-comment-body">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</article>
</li>
<li>
<article class="gls-comment gls-visible-toggle" tabindex="-1">
<header class="gls-comment-header gls-position-relative">
<div class="gls-grid-medium gls-flex-middle" gls-grid>
<div class="gls-width-auto">
<img class="gls-comment-avatar" src="https://utahhealthcare.github.io/gloss-docs/images/avatar.jpg" width="80" height="80" alt="">
</div>
<div class="gls-width-expand">
<h4 class="gls-comment-title gls-margin-remove"><a class="gls-link-reset" href="#">Author</a></h4>
<p class="gls-comment-meta gls-margin-remove-top"><a class="gls-link-reset" href="#">12 days ago</a></p>
</div>
</div>
<div class="gls-position-top-right gls-position-small gls-hidden-hover"><a class="gls-link-muted" href="#">Reply</a></div>
</header>
<div class="gls-comment-body">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</article>
</li>
</ul>
</li>
</ul>
Author
12 days ago
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Author
12 days ago
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Author
12 days ago
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.