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
adjective
well meaning and kindly.
"a benevolent smile"
<Card variant="outlined">{card}</Card>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 uma combinação de um elemento <div> e um background image para exibir o componente media. 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 estes casos de uso:
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica
⚠️ Quando
component="img", CardMedia depende deobject-fitpara centralizar a imagem. Não é suportado pelo IE11.
Ação primária
Muitas vezes um cartão permite que os usuários interajam com toda sua superfície para acionar sua ação principal, seja uma expansão, um link para outra tela ou algum outro comportamento. A área de ação do cartão pode ser especificada envolvendo seu conteúdo em um componente CardActionArea.
Um cartão também pode oferecer ações suplementares que devem ser desvinculadas da área de ação principal, a fim de evitar sobreposições de eventos.
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.
Customização
🎨 Se você está procurando inspiração, você pode verificar os exemplos de customização de MUI Treasury.