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.
Cartão Simples
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
be•nev•o•lent
adjective
well meaning and kindly.
"a benevolent smile"
Word of the Day
be•nev•o•lent
adjective
well meaning and kindly.
"a benevolent smile"
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.
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:
⚠️ Quando
component="img", CardMedia depende deobject-fitpara centralizar a imagem. Não é suportado pelo IE 11.
Controles da interface do usuário
Ações suplementares dentro do cartão são explicitamente chamadas usando ícones, texto e controles de interface do usuário, normalmente colocados na parte inferior do cartão.
Aqui está um exemplo de um controle de mídia com cartão.
Live From Space
Mac Miller
Customização
🎨 Se você está procurando inspiração, você pode verificar os exemplos de customização de MUI Treasury.