A simple checkout summary with a preview of the items in your order.
<!-- comments -->
<div class="comment-section-container">
<h3>Comments (2)</h3>
<div class="comment-section-author">
<img src="https://placehold.it/50x50" alt="">
<div class="comment-section-name">
<h5><a href="">Janice Jones</a></h5>
<p>March 12, 2017 at 1:28pm</p>
</div>
</div>
<div class="comment-section-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum facilis tenetur a voluptatibus quia
deserunt.
</p>
</div>
<div class="comment-section-author">
<img src="https://placehold.it/50x50" alt="">
<div class="comment-section-name">
<h5><a href="">Janice Jones</a></h5>
<p>March 12, 2017 at 1:28pm</p>
</div>
</div>
<div class="comment-section-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum facilis tenetur a voluptatibus quia deserunt.
</p>
</div>
</div>
<!--/comments-->
<!-- comment form -->
<form class="comment-section-form">
<div class="comment-section-box">
<div class="row">
<div class="small-12 column">
<h4>Leave a Comment</h4>
<label>Name
<input type="text">
</label>
<label>Email
<input type="text">
</label>
<label>Comment
<textarea rows="10" type="text"></textarea>
</label>
<button class="button expanded">Submit</button>
</div>
</div>
</div>
</form>
<!--/comment box-->
$comment-form-bg: $light-gray;
$comment-section-bg: $white;
$comment-section-padding: $global-padding;
.comment-section-container {
background-color: $comment-section-bg;
padding: $global-padding;
}
.comment-section-author {
display: flex;
align-items: center;
margin-bottom: 1rem;
.comment-section-name {
margin-left: 1rem;
p {
margin-bottom: 0;
}
}
}
.comment-section-box {
background-color: $comment-form-bg;
padding: $global-padding;
}
.comment-section-container {
background-color: #fefefe;
padding: 1rem;
}
.comment-section-author {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 1rem;
}
.comment-section-author .comment-section-name {
margin-left: 1rem;
}
.comment-section-author .comment-section-name p {
margin-bottom: 0;
}
.comment-section-box {
background-color: #e6e6e6;
padding: 1rem;
}