Cards

Organizing and managing information with cards allows users to easily scan and interact with content.

Types

Landing page cards

This card type can be found throughout the USANA website. It is primarily used to display and describe our products on our Shop landing pages.

See the Pen Card - Informational by USANA UX (@usana_ux) on CodePen.

Listing page card

Card types like these are typically used for selling our products. The card displays the item's price and the option to add another to an order.

See the Pen Card - Shop by USANA UX (@usana_ux) on CodePen.

Variations

Cards like these are mostly used on HUB, to promote USANA athletes or highlight the achievements of USANA customers.

USANA users(flip card)

See the Pen Card - LP by USANA UX (@usana_ux) on CodePen.

USANA Athletes

See the Pen Card - Athlete by USANA UX (@usana_ux) on CodePen.

HUB

See the Pen Cards - HUB(other) by USANA UX (@usana_ux) on CodePen.

Guidelines

Cards can have multiple variations and are intended to be fully customizable to meet the needs of your UI project.

There are no strict rules for card design—as long as content requirements are met and they follow the standards and rules established by the Pando Design System.

Anatomy

Card container: The elements of each card are contained in card containers, which are sized according to their size.
Card media (optional): Cards may contain images, graphics, and icons.
Header (optional): The header text might contain information such as the title of a product, article, or a photo.
Content (optional): Supporting text can include headers, body content, pricing, etc.
Buttons/Links (optional): Cards can include buttons that allow actions to be taken.

Interaction

Spacing & Styling

For padding it is recommended that they are all the same to retain visual balance. We suggest using the 24/16px as padding but this is optional as long as they are the same and follow basic spacing guidelines.

Use as an overview or summary of information.
Make them interactive and actionable.
Be clear to users about the cards destination.

Don't

Use as a way to display lots of content.
Nest cards within cards.
Use different height and or gutter widths.