The card is a background element that holds some data. It lays over top of the background of the screen. Use this to contain information.
To duplicate the Figma file, go here.
The card comes in two basic varieties. The one on the left is used for multiple cards on a page, that are each not the primary focus. The one on the right is used for when there is a card that is the primary focal element.
The basic card has a drop shadow effect for contrast with the background.
An inline card is nested within another card.
This card has no drop shadow so it nests into the container.
An accent card is used to draw focus. Use sparingly.
This card has a drop shadow effect for contrast with the background.