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.

Cartão Delineado

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

Interação Complexa

O conteúdo do cartão pode ser expandido. (Clique no gerador abaixo para ver detalhes.)

Mídia

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

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:

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.

API

• <Card />
• <CardActionArea />
• <CardActions />
• <CardContent />
• <CardHeader />
• <CardMedia />
• <Collapse />
• <Paper />