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!
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>
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>
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>
I am a comment.
John Smith | 01/01/2018