Banner

hero

Visão geral

Os banners podem ajudar a mostrar experiências especiais de apps, novos recursos ou mensagens importantes. Embora sejam funcionalmente semelhantes às linhas padrão, os banners adicionam um destaque visual distinto com preenchimentos de plano de fundo personalizáveis e sempre serão separados visualmente do conteúdo ao redor.


Composição

O item de banner foi projetado para alta visibilidade e inclui quatro componentes, dois dos quais são obrigatórios:

  • Imagem ou ícone principal (obrigatório)
  • Texto principal: título e subtítulos (obrigatório)
  • Texto secundário (opcional)
  • Imagem ou ícone à direita (opcional)
hero

1. Imagem principal

2. Texto principal

3. Texto secundário (opcional)

4. Elemento à direita (opcional)


Requisitos de UX

Para garantir uma experiência segura e consistente em todos os apps, siga estes requisitos de design:

Nível de requisito

Conteúdo

OBRIGATÓRIO

Mostrar apenas um banner por seção. Colocar banners em uma seção dedicada que não contenha outros tipos de componentes.

RECOMENDADO

Aplicar preenchimentos de plano de fundo personalizados, cores de destaque de botões e raios de canto distintos para separar os banners das linhas de conteúdo padrão.

RECOMENDADO

Evitar colocar seções de banner diretamente adjacentes umas às outras para preservar o destaque visual.