Notes

Notes can be provided alongside content to offer additional context, clarification, or insights to the user. These annotations can help readers better understand complex concepts, terms, or references, enhancing the overall user experience by providing valuable context without interrupting the main content flow.

Regular notes

The note examples provided below range in severity from critical to minor, with color coding used to indicate their urgency. These notes have been designed to efficiently capture the user’s attention.

    <div class="note-wrapper success">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Vitae, quae ab est esse eius quisquam deserunt atque culpa,
        fugit eligendi porro similique hic officiis illum obcaecati.
      </p>
    </div>

    <div class="note-wrapper warning">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Vitae, quae ab est esse eius quisquam deserunt atque culpa,
        fugit eligendi porro similique hic officiis illum obcaecati.
      </p>
    </div>

    <div class="note-wrapper important">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Vitae, quae ab est esse eius quisquam deserunt atque culpa,
        fugit eligendi porro similique hic officiis illum obcaecati.
      </p>
    </div>

    <div class="note-wrapper info">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Vitae, quae ab est esse eius quisquam deserunt atque culpa,
        fugit eligendi porro similique hic officiis illum obcaecati.
      </p>
    </div>
  

Feedback notes

Feedback notes uses more noticable backgrounds and convey important messages, such as success notifications, error warnings, or contextual tips after user performs an action.

    <div class="feedback-note-wrapper success">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Vitae, quae ab est esse eius quisquam deserunt atque culpa,
        fugit eligendi porro similique hic officiis illum obcaecati.
      </p>
    </div>

    <div class="feedback-note-wrapper warning">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Vitae, quae ab est esse eius quisquam deserunt atque culpa,
        fugit eligendi porro similique hic officiis illum obcaecati.
      </p>
    </div>

    <div class="feedback-note-wrapper important">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Vitae, quae ab est esse eius quisquam deserunt atque culpa,
        fugit eligendi porro similique hic officiis illum obcaecati.
      </p>
    </div>

    <div class="feedback-note-wrapper info">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Vitae, quae ab est esse eius quisquam deserunt atque culpa,
        fugit eligendi porro similique hic officiis illum obcaecati.
      </p>
    </div>
  

Notes variations

Different variations of Feedback and Regular notes. To be used under special circumstances.

    <div class="note-wrapper success">
      <div class="caption">Caption title</div>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Vitae, quae ab est esse eius quisquam deserunt atque culpa,
        fugit eligendi porro similique hic officiis illum obcaecati.
      </p>
    </div>

    <div class="feedback-note-wrapper d-flex info">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Vitae, quae ab est esse eius quisquam deserunt atque culpa,
        fugit eligendi porro similique hic officiis illum obcaecati.
      </p>
      <i class="bi bi-info-circle"></i>
    </div>