Comment Updated

A pre-made set of classes to build a responsive 'comments' section


Magic is targeted at dynamic websites (e.g. social networks), and a 'comments' feed is critical for any such site. Therefore, Magic comes with a simple set of classes for comments built in!

Example

Placeholder

John Smith 01/01/2018

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Placeholder

John Smith 01/01/2018

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Adding a comments section

Magic comments are contained within a comments div. This can contain comments, as well as a 'new comment' textarea. All comment-related components must be placed within the comments div.

The comment container serves as a responsive positioner for its contents

To add one:

<div class="comments">
  ...
</div>

Adding a comment

Within the comments div, you can have individual comments. Each comment consists of a left and a right section. Within the right section, you can have a 'top', middle and 'bottom' section. To add a comment, place this inside your comments div:

Placeholder

John Smith 01/01/2018

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<div class="comment">
  <div class="comment-left">
    <img src="http://via.placeholder.com/150x150" class="img-responsive img-circular" alt="Placeholder">
  </div>
  <div class="comment-right">
    <div class="comment-top">
      <p><a href="#!" class="link">John Smith</a> <span class="mute">01/01/2018</span></p>
    </div>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    <div class="comment-bottom">
      <p class="comment-bottom-text"><a href="#!" class="link capitals">Reply <span class="badge light">15</span></a><a href="#!" class="link"><i class="fas fa-thumbs-up"></i></a><a href="#!" class="link"><i class="fas fa-thumbs-down"></i></a></p>
    </div>
  </div>
</div>

Inverse comment

A comment can also be inserted flipped, using the comment-inverse class.

Placeholder

John Smith 01/01/2018

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<div class="comment comment-inverse">
  <div class="comment-left">
    <img src="http://via.placeholder.com/150x150" class="img-responsive img-circular" alt="Placeholder">
  </div>
  <div class="comment-right">
    <div class="comment-top">
      <p><a href="#!" class="link">John Smith</a> <span class="mute">01/01/2018</span></p>
    </div>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    <div class="comment-bottom">
      <p class="comment-bottom-text"><a href="#!" class="link capitals">Reply <span class="badge light">15</span></a><a href="#!" class="link"><i class="fas fa-thumbs-up"></i></a><a href="#!" class="link"><i class="fas fa-thumbs-down"></i></a></p>
    </div>
  </div>
</div>