Card

Approved — Ready for dev

Cards are interactive containers that can be static, dismissed off screen, or even used as a full screen surface to create new context. Cards are used to display information within the entire surface. It may have different styling depending on the emphasis needed. The card can be styled to have either a raised surface. flat or stroke outline. Cards may also need an image along with content in a secondary region. The position of the image may be on the top or on the left side of the card.

Card

Anatomy

Cards are used to display information within the entire surface. It may have different styling depending on the emphasis needed. The card can be styled to have either a raised surface. flat or stroke outline. Cards may also need an image along with content in a secondary region. The position of the image may be on the top or on the left side of the card. 

High Emphasis Surface

High emphasis cards take on any background color that is different from white. The default color is the Branded Affordance color. Content on top of the card needs to be able to pass accessibility and uses an On color to make sure black or white content passes on the surface. The card can be on a raised surface or flat surface.

Low Emphasis Surface

The card can be on a raised surface or flat surface.  If using the flat surface, it should be on another background color other than white.

Outlined Surface

The card can be on a raised surface or flat surface.

Image Surface

Image cards can be on a raised surface, flat or outlined surface.

Content Slot

The content slot contains 1 slot for everything within the card. The width of the card fills the screen size and height depends on the content inside.

  1. Surface - High Emphasis, Low Emphasis, Outlined or Image
  2. Content Slot (Optional)

Standard Slots

The standards slot contains 3 slots for a title, actions and body content. The width of the card fills the screen size and height depends on the content inside. 

  1. Title Slot (Optional)
  2. Action Slot (Optional) 
  3. Content Slot (Optional)
  4. Surface - High Emphasis, Low Emphasis, Outlined or Image

Regions

Cards can be split into two regions; horizontally or vertically. The split can happen anywhere within the card. No set width or height and the content inside will be defined by design.

Horizontally Split Region

Each region can have all the standard slots or just the content slot. If there is an image or background color, it will bleed to the edges of its region. 

  1. Horizontal Region - Content Slot or Standard Slots
  2. Surface - High Emphasis, Low Emphasis, Outlined or Image
  3. Horizontal Region- Content Slot or Standard Slots
  4. Surface - High Emphasis, Low Emphasis, Outlined or Image

Vertically Split Region

Each region can have all the standard slots or just the content slot. If there is an image or background color, it will bleed to the edges of its region.

  1. Vertical Region - Content Slot or Standard Slots
  2. Surface - High Emphasis, Low Emphasis, Outlined or Image
  3. Vertical Region - Content Slot or Standard Slots
  4. Surface - High Emphasis, Low Emphasis, Outlined or Image

Card Stacks

Standard Slots

The width of the card fills the screen size, and height depends on the content inside. The height of the stacked group will be based on the first card in the group. Note: All cards in the stack should have identical styles. Do NOT show edge to edge images in the cards when they are under the main stack.

  1. Surface
  2. Slot - Content or Standard Slots
  3. Stack for 2 Cards
  4. Stack for 3+ Cards

‍

Expanded Stacked Card

When the cards expand, there will be a collapse button at the bottom for the user to close the grouping again. If the cards in the stack have a region set to hide in a collapsed stack, they will then be shown at this point.

  1. Custom Button (See specs and spacing)

Tile Template

Tile (High Emphasis)

The width of the card depends on the design and has a fixed height of 152px. The icon and text colors will automatically go black or white depending on the background color.

  1. Surface - Raised High Emphasis
  2. Icon —Small Avatar 
  3. Title — Subtitle 1
  4. Subline — Caption

Tile (Background Image)

The width of the card depends on the design and has a fixed height of 152px. The icon and text colors will depend on the person creating the tile with an image to make sure the text will pass accessibility depending on the image used.

  1. Surface - Raised Image 
  2. Icon —Small Avatar 
  3. Title — Subtitle 1
  4. Subline — Caption

Tile (Medium Emphasis)

The width of the card depends on the design and has a fixed height of 152px. 

  1. Surface - Raised Medium Emphasis  
  2. Icon — Small Avatar
  3. Title — Subtitle 1
  4. Subline — Caption 

