Card Meaning
Cards Meaning exibem uma prévia do conteúdo de "Significados de Letra de Música".
Uso
Utilize este card em layouts onde há uma recomendação de "significado" como conteúdo a ser consumido. Por exemplo, em uma página inicial com comportamento "Para Você" (For You), onde conteúdos são recomendados ao usuário com base em seus gostos.
✅ DO
Use o Card Meaning especificamente para recomendar significados de música, mantendo a estrutura de conteúdo (Thumbnail, Título, Artista, Prévia).
✅ DO
Use a variante "Elevated" em Landing Pages e a "Outlined" em layouts de recomendação internos (ex: "For You").
❌ DON'T
Não use este componente para exibir a letra inteira da música; ele é apenas uma prévia (teaser).
❌ DON'T
Não use este componente para recomendar outros tipos de conteúdo, como Álbuns, Playlists ou Artistas (existem componentes específicos para isso).
Anatomia
1. Container
O 'Container' é o elemento principal que agrupa todos os outros.
Interação (Ação de Clique): A área clicável é o 'Container' (o card inteiro). Ao clicar, o usuário é redirecionado para a página de significado da música correspondente.
2. Thumbnail
Exibe a imagem associada ao significado.
Regra de Conteúdo: Deve exibir prioritariamente a arte do álbum. Se a arte do álbum não estiver disponível, deve ser exibida a imagem do artista. (O fallback subsequente, caso nenhuma imagem esteja disponível, é gerenciado pelo sistema de assets).
3. Song name
O nome da música.
Regra de Conteúdo: Deve ser truncado em 1 linha.
Obrigatório: Este campo é obrigatório. Se não houver nome da música, o card não deve ser renderizado.
4. Artist name
O nome do artista.
Regra de Conteúdo: Deve ser truncado em 1 linha.
Obrigatório: Este campo é obrigatório. Se não houver nome do artista, o card não deve ser renderizado.
5. Meaning text
Uma prévia do texto de significado.
Regra de Conteúdo: Deve ser truncado após 5 linhas de exibição. (Textos de significado sempre terão conteúdo suficiente para aplicar esta regra).
Obrigatório: Este campo é obrigatório. Se não houver texto de significado, o card não deve ser renderizado.
6. Button
Interação: O 'Button' é sempre visível e serve como um auxílio visual para indicar que o card é clicável, mas a ação de clique principal está no card.
Conteúdo (Label): O texto (label) do botão é sempre "Ler tudo".
Variantes
Elevated
Use esta variante em Landing Pages ou áreas onde um apelo visual mais destacado é necessário.
Outlined
Use esta variante nos demais locais de recomendação de conteúdo padrão.
Posicionamento
O espaçamento (margin) deste componente é contextual e deve seguir as regras do grid do layout onde for aplicado.
Layout responsivo
O comportamento responsivo deste componente é contextual ao layout onde ele é aplicado (ex: número de colunas no grid ou itens visíveis no carrossel).
Histórico de Atualizações
Atualizado