Note Short Code

Back

Note

The Note Short code is intended to help contributors apply call-outs and highlight important information quickly and easily.

Overview

background-color uses color from USWDS System tokens. icon uses USWDS icon component name.

note variant	icon	backround-color	guidance	live page
default	notifications	blue-5		link
activity	assessment	orange-warm-5		link
action	campaign			link
alert	report	red-5		link
comment	comment	blue-cool-10		n/a
video	fast_forward			n/a
join	groups			link
disclaimer	info	gray-cool-3

Guidance

Note

Need to provide usage descriptions for each component

Examples

Basic Note

With proper formatting, you can add markdown stylings with the component.

{{< note >}}
Three important things that you should understand about adopting [USWDS](https://designsystem.digital.gov/):

- **You don’t need to adopt the design system all at once.** In fact, we encourage you to adopt the design system incrementally, and adapt it to meet your agency’s mission and user needs.
- **You don’t need to add any special code to your website to get started.** In fact, we encourage you to start with the principles and guidance.
- **You don’t need to do a full-scale site redesign to start incorporating USWDS code and components.** In fact, we encourage you to start with something smaller like color tokens or the gov banner.

{{< /note >}}

Example

Live page: Adopting the USWDS, One Step at a Time.

Usage

Displays a note box component in content.

Note Variants

Use the note_variant value to display a different icon and background color.

{{< note variant="activity" >}}

1. Read over the design principles with your team.
2. Note which ones resonate most with your team and why.
3. List the decisions you’ve recently made, and actions you and your team are - already doing that fall under one or more of the design principles.

{{< /note >}}

Example

Live page: Adopting the USWDS, One Step at a Time.

Usage

Used to emphasize call outs for content.