Card Framework

Introduction

The Card Framework consists of cards and a standardized grid layout in which to organize and display cards. A card is an at-a-glance preview that serves as the entry point to more detailed information. It holds a variety of content and actions about a single topic. The Card Framework is Standard Tooling / XO.

Cards are a commonly used UI component throughout the industry. They are “a UI component that contains content and actions about a single subject. A card can contain different elements, but they should all be about a single subject. Typically the card serves as an overview and an entry point for more detailed information.” (Nick Babich, 2020)

More Information

More information on the Card Framework can be found on the UI Platform website.

Introduction

The Mobile Card Framework is the Canvas Mobile-owned equivalent of the Web Card Framework supporting Mobile scaling.

The Card Framework enables at-a-glance previews of metadata that serve as the entry point to more detailed XO-driven Tasks and Reports. Key aspects of the different Card variations in the Framework are one-to-one with Canvas Mobile’s Card; all Card variations in the Framework are built with the component.

Anatomy

Card Headers

1. Lead Element (Optional): Accent Icon, Avatar, or Image.
2. Status Indicator (Optional)
3. Title (Optional)
4. Subtext (Optional)
5. Trailing Button (Optional): Large Tertiary Icon Only Button.

Card Footers

1. Content Overflow (Conditional): Small Tertiary Button.
2. Call to Action (Optional): Medium Secondary Button. Call to Actions are not recommended for default configurations due to the increase in the visual load they create. Call to Actions should be used if a Card will redirect a user externally or the end destination of the Card is not inherently intuitive.
3. Call to Action Overflow (Conditional): Large Tertiary Icon Only Button. Tapping this button will trigger a Menu that contains the overflow of actions.

Variations

The Mobile Card Framework currently supports 7 unique Card Types.

Simple Card

The Simple Card at its fullest configuration may contain:

• Card Header
• Body Text that wraps at 3 lines
• Card Footer

Image Card

The Image Card at its fullest configuration may contain:

• Image
• Card Header
• Body Text that wraps at 3 lines
• Card Footer

List Card

The List Card at its fullest configuration may contain:

• Card Header
• Up to 3 fully configured List Items containing:
  • Leading element
  • Status Indicator
  • 1 label
  • 1 line of subtext
  • 1 line of body text
  • Trailing label
• Card Footer

Large Value Card

The Large Value Card at its fullest configuration may contain:

• Card Header
• Large Value with descriptive subtext
• Up to 3 List items containing:
  • Label
  • Trailing value
• Card Footer

Announcement Card

The Announcement Card at its fullest configuration may contain:

• Image or video thumbnail
• Title
• Subtext

Task Section Card

The Task Section Card at its fullest configuration may contain:

• Title

Mini Card

The Mini Card at its fullest configuration may contain:

• Accent icon
• Title
• Subtext

Behavior

Tap Targets

Unlike the Web counterpart that supports tap targets on individual line items, each Card in the Mobile Framework is an individual tap target for a Task or Report due to the standard mobile affordance of a Card acting as an expanded button.

Additional tap targets are only supported via Tertiary Icon Only Buttons in the Card Header or Card Footer.

Overflow

Across all Card types, the rule of 3 applies before an automatic overflow mechanism is triggered via a Tertiary Button in the Card Footer. For example, Simple Cards support up to 3 lines of body text. List Cards support up to 3 list items. Large Value Cards support up to 3 labels.

Each individual line item in a Card is truncated after 2 lines with the exception of Simple Card and Image Card body text, which is truncated at 3 lines.

Empty States

When data is fetchable but there is no data yet associated with a user or product area, the Framework will still render the Card and all of its fields in its standard layout.

Layouts

Although various grid layouts are supported in the Web Card Framework, the Mobile Framework is limited to vertical stacks and carousels for standard Card layouts outside of Mini Cards.

Vertical Stack

Default padding in a stack is not adjustable to ensure consistency across experiences. In a vertical stack under a common Section, Cards fill the full screen minus the margins with Canvas.x2 (i.e., 12 pixels) of spacing in between each Card. In between Sections, there is Canvas.x10 (i.e., 40 pixels) of spacing.

Carousel

Default padding in the Carousel is not adjustable to ensure consistency across experiences. Between Cards in a Carousel, there is Canvas.x2 or 8 pixels of spacing. The standard Card variations in a Carousel are all set to fill 91% of the screen viewport minus the page margins to fit Workday’s grid system.

Mini Cards, however, are uniquely configured to fill the screen in sets of 3. The width of the Cards are dynamic based on the viewport. When more than 3 related Mini Cards are used, another row is added.

Designing With the Framework

When tasked with designing within the confines of the Mobile Card Framework, close collaboration and partnership with Web teams or dual-platform oversight is encouraged.

Canvas Mobile offers Mobile Card Framework Figma templates and tooling to work from and adapt for your product area.

For help crafting more intuitive Cards, review the Canvas UX Content Guide for consistency with data naming conventions.

Adapting the Framework

Any changes to the Framework require cross-platform collaboration and prioritization. Adaptations are welcomed under evidence of clear systematic improvement across both platforms. System-level changes impact and are delivered to all code connected with the Framework.

If support gaps are identified in the Framework, please connect with the Canvas Mobile design team for assistance. The team hosts regular Office Hours as well as an open space to pose questions and ask for help.

Learn More

Further information on the Mobile Cards Framework can be found in Canvas Mobile’s Card component documentation as well as the Mobile Hubs Framework documentation.

More foundational information on the Web Card Framework can be found in UI Platform’s XO developer documentation.