Messages

Messages enable customers and testers to communicate with each other.

  • You, 10/28/2020

    Thanks for your feedback!

  • aubrey6, 10/28/2020

    No problem.

<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>

Description

Use this pattern to help facilitate communicate between customers and testers.

Do

  • Make it clear messages are between one customer and one user.
  • Use links when appropriate

Don't

  • Add any other elements to messages

Accessibility

- All text and other content should be accessible to assisted tech.