Cartões
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
Cards são os elementos básicos do seu app de TV.
Recursos
Destaques
- Use um card para mostrar conteúdo sobre um único tema.
- Um card pode conter qualquer coisa, desde imagens até títulos, com suporte a texto, botões, listas e outros elementos da interface.
- Um cartão não pode ser mesclado com outro ou dividido em vários cartões.
- Há seis variações de cartões: padrão, clássico, compacto,
com encarte, padrão amplo e clássico amplo.
Variantes
Há cinco tipos de cards, cada um com um caso de uso diferente:
- Padrão
- Clássica
- Compacta
- Padrão amplo
- Clássico amplo
Blocos de conteúdo
O conteúdo de um card é organizado em blocos distintos. O design visual do cartão,
com ênfase, indica hierarquia. O layout dos cards
acomoda os tipos de conteúdo que eles têm.
Anatomia
- Título
- Subtítulo
- Descrição
- Texto extra
Especificações
Cartão padrão
Anatomia
- Imagem
- Bloco de conteúdo
Estados
Especificações
Cartão clássico
Anatomia
- Imagem
- Bloco de conteúdo
Estados
Especificações
Cartão compacto
Anatomia
- Imagem
- Bloco de conteúdo
Estados
Especificações
Cartão grande padrão
Anatomia
- Imagem
- Bloco de conteúdo
Estados
Especificações
Cartão clássico largo
Anatomia
- Imagem
- Bloco de conteúdo
Estados
Especificações
Uso
Os cards são elementos de design versáteis que podem ser usados para mostrar uma variedade
de conteúdo de maneira visualmente atraente e fácil de usar. As seções
abaixo abordam considerações de design para cards.
Proporção
Existem três proporções comuns de cards: 16:9, 1:1 e 2:3.
Cada proporção tem seus pontos fortes, então a melhor escolha para
você depende das suas necessidades específicas.
- A proporção mais comum para cards é 16:9. É uma proporção ampla, adequada para exibir imagens e vídeos.
- 1:1 é uma proporção quadrada. É uma boa opção para cartões que precisam
ser equilibrados visualmente, como elenco e equipe, logotipos de canais ou de equipes.
- 2:3 é uma proporção mais alta. É uma boa escolha se você quiser dividir
a grade e dar mais ênfase.
Em última análise, a melhor maneira de escolher uma proporção para seus cards é
testar diferentes opções e ver o que fica melhor.
Confira alguns exemplos de usos de proporções
1:1
Equipe de filmagem e atores
Logotipos de times esportivos
2:3
Livros em destaque
16:9
Cards de filmes
Layout e espaçamento
Larguras variadas dos cards com base no número de cards visíveis na tela
podem ser feitas implementando um pico adequado com um espaçamento de 20 dp.
Layout de um card
Largura do card: 844 dp
Layout de dois cards
Largura do card: 412 dp
Layout de três cards
Largura do card: 268 dp
Layout de quatro cards
Largura do card: 196 dp
Layout de cinco cards
Largura do card: 124 dp
Bloco de conteúdo
A largura do bloco de conteúdo em um card precisa ser a mesma da miniatura
da imagem. Se você precisar exibir mais texto no bloco de conteúdo,
use uma ampla variação de cards.
check_circle
O que fazer
Use cards largos para mostrar descrições curtas, mas somente se for absolutamente necessário. A descrição precisa ter apenas algumas palavras.
cancel
O que não fazer
Evite descrições longas em cards empilhados verticalmente.
Cartão compacto
Os cards compactos devem ser concisos e fáceis de ler. O conteúdo que precede a imagem de plano de fundo precisa ser breve e direto ao ponto. Evite títulos,
subtítulos ou descrições longos. Isso torna seus cards mais
visualmente atraentes e fáceis de digitalizar.
Para tornar o texto mais legível em uma imagem, adicione uma sobreposição de gradiente preto semitransparente. Isso escurece o plano de fundo sem ocultar
muito a imagem, tornando o texto mais fácil de ver.
check_circle
O que fazer
Card compacto usando scrim sobre o plano de fundo da imagem.
cancel
O que não fazer
Não use cards compactos sem scrim sobre a imagem de plano de fundo.
O conteúdo e os exemplos de código nesta página estão sujeitos às licenças descritas na Licença de conteúdo. Java e OpenJDK são marcas registradas da Oracle e/ou suas afiliadas.
Última atualização 2025-07-27 UTC.
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 2025-07-27 UTC."],[],[],null,["# Cards are the basic building blocks of your TV app. \n\nResources\n---------\n\n| Type | Link | Status |\n|----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|\n| Design | [Design source (Figma)](https://goo.gle/tv-desing-kit) | Available |\n| Implementation | [Jetpack Compose](/reference/kotlin/androidx/tv/material3/package-summary#Card(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,androidx.tv.material3.CardShape,androidx.tv.material3.CardColors,androidx.tv.material3.CardScale,androidx.tv.material3.CardBorder,androidx.tv.material3.CardGlow,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) | Available |\n\nHighlights\n----------\n\n- Use a card to display content on a single topic.\n- A card can hold anything from images to headlines, supporting text, buttons, lists, and other UI elements.\n- A card cannot merge with another card or divide into multiple cards.\n- There are six variations of cards: standard, classic, compact, inset, wide standard, and wide classic.\n\nVariants\n--------\n\nThere are five types of cards, each with a different use case:\n\n1. Standard\n2. Classic\n3. Compact\n4. Wide standard\n5. Wide classic\n\nContent blocks\n--------------\n\nA card's contents are arranged in distinct blocks. The card visual design\nincluding emphasis denotes hierarchy. The layout of the cards themselves\naccommodates the types of content the cards contain.\n\n### Anatomy\n\n1. Title\n2. Subtitle\n3. Description\n4. Extra text\n\n### Specs\n\nStandard card\n-------------\n\n### Anatomy\n\n1. Image\n2. Content block\n\n### States\n\n### Specs\n\nClassic card\n------------\n\n### Anatomy\n\n1. Image\n2. Content block\n\n### States\n\n### Specs\n\nCompact card\n------------\n\n### Anatomy\n\n1. Image\n2. Content block\n\n### States\n\n### Specs\n\nWide standard card\n------------------\n\n### Anatomy\n\n1. Image\n2. Content block\n\n### States\n\n### Specs\n\nWide classic card\n-----------------\n\n### Anatomy\n\n1. Image\n2. Content block\n\n### States\n\n### Specs\n\nUsage\n-----\n\nCards are versatile design elements that can be used to display a variety\nof content in a visually appealing and user-friendly way. The following\nsections explore design considerations for cards.\n\n### Aspect ratio\n\nThere are three common aspect ratios for cards: 16:9, 1:1, and 2:3.\nEach aspect ratio has its strengths, so the best choice for\nyou depends on your specific needs.\n\n- 16:9 is the most common aspect ratio for cards. It is a wide aspect ratio that is well-suited for displaying images and videos.\n- 1:1 is a square aspect ratio. It is a good choice for cards that need to be visually balanced, such as cast and crew, channel logos, or team logos.\n- 2:3 is a taller aspect ratio. It is a good choice if you want to break up the grid and bring more emphasis.\n\nUltimately, the best way to choose an aspect ratio for your cards is to\nexperiment with different options and see what looks best.\n\nHere are some examples usages of different aspect ratios \n\n### 1:1\n\nCast and crew \n\nSports teams logos\n\n### 2:3\n\nTrending books\n\n### 16:9\n\nMovie cards\n\n### Layout and spacing\n\nVarying card widths based on the number of cards visible on the screen\ncan be achieved by implementing proper peaking with a spacing of 20dp. \n\n### 1-card layout\n\nWidth of the card --- 844dp\n\n### 2-card layout\n\nWidth of the card --- 412dp\n\n### 3-card layout\n\nWidth of the card --- 268dp\n\n### 4-card layout\n\nWidth of the card --- 196dp\n\n### 5-card layout\n\nWidth of the card --- 124dp\n\n### Content block\n\nThe width of the content block in a card should be the same width as the image\nthumbnail. If you need to display more text in the content block,\nuse a wide card variation. \ncheck_circle\n\n### Do\n\nUse wide cards to show short descriptions, but only if absolutely necessary. The length of the description should be only a few words. \ncancel\n\n### Don't\n\nAvoid long descriptions on vertically stacked cards.\n\n### Compact card\n\nCompact cards should be concise and easier to read. The content preceding the\nbackground image should be brief and to the point. Avoid long titles,\nsubtitles, or descriptions. This makes your cards more\nvisually appealing and easier to scan.\n\nTo make text more readable on an image, add a semi-transparent black\ngradient overlay. This darkens the background without obscuring\nthe image too much, making the text easier to see. \ncheck_circle\n\n### Do\n\nCompact card using scrim on top of image background. \ncancel\n\n### Don't\n\nDon't use compact cards without scrim on top of the background image."]]
