There are 6 variations of cards.
1. 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
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
Provider info cards with button that allows user to book appointments. The whole card is tappable separate from the tappable button.
4. 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
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
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.
Provider info card
Provider info card with status
Provider info card with button
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.
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 cards deliver recent activity in a users account, such as upcoming and overdue payments, or claim status.
Table cards can display bill information in a payment flow, remaining sticky on the header.
Provider info card in list
Provider info cards scroll vertically when in list view.
Provider info card on map
Provider info cards scroll horizontally when on map.
Horizontal swiping card
Horizontal swiping cards displaying a collection of scrollable content.
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.
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.