Card

Cards are containers to show content or actions relevant to an app or certain function. They are always the top layer when They are shown in any layout. They can contain other components as part of them, also can have multiple behaviours depending on how they are used in a flow. They appear from the bottom and can be scrollable or fixed depending on their type.

Dialog Card

Usage
Anatomy
Specs

A dialog card is a dismissible card used seek or provides feedback in case of an alert. They can also provide choices and ask for text input. Dialog cards are used to show alerts, choices or text entry. They can contain any component based on requirement. They are always top layer in any screen or on top of a notch or fixed card and always dismissible using the cross icon button.

usage example image

Fixed Card

Usage
Anatomy
Specs

A fixed card is a non dismissible permanent card used to show order summery or to verify choices inside a flow. They are used to show order summery or to confirm information, they can contain any component based on requirements. Dialog cards and snap cards can open over them, and they can not be dismissed or scrolled.

usage example image

Snap Card

Usage
Anatomy
Specs

Snap cards snap to the top of the screen when pulled from a partial view. They are used to show any kind of information, choices or summery. They can contain any component based on requirements. They appear at the bottom of the screen, when pulled they always snap to the top of the screen. They can not be dismissed completely by pulling but they will snap to their original size(that they were previously). They can not have any other card on top of them.

usage example image

Fullscreen Card

Usage
Anatomy
Specs

Full screen cards snap to the top of the screen when launched, and can be dismissed fully. They are used in multiple cases to show any kind of information, choices or summery. It can contain any component based on requirements. They can be launched by any action, when launched they always snap to the top of the screen. They can be dismissed completely by pulling down. They can not have any other card on top of them.

usage example image

Stack Card

Usage
Anatomy
Specs

Stack cards snap to the top of the screen when launched, and can be dismissed fully. They can be used to contain a complete flow as they have the ability to go forward and back. They are used for a complete or a micro flow inside application. They can be launched by any action, when launched they always snap to the top of the screen. They can be dismissed completely by pulling down or go back in the flow by using the back icon button. They can not have any other card on top of them.

usage example image