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