# 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.

Class | Description
--- | ---
`.uk-comment` | Add this class to define the Comment component.
`.uk-comment-header` | Add this class to create a comment header.
`.uk-comment-avatar` | Add this class to an `<img>` element to create an avatar for the comment author.
`.uk-comment-title` | Add this class to a heading to create a comment title.
`.uk-comment-meta` | Add this class to a paragraph to create meta data about your comment.
`.uk-comment-body` | Add this class to a `<div>` element to create comment body.

### Example

#### 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.

### Markup

    <article class="uk-comment">
        <header class="uk-comment-header">
            <img class="uk-comment-avatar" src="" alt="">
            <h4 class="uk-comment-title">...</h4>
            <div class="uk-comment-meta">...</div>
        </header>
        <div class="uk-comment-body">...</div>
    </article>

## Comment lists

Add the `.uk-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.

### Example

- #### 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.

### Markup

    <ul class="uk-comment-list">
        <li>
            <article class="uk-comment">...</article>
            <ul>
                <li><article class="uk-comment">...</article></li>
            </ul>
        </li>
        <li><article class="uk-comment">...</article></li>
    </ul>

## Color modifier

To style a comment differently, for example to highlight it as the admin's comment, just add the `.uk-comment-primary` class.

### Example

#### 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.

### Markup

    <article class="uk-comment uk-comment-primary">...</article>

## Subnav in comments

You can also use a subnav from the Subnav component to display the comment's meta data.

### Example

#### Subnav as comment meta

### Markup

    <ul class="uk-comment-meta uk-subnav uk-subnav-line">
        <li>...</li>
    </ul>