Tile (Low Emphasis)

The width of the card depends on the design and has a fixed height of 152px. 

  1. Surface - Flat Outlined 
  2. Icon — Small Avatar 
  3. Title — Subtitle 1
  4. Subline — Caption 

Footer CTAs

If there is one button, the button can be either auto width based on the content in the button or fill the width of the card 100%. If there are two buttons, they will split the width of the card 50/50. 

Preformatted Text CTA Card 

The width of the card fills the screen size and height depends on the content inside. 

  1. Title - Overline 
  2. Icon - 32px (Optional)
  3. Heading - Subtitle 1
  4. Subline - Body 2 (Optional)
  5. CTA Footer Region - Chips (Optional up to 2)
  6. Action - Caption Link or 20px Icon (Optional)
  7. Card Surface

Content Wrapping

Tile

The content within this card will wrap to two lines then truncate afterwards. When the title wraps, it will move into the empty space above to make sure the card does not get any taller since it will be next to other cards the same height. The width of the card depends on the design and has a fixed height of 152px. 

Preformatted Text CTA Card

The title should always be short but can go up to two lines then truncate, if it starts moving into the slot next to it. The heading and secondary content within this card will wrap to two lines then truncate afterwards. The CTA should be short and max will fill the width of the card.

Specs

Color

Element Property Value
HE Surface Background color Defined by Design
Default: ∆colorBrandedAffordance
Raised Surface Shadow color ∆surfacePlatformRaisedShadowColor
Outlined Surface Background color Defined by Design
Default: ∆colorPlatformWhite
Outlined Surface Stroke color ∆colorPlatformGray100
LE Surface Background color Defined by Design
∆colorPlatformWhite
Surface (Selected) Stroke color ∆colorBrandedAffordance
HE Avatar CTA Background color ∆colorBrandedAffordance
HE Avatar CTA (Avatar) Background color ∆colorPlatformAlpha300
HE Avatar CTA (Avatar) Icon color ∆colorBrandedAffordanceOn
HE Avatar CTA (Heading) Text color ∆colorBrandedAffordanceOn
HE Avatar CTA (Heading) Subline color ∆colorBrandedAffordanceOn
LE Avatar CTA Background color ∆colorPlatformWhite
LE Avatar CTA (Avatar) Background color ∆colorAffordance100
LE Avatar CTA (Avatar) Icon color ∆colorBrandedAffordanceAccessible
LE Avatar CTA (Heading) Text color ∆colorPlatformGray900
LE Avatar CTA (Heading) Subline color ∆colorPlatformGray900

Elevation

Element Property Value
Surface Shadow Y offset ∆surfacePlatformRaisedShadowY
Surface Shadow opacity ∆surfacePlatformRaisedShadowOpacity
Surface Shadow spread ∆surfacePlatformRaisedShadowSpread
Surface (static) Shadow blur ∆surfacePlatformRaisedShadowBlurResting
Surface (hover) Shadow blur ∆surfacePlatformRaisedShadowBlurLifted
Surface (pressed/active) Shadow blur ∆surfacePlatformRaisedShadowBlurPressed
Surface (dragged) Shadow blur ∆surfacePlatformRaisedShadowBlurLifted

Spacing

Cards have a default amount of padding within the primary region, but can optionally allow content to extend the full width of the card. Secondary regions can also optionally use the default padding, or ignore padding completely to create a full-bleed experience.

States

Note: High emphasis card does not have a selected state.

Static

Cards can appear as collapsed or expanded, and both of these “states” without any additional interaction with the user would be considered to be in a static state. Some might refer to this as an enabled state.

Hover

Hover states only apply to users utilizing a mouse to interact with UI elements, and with the card specifically, the hover state creates a unique interaction in which the card rises slightly in response to the hovered pointer. The paradigm leans on the concept of a magnetic field in which the user's pointer pulls the magnetic card surface toward it when hovering. 

Pressed/Active

