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 ser facilmente visualizado 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

MUST

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

SHOULD

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.

SHOULD

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