Pular para o conteúdo

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

benevolent

adjective

well meaning and kindly.
"a benevolent smile"

Cartão Delineado

Defina variant="outlined" para renderizar um cartão delineado.

Word of the Day

benevolent

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.)

R
Shrimp and Chorizo PaellaSeptember 14, 2016

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.

Mídia

Exemplo de um cartão usando uma imagem para reforçar o conteúdo.

Lizard

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:

Contemplative Reptile
Lizard

Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica

⚠️ Quando component="img", CardMedia depende de object-fit para 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.

Live From Space
Mac Miller

Customização

🎨 Se você está procurando inspiração, você pode verificar os exemplos de customização de MUI Treasury.