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.

Anatomy

High Emphasis Surface

High emphasis card takes on a 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.

Surface
Slot

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.

Surface
Slot

Outlined Surface

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

Surface — 1px stroke
Slot

Full Image

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

Primary region — Filled Image
Slot

Top Image

The image will fill the width of the card surface but have a dynamic height. As cards scale to adapt, the image height can also change. Image cards can be on a raised surface, flat or outlined surface.

Image region
Secondary region
Slot

Side Image

The image will fill the height of the card surface but have a dynamic width. As cards scale to adapt, the image width can also change. Image cards can be on a raised surface, flat or outlined surface.

Image region
Secondary region
Slot

Card with Title

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

Title Slot (Optional)
Action Slot (Optional)
Body Slot
Card Container

Stacked Card

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.

Title Slot (Optional)
Action Slot (Optional)
Body Slot
Stack with 2 Cards
Stack with 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.

Compact Button

‍

Card Footer

Card footer can be added to the bottom of any card variant. This is to be used when you need an alternate action attached to the card. In other words, there may be one action or hyperlink when tapping/clicking the main part of the card, and a different action when tapping/clicking the footer area of the card.

Footer Slot

Card Patterns

Below are some common card patterns that are used often throughout the platform and warrant their own component pattern.

Avatar CTA (High Emphasis)

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

Card — High Emphasis
Icon —Small Avatar
Title — Subtitle 1
Subline — Caption

Avatar CTA (Low Emphasis)

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

Card — Low Emphasis
Icon — Small Avatar
Title — Subtitle 1
Subline — Caption

Avatar CTA Content Wrapping

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 width of the card fills the screen size and height depends on the content inside.

Card with Title Variant
Heading - Subtitle 1
Subline - Body 2 (Optional)
CTA - Chip (Optional)

Preformatted Text CTA Card Content Wrapping

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
Surface (Raised)	Background color	Defined by Design Default: ∆colorPlatformWhite
Surface(Raised)	Shadow color	∆surfacePlatformRaisedShadowColor
Surface (Outlined)	Background color	∆colorPlatformWhite
Surface (Outlined)	Stroke color	∆colorPlatformGray100
Surface (High Emphasis)	Background color	∆colorBrandedAffordance
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. The footer CTA area can be set to automatically be hidden when the cards are in the collapsed state, so that it looks less like the footer button's action will take place when in the stacked state. Then, when expanded, the footer CTA areas will automatically show themselves. This hidden footer CTA behavior is optional.

Behavior

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

Basic touch interaction

Whenever cards are tapped or clicked, they respond to that action and mimic the physical world by scaling down to 98% upon the initial touch/click, and then scales back to 100% after the tap/click event completes. This interaction serves as a nice anticipation movement for all of the other card interaction patterns.

Collapsed > expanded (Native only)

Whenever a user interacts with a card that expands to create a new context, the card should expand to fill the entire view. Once expanded into a full view, the user can collapse the card back down by swiping vertically on a non-interactive part of the surface.

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 In Entry (Native Only)

Slide Away Dismissal (Native Only)

Fade In Entry

Fade Away Dismissal

Expand

Collapse

‍

Developer Docs

Vue Developer Docs

Component documentation coming soon!