Note

When to use it

The Note component is used for mini messages, form explanations, and similar content. It provides a way to highlight important information or instructions within a form or other content area.

Variants

If the note is of a more serious nature, use the .c-note--[warning|positive|negative] modifiers to indicate the type of message. For example, use .c-note--warning for warnings, .c-note--positive for positive messages, and .c-note--negative for negative messages.

If you want to, you can have icons in a note to, e.g. to communicate the "state" of the note even more.

What it looks like

Code examples

Basic Note

<div class="c-note">
    A note about this form field
</div>

Warning

<div class="c-note c-note--warning">
    Warning note about this form field
</div>

Positive

<div class="c-note c-note--positive">
    Positive note about this form field
</div>

Negative

<div class="c-note c-note--negative">
    Negative note about this form field
</div>

With icon

<div class="c-note c-note--negative">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="16" viewBox="0 0 18 16" fill="var(--negative)">
        <path d="M14.9026 0.0976565C14.8401 0.0351661 14.7553 6.10352e-05 14.667 6.10352e-05C14.5786 6.10352e-05 14.4938 0.0351661 14.4313 0.0976565L11.5246 3.00432C10.8231 2.25914 9.92131 1.73248 8.9276 1.48767C7.9339 1.24286 6.89063 1.29034 5.92326 1.62439C4.9559 1.95844 4.10564 2.56484 3.47473 3.37066C2.84383 4.17648 2.45915 5.1474 2.36696 6.16666C1.75312 6.37481 1.22339 6.77649 0.857319 7.31139C0.49125 7.84629 0.308608 8.48552 0.336825 9.13307C0.365041 9.78063 0.602593 10.4015 1.0138 10.9026C1.42501 11.4036 1.98768 11.7577 2.61729 11.9117L1.09796 13.431C1.06612 13.4617 1.04073 13.4985 1.02326 13.5392C1.00579 13.5799 0.996593 13.6236 0.996209 13.6679C0.995824 13.7121 1.00426 13.756 1.02102 13.797C1.03778 13.8379 1.06253 13.8752 1.09383 13.9065C1.12512 13.9378 1.16234 13.9625 1.20331 13.9793C1.24427 13.996 1.28817 14.0045 1.33243 14.0041C1.37669 14.0037 1.42043 13.9945 1.46109 13.977C1.50176 13.9596 1.53854 13.9342 1.56929 13.9023L8.23596 7.23566L14.9026 0.56899C14.9651 0.506481 15.0002 0.421711 15.0002 0.333323C15.0002 0.244935 14.9651 0.160166 14.9026 0.0976565Z"/>
        <path d="M12.9667 5.99997C12.8804 5.3259 12.6647 4.67486 12.3314 4.08264L4.41406 12H12.6667C13.0612 12.0016 13.452 11.9251 13.8167 11.7749C14.1814 11.6248 14.5128 11.4038 14.7917 11.1249C15.0706 10.846 15.2915 10.5147 15.4417 10.15C15.5919 9.78524 15.6684 9.3944 15.6667 8.99998C15.6635 8.25566 15.3865 7.53855 14.8886 6.98529C14.3907 6.43204 13.7066 6.08132 12.9667 5.99997Z"/>
        <path fill="var(--on-negative)" d="M5.625 7.00008C5.62463 6.57495 5.73847 6.15753 5.95463 5.79146C6.17079 5.42539 6.48133 5.12412 6.85378 4.91914C7.22622 4.71417 7.6469 4.61301 8.07182 4.62626C8.49674 4.63951 8.9103 4.76667 9.26925 4.99445L8.89063 5.31558C8.8733 5.33023 8.8603 5.34933 8.853 5.37082C8.84571 5.3923 8.8444 5.41537 8.84922 5.43754C8.85403 5.45972 8.8648 5.48016 8.88035 5.49668C8.8959 5.5132 8.91566 5.52518 8.9375 5.53133L10.2959 5.90983C10.3068 5.91291 10.318 5.91447 10.3294 5.91445C10.3471 5.91445 10.3646 5.91067 10.3808 5.90338C10.397 5.89608 10.4114 5.88543 10.4231 5.87213C10.4348 5.85882 10.4436 5.84318 10.4488 5.82623C10.454 5.80929 10.4556 5.79142 10.4534 5.77383L10.28 4.39045C10.2772 4.36808 10.2684 4.34688 10.2546 4.3291C10.2407 4.31132 10.2223 4.29762 10.2013 4.28944C10.1803 4.28127 10.1574 4.27893 10.1352 4.28267C10.113 4.28642 10.0922 4.2961 10.075 4.3107L9.6665 4.65733C9.23644 4.35141 8.73047 4.16976 8.20403 4.13231C7.67759 4.09486 7.151 4.20304 6.68196 4.44499C6.21292 4.68695 5.81953 5.05334 5.5449 5.50403C5.27027 5.95472 5.125 6.47231 5.125 7.00008C5.125 7.06638 5.15134 7.12997 5.19822 7.17685C5.24511 7.22374 5.3087 7.25008 5.375 7.25008C5.4413 7.25008 5.50489 7.22374 5.55178 7.17685C5.59866 7.12997 5.625 7.06638 5.625 7.00008Z"/>
        <path fill="var(--on-negative)" d="M10.6248 6.75006C10.5585 6.75006 10.4949 6.7764 10.448 6.82328C10.4011 6.87017 10.3748 6.93376 10.3748 7.00006C10.3752 7.42518 10.2613 7.84261 10.0452 8.20868C9.82906 8.57476 9.51853 8.87604 9.14609 9.08102C8.77365 9.286 8.35297 9.38715 7.92806 9.3739C7.50314 9.36065 7.08959 9.23348 6.73064 9.00569L7.10914 8.68456C7.12647 8.6699 7.13947 8.65081 7.14677 8.62932C7.15406 8.60784 7.15537 8.58477 7.15055 8.5626C7.14574 8.54042 7.13497 8.51998 7.11942 8.50346C7.10387 8.48694 7.08411 8.47496 7.06227 8.46881L5.70339 8.09031C5.68356 8.0848 5.66266 8.08427 5.64257 8.08878C5.62248 8.09328 5.60381 8.10268 5.58823 8.11614C5.57264 8.12959 5.56062 8.14669 5.55324 8.16591C5.54585 8.18513 5.54333 8.20588 5.54589 8.22631L5.71977 9.60969C5.72258 9.63203 5.73137 9.65321 5.74522 9.67097C5.75907 9.68873 5.77746 9.70242 5.79845 9.71059C5.81944 9.71876 5.84225 9.72111 5.86446 9.71738C5.88667 9.71366 5.90747 9.704 5.92464 9.68944L6.33327 9.34281C6.76333 9.64873 7.2693 9.83037 7.79574 9.86783C8.32218 9.90528 8.84877 9.7971 9.31781 9.55515C9.78685 9.31319 10.1802 8.9468 10.4549 8.49611C10.7295 8.04542 10.8748 7.52783 10.8748 7.00006C10.8748 6.93376 10.8484 6.87017 10.8015 6.82328C10.7547 6.7764 10.6911 6.75006 10.6248 6.75006Z"/>
    </svg>
    Negative note about this form field long.
</div>

Accessibility notes

The font size of this component is very small. Although it should pass automated accessibility tests, do reflect upon what's communicated using this component and try to keep the text short and easy to understand.

TIP

If using a Note as a form hint, add a reference to the hint using aria-describedby on the input:

<input type="text" aria-describedby="form-field-hint" required>
<div class="c-note" id="form-field-hint">…</div>