Messages

<div class="container container--small container--padded"> <!--Only for this example-->
<ul class="list list--conversation">
  <li class="list-cell list-cell--conversation list-cell--sender">
    <div class="message-author">
      <span class="message-author__username username">You, </span>
      <span class="timestamp">10/28/2020</span>
    </div>

    <div class="message-bubble message-bubble--sender">
      <p>Thanks for your feedback!</p>
    </div>
  </li>

  <li class="list-cell list-cell--conversation list-cell--recipient">
    <div class="message-author">
      <span class="message-author__username username">aubrey6, </span>
      <span class="timestamp">10/28/2020</span>
    </div>
    <div class="message-bubble message-bubble--recipient">
      <p>No problem.</p>
    </div>
  </li>
</ul>
</div>