Components
The fundamentals of all websites. They categorize information, distinguish call-to-actions, and guide the user through flows; components are the build blocks to our interfaces.
Buttons
Used primarily for committing a change or task, with a single click.
Best practices
-
Clear and concise labeling, with no wrapping.
-
Descriptions should start with a verb (e.g. Add to cart)
-
Primary actions should be placed to the right of secondary actions.
Anatomy
States
Cards
The account card is a flexible container used to group related customer content, tasks or actions.
Best practices
-
Use headings that clearly identify the subject contained within the card.
-
Elements represented in the card are prioritized by most needed first.
Anatomy
States
Data Tables
Data tables display and sort information in a scannable manner.
Best practices
-
Clear and concise labeling.
-
Allow data to wrap when it exceeds the defined column width.
-
Limit the number of rows shown to a max of 20, and use a scroll when that is exceeded.
Anatomy
Date Picker
Date pickers permit the user to choose a date, rather than type it in, for one-to-many days.
Best practices
-
The current month should be displayed as the default.
-
A user should be permitted to type a date via the keyboard.
-
Pagination should slide one month at a time in the direction selected.
Anatomy
States
Icons
Icons help provide quick context about a particular element, but should be intuitive and accessible.
Primary
Secondary
Text fields
Input fields are used to enter text into a field or select an option from a list.
Best practices
-
Clear and concise labeling.
-
For text fields, field level validations should be used when possible.
-
For dropdown fields, the list of choices should be three or more.
-
For dropdown fields, when list choices are not available, show them disabled.
Anatomy
States
Messages
Messages inform the users of a process that has been performed, needs to be performed.
Best practices
-
Clear and concise labeling
-
Descriptions are contextual and based on the event that triggered them.
-
Messages can be passive or required.
Primary
Detail
Overlays & Modals
Overlays are used in situations where the flow needs to be stopped and a decision must be made by the user.
Best practices
-
Overlay descriptions should be concise and contextual to the event that triggered them.
-
Overlays should always end with a question that guides the user towards Continue.
-
No keyboard traps.
Anatomy
Detail
Steppers
Steppers force a linear flow and illustrate progress through numbered steps.
Best practices
-
Clear and concise labeling.
-
Completed steps should be editable.
-
Editing a step requires all steps after that to be re-submitted.
-
Don’t use steppers within steppers.
Anatomy
Detail
Switch Controls
Switch controls allow the user to change the state of content; from on/off to selected/unselected.
Best practices
-
Clear and concise labeling, with no wrapping.
-
Selection can occur on the container, selector or the label.
-
Like items should be grouped together; vertically or horizontally.
Anatomy
States
Tabs
Tabs are a navigational element that organizes catalog content, data sets and other interactions.
Best practices
-
Clear and concise labeling, with no wrapping.
-
Each tab should contain content that is distinct from other tabs.
-
A max of 8 tabs may be displayed.
Anatomy
Detail
