What is a card?
Cards contain content and actions that relate information about a subject.
- A card is identifiable as a single, contained unit.
- A card can hold anything from images to headlines, supporting text, buttons, lists, and other components.
- A card's layout and dimensions depend on its contents. There is no one right way to make a card.
Types of cards
- Three official card types - elevated, filled and outlined
- By default, cards have no shadow and low elevation
- If a card is interactable, it should be elevated
Cards should demonstrate clear visual hierarchy, making it easy to scan for relevant information. They can serve as a starting point for more information on a topic or a summarization of information.
- Large bodies of text should not be forced into a card
- Text should be grouped closely to show relation
- Clickable cards should not contain any buttons
Card layouts can vary depending on use. The following are examples of common card layouts.
Filled cards contain a neutral background color and can contain multiple modules and detailed information.
- Use the "card" CSS Class tag
- Images have margin to border of card
- Use visual hierarchy to group information
- Use buttons to direct user to additional pages
You're never alone when you're in a Life Group. Join one of our groups.
Elevated cards are clickable and contain extremely brief information. They feature a drop shadow and animation that makes the card float when hovered with a mouse. The primary function of elevated cards are to act like a large button.
- Use the "card clickable" CSS Class Tag
- Photos stretch to the border of the card
- Photo corner radius changes to 22px and 0px
- The URL should be in the photo
- Change margins to 0px for heading bottom and text editor top
Truncate text at two lines using the "truncate" CSS Class tag.
Read more on cards on Material.io