Let us know what you think about the new Building Blocks

Comment Section

By Christine Siu

F6
#
How do I use This?

A simple checkout summary with a preview of the items in your order.

HTML
<!-- comments -->
<div class="comment-section-container">
  <h3>Comments (2)</h3>
  <div class="comment-section-author">
    <img src="http://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="http://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;
}

JS