Cards
Cards contain content and actions about a single subject.
Cards are surfaces that display content and actions on a single topic.
They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.
Simple Card
Although cards can support multiple actions, UI controls, and an overflow menu, use restraint and remember that cards are entry points to more complex and detailed information.
Lizard
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica
By default, we use the combination of a <div> element and a background image to display the media. It can be problematic in some situations. For instance, you might want to display a video or a responsive image. Use the component property for these use cases:
Lizard
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica
UI Controls
Supplemental actions within the card are explicitly called out using icons, text, and UI controls, typically placed at the bottom of the card.
Here's an example of a media control card.
This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 cup of frozen peas along with the mussels, if you like.