View Source

Component basics

Title	Give the component a name.
Description	Briefly explain what the component does, e.g., "An avatar is an image that represents a user or entity."
Anatomy diagram	Type /image to upload a diagram of the component with numbered callouts. Use the basic version of the component and make sure the example has good copy.
Key to anatomy diagram	Define each of the numbered callouts in your anatomy diagram.

Specifications

Usage

Give an overview of the component and how it's used, e.g., "Use avatars to identify a user or entity in a product. Typically, users will upload their own image, but they may also stick to the default image."

Variations

Provide examples for standard variations that appear in your product. If possible, these examples should be created with live code from your design system's repo.

Behavior

Describe how the component behaves in different contexts.

Style

Describe how the component should be styled, visually. Include information about alignment, padding, etc., as well as "do" and "don't" examples.

Additional guidance

Content	Provide component-specific guidance on content, such as punctuation rules, standard labels, etc.
Accessibility	Provide component-specific best practices for accessibility.
Mobile	Provide guidance on how to apply this component in mobile environments.
Best practices	If there are industry standards for this component, list them in this section. Include "do" and "don't" examples to illustrate each point.
Related	List related components or patterns. Include links whenever possible.