Notes

Use this component to show notes, or comments, between users in an application.

Anatomy

Avatar
Author
Date and time
Note content
Reply

Example

Coded example

Bill Posters
24 May 2022 09:35 BST

This is an example of a note/comment left on an item. It can be used to provide further information on the current application.

Support
24 May 2022 10:06 BST

This is an example of a note/comment left on an item. It can be used to provide further information on the current application.

Code snippet

									
<div class="note">
  <div class="note-avatar">
    <div class="avatar avatar-text">
      BP
    </div>
  </div>
  <div class="note-body">
    <ul class="note-detail">
      <li class="note-user">Bill Posters</li>
      <li>24 May 2022 09:35 BST</li>
    </ul>
    <div class="note-text">
      <p>This is an example of a note/comment left on an item. It can be used to provide further information on the current application.</p>
    </div>
  </div>
</div>
<div class="note note-reply note-support">
  <div class="note-avatar">
    <div class="avatar avatar-text">
      S
    </div>
  </div>
  <div class="note-body">
    <ul class="note-detail">
      <li class="note-user text-primary">Support</li>
      <li>24 May 2022 10:06 BST</li>
    </ul>
    <div class="note-text">
      <p>This is an example of a note/comment left on an item. It can be used to provide further information on the current application.</p>
    </div>
  </div>
</div>

									
  None required

Figma prototype

Usage guide

Dos and don'ts

Ensure replies use the correct classes to differentiate from initial notes.