Mostruário de módulos
Os 18 módulos que o painel oferece na página de um case, montados
com o mesmo código do site: a marcação vem de partials/modulos.php e o
desenho vem de case.css. Não há uma segunda cópia de nada aqui — é por
isso que esta página não pode divergir do que ela mostra.
A etiqueta preta de cada bloco traz o nome do módulo como ele aparece na lista do
painel e, entre parênteses, a chave que fica gravada no campo. Os dois vêm de
site.json.
O texto é marcação de posição. Nenhum número aqui é real, nenhum prêmio foi ganho e a citação não é de ninguém.
“Uma frase de marcação de posição, no lugar onde ficaria a linha que carrega o case.”
“A abertura do depoimento, em corpo de display: uma frase, ou duas, que é o que a pessoa diria se tivesse uma linha só.
A continuação, em corpo de leitura. É a metade do módulo que a citação não tem, e é ela que deixa a fala longa caber sem virar uma parede de tipografia grande.
Linha em branco separa parágrafo. O retrato é opcional e este exemplo está sem um: sem ele o nome e o cargo ficam sozinhos, na mesma margem do texto.”
Manchete do capítulo, em uma ou duas linhas
Parágrafo de marcação de posição, na medida do corpo de texto do case. O módulo é a espinha da página: título e texto, sem mídia, sem rótulo e sem coluna ao lado.
Um segundo parágrafo, para a medida e o respiro entre eles ficarem visíveis.
A mesma coisa, com o filete e a manchete à esquerda
Aqui o texto corre à direita e a manchete fica presa à esquerda. O traço fino que abre a seção é o mesmo filete de troca de capítulo, e ele é riscado por observador quando entra na tela.
Sentido
O rótulo curto substitui a manchete, e o ícone só entra em sequências de método — as quatro etapas do Marca Inteira®. Com um ícone só, o desenho vira enfeite; com quatro, é o que faz cada etapa ser reconhecida antes de ser lida.
Exemplo do módulo de números
Antes contra depois
Primeira linha
quatro vezes
Segunda linha
quatro vezes
Terceira linha
metade a mais
Indicadores soltos
00%
Indicador que subiu
00 p.p. no período
0,0s
Indicador que caiu
0,0s a menos
000
Indicador sem seta
Exemplo do módulo de duas mídias
Texto de um lado, imagem do outro
O par alterna o lado a cada uso na página. No máximo duas seções seguidas neste arranjo: três alternando lado é a composição que denuncia o molde.
Texto correndo, imagens flutuando
As duas imagens sobem em velocidades diferentes enquanto o texto corre. É profundidade, não passeio: se as duas andassem igual, seria a página escorregando.
No celular elas saem da sobreposição e descem para uma faixa embaixo do texto — descem, não somem.
Faixa de cartões grandes
A faixa avança na horizontal conduzida pela rolagem vertical. Mínimo de cinco cartões: com menos, ela termina antes de a rolagem começar e o efeito não acontece.
Carrossel de fotos
Uma foto por vez, com o começo da próxima à mostra. A legenda mora dentro do pop-up, e não embaixo da foto: serve para conjuntos em que a ordem importa e a foto é o assunto.
Grid de fotos
Mostruário, tudo visível e nada a operar. Em 900px vira duas colunas; em 560, uma. A proporção é um campo — 4:3 aqui, e também 1:1, 3:4, 16:9 ou a de cada arquivo. Ela vale para a grade inteira, porque é o que faz as legendas caírem na mesma linha.
Título do filme
Exemplo do módulo de lista agrupada
Rótulo do grupo
- Primeiro item
- Segundo item
- Terceiro item
Outro grupo
- Um item
- Outro item
Terceiro grupo
- Item
- Item
- Item
- Item
Exemplo do módulo de prêmios
Linha de resumo, opcional.
- Ouro
- Nome do festival Categoria
- Prata
- Outro festival Categoria
- Finalista
- Terceiro
