Component name

Short description of Component.

Examples

Desktop

Preview desktop version in Storybook

Mobile

Preview mobile version in Storybook

Usage

• What does this component do?
• Does the component look or behave differently on small vs. large screens? Talk about differences.
• What other details will help stakeholders use this component as you intended?

When to use

• When would someone want to use this component in their solution?

When to consider something else

• Are there other components or patterns a designer should consider to simplify their solution? If so, link to those here.
• If there are no alternative solutions, this section can be called When not to use.

Placement

• Where does this component appear on the page? Refer to our grid.
• Use spacing units (in Utilities) rather than getting too granular with pixel specifications.

Behavior

• Talk about the interaction details of the component here.
• What component states are there to consider? Error, empty, not enabled, etc.

Accessibility considerations

What does a content creator, designer, or developer need to know to implement an accessible component?

• Guidelines
• Code snippets
• Tests to run (if applicable)

Resources

• Links to research, design files, etc.

Related

• Links to related items in the Content Styleguide or elsewhere on design.va.gov.