Comments

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

I am a comment.


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. To do this:

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

Adding a comment

Within the comments div, you can have individual comments! They consist of a body and a footer, which can both contain various content. To add a comment, place this inside your comments div:

I am a comment.


<div class="comment">
  <div class="body">
    <p>Amazing project!</p>
  </div>
  <hr class="separator">
  <div class="footer">
    <p><a href="#">John Smith</a> | 01/01/2018</p>
  </div>
</div>

Adding a 'new comment' section

To neatly allow users to create a new comment, add the following (again, inside your comments):

I am a comment.


I am a comment.


I am a comment.


<div class="new">
  <form>
    <textarea placeholder="Add your comment..."></textarea>
    <button type="submit" class="btn btn-default btn-fluid">Add</button>
  </form>
</div>
<div class="comment">
  <div class="body">
    <p>I am a comment.</p>
  </div>
  <hr class="separator">
  <div class="footer">
    <p><a href="#">John Smith</a> | 01/01/2018</p>
  </div>
</div>
<div class="comment">
  <div class="body">
    <p>I am a comment.</p>
  </div>
  <hr class="separator">
  <div class="footer">
    <p><a href="#">John Smith</a> | 01/01/2018</p>
  </div>
</div>
<div class="comment">
  <div class="body">
    <p>I am a comment.</p>
  </div>
  <hr class="separator">
  <div class="footer">
    <p><a href="#">John Smith</a> | 01/01/2018</p>
  </div>
</div>