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.

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

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"

<Card variant="outlined">{card}</Card>

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
Paella dish

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.

green iguana
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 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:

green iguana
Lizard

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.

Live From Space
Mac Miller
Live from space album cover

🎨 If you are looking for inspiration, you can check MUI Treasury's customization examples.