# Note Box

The note box highlights information with a medium visual priority using existing typography styles with a box outline.

## Guidance

### When to use

Use the box for:

- Informational content you want to highlight that isn’t critical, like tips, examples, or general notes
- Quotations you want to call out or from an external source

### Guidelines

Placement:

- Always be static content on a page.
- Don’t use in dynamic forms or as a response to user interactions.
- Limit to no more than 2 boxes per page.
- Don’t stack boxes (or stack boxes with alerts).

How to select which color styling:

- White box is for supplementary information that isn’t critical.
- Gray box is for information that requires more emphasis.

What can be included in boxes:

- Can include link text to a different page or further information.
- <p>
    When including quotes, you must include a source. Source citations use the following format: em
    dash[source] There is no space between the emdash and the name of the source.
    

    Examples:
    

    &mdash;Author
    

    &mdash;Inflation Reduction Act, U.S. Department of the Treasury
  </p>

- Don’t include images, or make the box clickable, like a clickable card, or include CTAs, like buttons. ([Refer to guidelines for clickable cards.](/components/card/?query=card))

### When to consider alternatives

- Use an alert instead if the information is:
  - High priority
  - Requires an action or button
  - A warning or an error
  - In a dynamic form or appears as a response to a user interaction
- Use a help drawer instead if content is too long or not relevant enough to warrant being on the page by default.

## Content Guidance

### Guidelines

- The content in a box is always ancillary to the main messages being conveyed. Users must not rely upon the box information to understand the main content.
- Don’t use a box for an inline quotation.
- Keep content used within a box short—use the fewest words possible to
  convey the information. Best practice is no more than 2-3 short sentences.
  If longer, use a help drawer or include the content as regular body copy.
- Use plain language and an active voice.
- Box content can include:
  - A heading (not required)
  - Body text
  - Link text
  - Bulleted or numbered lists
- [Plain Language Guide: Writing (Digital.gov)](https://digital.gov/guides/plain-language/writing)

## Accessibility

### Accessibility

- If you have multiple boxes on a page, tailor the accessible text to differentiate between each by using an `aria-label` or `aria-labeled-by` attribute.
- This component has been implemented with the H4 header. If this is not semantically appropriate for your team's HTML, you can modify the H-tag and retain the CSS so that it is semantically correct without changing it visually.
- Avoid stacking boxes vertically. This can create long blocks of text that are difficult to read, especially for users with visual impairments or cognitive disabilities.
- The quotation icon used in the quotation box is purely decorative and offers no semantics, so no additional markup should be added to make it accessible to screen readers.

### Accessibility Testing

- Accessibility testing is crucial for this unique component. Verify that it can be easily navigated and used by users with disabilities, including those who rely on screen readers.
- Pay close attention to keyboard navigation and ensure it does not trap focus.
- The purpose of the information within the note box should be clear in the context of the whole page.
- When using a screen reader (NVDA, JAWS, VoiceOver, TalkBack), the note box should identify itself as a box or note.
- When navigating the page, screen readers should announce the accessible name of the box or “Note,” followed by the content.

### Reporting an accessibility bug

If you encounter a bug with the accessibility of the alert component, [refer to our reporting confluence page](https://confluence.cms.gov/pages/viewpage.action?pageId=1138979323) and use CMSDS bug reporting workflow in our #cms-design-system-team slack channel.