BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon
MetLife Design System 2.0

Cards

Variations

There are 6 variations of cards.

1. Provider info card

Card variation provider info card

Provider info cards display details and contact information of providers. This includes their name and specialty, address and distance. Name of provider is in MetLife Blue 2 (#007ABC). Specialty is in black (#000000). The whole card is tappable to the same destination.

2. Provider info card with status

Card variation provider info card with status

Provider info cards can also display whether or not a provider is accepting new patients. This information is in MetLife Darkest Gray (#333333) with a dot in MetLife Teal (#00ACA0). The whole card is tappable to the same destination.

3. Provider info card with button

Card variation provider info card with button

Provider info cards with button that allows user to book appointments. The whole card is tappable separate from the tappable button.

4. Table card

Card variation table card

Table cards display table information such as a bill in a payment flow. Headers and data row column two text are black (#000000), data row column one text is MetLife Darkest Gray (#333333). Line divider is MetLife Gray (#D9D9D6). Table cards should only have one group of content (for example, do not place two bills/tables in a card). There can only be one table card per page/screen. The table card is not tappable.

5. Notification card

Card variation notification card

Notification cards show a user their recent account activity or upcoming events. Text is black (#000000) and links are MetLife Blue 2 (#007ABC). Important information is called out by setting in Noto Sans Bold. There should not be more than four notifications on a card. One line of text contains a maximum of 26 characters including spaces, and each notification should not exceed one line. A vertical gradient along the left side of the card signifies unread status. Each row and text link are tappable to the same destination, separate from other rows.

6. Horizontal swiping card

Card variation notification card

Horizontal swiping cards display a collection of content that a user can swipe through horizontally. There must be at least 3 cards to constitute a collection of horizontal swiping cards.

States

Provider info card

Default

Card state provider card default

Focused

Card state provider card focus

Provider info card with status

Default

Card state provider card with status default

Focused

Card state provider card with status focused

Provider info card with button

Default

Card state provider card with button default

Focused

Card state provider card with focused

Table card

Default

Card state table card default

Focused

Card state table card scrolled

Notification Card

Default

Card state notification card default

Focused

Card state notification card scrolled

Dismiss

Card state notification card dismiss

To dismiss a notification card, a user can drag an individual notification to the left and reveal a trash can icon that allows dismissal. The background is red (#DB1818). Alert text is masked to the card shape as it is dragged.

Usage

Cards are used to deliver unique information. The are located on the extended header and are etiher sticky, and remain on top of the header as a user scrolls, or they can scroll behind the default header.

Notification card

Card usage notification card

Notification cards deliver recent activity in a users account, such as upcoming and overdue payments, or claim status.

Bill card

Card usage bill card

Table cards can display bill information in a payment flow, remaining sticky on the header.

Provider info card in list

Card usage provide card in list

Provider info cards scroll vertically when in list view.

Provider info card on map

Card usage provide card on map

Provider info cards scroll horizontally when on map.

Horizontal swiping card

Card usage notification card

Horizontal swiping cards displaying a collection of scrollable content.

Animation

1. Provider info card

When looking for a provider, information about each provider is located on scrollable cards. When in a list, they scroll vertically. When cards appear on a map, they scroll horizontally. A user can tap a card to access detailed information about each provider.

2. Notification card

Notification cards allow a user to access information regarding recent activity in their account. A user can access transactional information (‘PAY’), which uses a Third Level Transition, or non transactional information (‘VIEW’), which uses a Second Level Transition.

3. On load

When transitioning to a screen with a notification card, the card should scale up from 90% and fade in with a slight opacity increase.

4. Dismiss

A user can dismiss a notification, by dragging to the left on the text row. This reveals a trash icon that can be tapped to discard the notification. The text in the row is masked into the card shape while it is dragged. When the trash icon is tapped, the entire row slides left, masked by the card shape, and fades out.