When a card is either pressed (touch event) or clicked (mouse event) a pressed/active state is displayed to the user while the press/touch is occurring. Once the press is released and the click event is completed, the elevation returns to static state.

Focused

The visual treatment of cards when focused via navigating through the document using the keyboard or mobile OS-level accessibility gestures, is handled by either the OS or the browser, and is not styled in any special way. When interacting with cards using either a touch or mouse event, the focused state is not applied.

Selected

The visual treatment for when a card is selected is for it to get a 2px border all around the card. This state is used to select the card as a decision for the user to pick from. 

Theming

Note: shape is a selection made by the FI within Theme Builder (sharp, soft, round, squircle), and the radius is based on the size of the component. The card component is considered to be a large component. 

Shape

Element Property Value
Surface Shape ∆shapeBrandedLarge

Placement

Cards can be placed almost anywhere within the main content area of a view or activity. Cards can live on their own in the flow of content, or contained together within either a card list or stack.

Horizontal Card List

Cards appearing within a group of other cards should all have the same height to appear uniform and indicate their relationship to one another. The width of each individual card should be flexible to work within many different design solutions. 

Vertical Card List

Cards can appear in vertical lists — the height of which is determined by the content within the cards. There is no need to ensure uniform height for each card. 

Stackable Cards

Cards can stack on top of each other to make a grouping. This grouping can expand to open all the cards and will have CTA for a compact button at the bottom to collapse the cards.

Card Groupings

CTA with Groupings

The only action that can take place on a card in a stacked state, is to expand the stack. Once expanded, the user can interact with each card individually.

Behavior

Potential behaviors for cards are: basic touch interaction, expand, scrolling, swiping, dragging, entry and dismissal. 

Touch Action Hierarchy 

Cards have many options as far as what actions can be taken on what parts of the card in various states. Below is outlined the basic hierarchy of what action to take, if multiple actions happen to be placed on a card. Going from top to bottom of the action hierarchy:

  1. Tapping anywhere on a collapsed card stack will Expand the card.
  2. Tapping on an individual element placed in a slot will activate that element's action.
  3. Tapping anywhere in a region (except for the above cases) will activate the region's action.
  4. Tapping anywhere in the card (except for the above cases) will activate the card action. 

Scrolling

All the cards within a card group do not need to appear on screen at once, and can be accessed by swiping horizontally or vertically to reveal additional cards in the group.

Swiping (Native only) 

Some cards may include hidden interactions that can be accessed by a user swiping the card to the right or left. The pulling gesture should include some friction. 

Single Action

If actionable content lives below a swipeable card, and there’s only one possible action, swiping just a little will reveal content below; but will ultimately snap back into place if not swiped beyond the width of the actionable content. If the card is swiped beyond the halfway point, the action is triggered without the need for the user to swipe the card and then tap the actionable content below. In this context, “halfway point” is defined as half the width of the card. Swiping to reveal the full amount of actionable content below, while not exceeding the halfway point, the card will remain “open” and the user is required to manually tap the actionable content to trigger the action. 

Multiple Actions 

If multiple actions live below the card, swiping just a little will reveal the content below, but will ultimately snap back into place if not swiped beyond the width of the first action. Swiping fully will not trigger an action like the single action swipe; but will simply reveal all the actionable content areas below.

Dragging

Some cards may be long pressed and dragged. Whenever this occurs, the card should increase in elevation and be dragged above other list items. List items beneath the card should respond to the position of the dragged card as it hovers, with all items becoming active again once the card is dropped.

Entry and dismissal (Native only)

Some cards may not be displayed initially to the user, but appear after some time to request information or confirmation from the user. Upon entering, these cards should move any content in their way before entering, and come to rest naturally. Whenever a card that enters this way is dismissed, it should continue its original path of motion, bringing closure to the card’s entrance.

Slide Away Dismissal (Native Only)

Fade Away Dismissal

Expand


Collapse

‍

Developer Docs

Vue Developer Docs

Component documentation coming soon!

Introduction
Anatomy
Specs
States
Theming
Placement
Behavior
Dev Docs
Dev Docs