Comment

Create comments, for example about articles.


Usage

The Comment component consists of a comment header, including an avatar, a title and meta data, and a comment body.

Usage

  • Class Description
    .comment Add this class to define the Comment component.
    .comment-list Applied to a <ul> item, this class applies the appropriate style to a list of comments.

    Modifieres

    Class Description
    .comment-primary An alternate to the .comment class, this class gives the element a different background- and border-color.

    Sub Objects

    Class Description
    .comment-header Add this class to create a comment header.
    .comment-avatar Add this class to an <img> element to create an avatar for the comment author.
    .comment-title Add this class to a heading to create a comment title.
    .comment-meta Add this class to a paragraph to create meta data about your comment.
    .comment-body Add this class to a <div> element to create comment body.
    • Author

      12 days ago | Profile | #

      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

      • Author

        12 days ago | Profile | #

        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

  • <ul class="comment-list">
        <li>
            <article class="comment">
    		    <header class="comment-header">
    		        <img class="comment-avatar" src="images/avatar.png">
    		        <h4 class="comment-title">...</h4>
    		        <div class="comment-meta">...</div>
    		    </header>
    		    <div class="comment-body">...</div>
    		</article>
            <ul>
                <li>
                    <article class="comment comment-primary">
    				    <header class="comment-header">
    				        <img class="comment-avatar" src="images/avatar.png">
    				        <h4 class="comment-title">...</h4>
    				        <div class="comment-meta">...</div>
    				    </header>
    				    <div class="comment-body">...</div>
    				</article>
                </li>
            </ul>
        </li>
        ...
    </ul>

Modifiers

Comment Primary

Add the .comment-primary class to color the comment differently.

Usage

  • Author

    12 days ago | Profile | #

    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="comment comment-primary">
    	...
    </article>