Ordem de foco em banner superior
O design da sua página pode exigir que sejam posicionadas duas listas, uma em cada lado da página. Essa abordagem usa as propriedades flex para distribuir as listas com base no espaço entre elas.
Uma vantagem dessa estilização é a extensibilidade: se precisar de uma lista no meio, basta colocar mais uma lista que o CSS faz o resto! E caso a tela seja muito estreita para caber todos os elementos, essa abordagem tende a falhar graciosamente.
- item esquerda.1
- item esquerda.1
- item direita.1
- item direita.2
Navegação
Breadcrumbs
Explica o breadcrumbs
Exemplo de breadcrumbs:
Links: Imagem e texto
Imagem seguida de texto
Exemplos:
Acesse o Portal da USP!
Acesse o Portal da USP!
Caso muitos links estejam próximos e levem ao mesmo lugar, é possível utilizar o atributo aria-label no elemento a ou utilizar de texto oculto para que o texto seja anunciado apenas para leitores de tela.
Missão
Visão
Valores
Missão, visão e valores
Links: Forçar quebra de linha
É possível forçar uma quebra de linha utilizando o elemento br dentro do texto. Isso evita ter que criar vários elementos de texto apenas para ficarem adjacentes
Governança
Links: Indicar mudança de contexto
A seguir há exemplo de uso do atributo title para indicar mudança de contexto em links.
Atenção: apesar de ser visível ao sobrepor o link com o cursor, e ser anunciado para leitores de tela, o title só é visível em dispositivo móvel ao tocar e segurar o link, o que não é muito intuitivo
Acordeões
É possível fazer acordeões com elementos HTML nativos, usando details e summary
Atualidades
Aqui vai um conteúdo bem legal de atualidades
Ciências
Aqui vai um conteúdo bem legal de ciências
Acordeões exclusivos
Para que dois ou mais elementos details não possam ser abertos simultaneamente, basta usar o mesmo valor do atributo name para todos eles.
Atualidades
Só dá pra ver atualidades, sem ciências
Ciências
Só dá pra ver ciências, sem atualidades