Web Design
Cards
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
Filled
Elevated
Outlined
- 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
Usage
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
Anatomy
Card layouts can vary depending on use. The following are examples of common card layouts.
Filled Cards
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
Life Groups
You're never alone when you're in a Life Group. Join one of our groups.
Elevated Cards
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
Upcoming Event
Truncate text at two lines using the "truncate" CSS Class tag.
Learn More
Read more on cards on Material.io