Cartão
Cartões contêm conteúdo e ações sobre um único assunto.
Cartões são componentes que exibem conteúdo e ações em um único tópico.
Eles devem ser relevantes, de fácil verificação e apresentar informações úteis. Elementos, como texto e imagens, deve ser colocado sobre eles de uma forma que indica claramente a hierarquia.
Basic card
Apesar dos componentes cartões poderem suportar múltiplas ações tais como: controles de UI, e overflow de menu, use-os com moderação e lembre-se que cartões são pontos de entrada de informações mais complexas e detalhadas.
Word of the Day
adjective
well meaning and kindly.
"a benevolent smile"
Word of the Day
adjective
well meaning and kindly.
"a benevolent smile"
Interação Complexa
O conteúdo do cartão pode ser expandido. (Clique no gerador abaixo para ver detalhes.)
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.
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica
Por padrão, nós usamos a combinação de um elemento <div> e uma imagem de fundo para exibir a mídia. Isto pode ser problemático em algumas situações. Por exemplo, você pode querer exibir um vídeo ou uma imagem responsiva. Use a propriedade component para estas situações:
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica
Ação primária
Often a card allow users to interact with the entirety of its surface to trigger its main action, be it an expansion, a link to another screen or some other behavior. The action area of the card can be specified by wrapping its contents in a CardActionArea component.
A card can also offer supplemental actions which should stand detached from the main action area in order to avoid event overlap.
Controles da interface do usuário
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.
🎨 If you are looking for inspiration, you can check MUI Treasury's customization examples.