Component name (singular)

Contributors

Command separated list of contributor names with (org name) following

if applicable

Examples

Web

Default

View va-component-name in Storybook

Variation 1

Add Storybook examples as necessary.

Variation 2

Add Storybook examples as necessary.

Mobile

Variation 1

Add Storybook examples as necessary.

Usage

When to use Component name

• In this context. Explain the scenario or user context where this component is, or could be, used.
• In this task. Explain the user task or tasks where this component is, or could be, used.

When to consider something else

• Not in this context. Explain which scenarios or user context where this component is not, or should not, be used.
• Not for these tasks. Explain the user tasks where this component is not, or should not, be used.
• Use this instead. Explain when another component should be used instead.

How this component works

Details the design decisions inherent to the component.

Behavior

Web

Describe the key interactions for this component.

• Trigger. What does the user do to start the interaction with this component.
• Rules. What rules govern how the component behaves. How does it work?
• Feedback. What the user sees, hears, and feels that help them understand the rules.
• Loops and modes. Meta rules that govern the interaction.

Choosing between web variations

Help the designer and developer understand when to choose between any variations of this component.

Mobile

Describe the key interactions for this component.

Choosing between mobile variations

Help the designer and developer understand when to choose between any mobile app variations of this component.

Placement

Where the component appears visually, and if necessary to clarify, where it may appear in the source code. Can also comment on where the component is not to be placed.

Design principles

• List of design or UX principles that this component is an example or or adheres to.

Instances of this component in production

Images with captions that describe different instances of this component being used in production.

This is the Code Usage section. Note that the header is inside this include.

Content considerations

• Bulleted list of content related instructions to the designer.
• May be an include is shared with the Content style guide section.

Accessibility considerations

• Bulleted list of a11y related instructions to the designer and developer.

Related

• Links to related components.

This is the Component checklist section. Note that the header is inside this include.