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 ficam separados visualmente do conteúdo ao redor.


Composição

Se um banner puder ser dispensado, o host vai renderizar automaticamente o último item na lista de elementos finais como um botão de ícone de fechamento padronizado.

hero

1. Imagem principal

2. Texto principal

3. Texto secundário (opcional)

4. Elemento final (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

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

DEVE

Aplique 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.

DEVE

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