Capítulo 04
Componentes
Esta página é construída com os componentes que documenta. Não há imagens de exemplo: o que vê é o código a correr, e é copiável tal como está de ds.css.
Botões
.vu-btnA pílula vem do site atual e fica: é a forma que a marca já tem. Altura mínima de 48px, sempre acima dos 44px que um dedo precisa. Um botão primário por ecrã, e é sempre o que leva ao orçamento.
Assim
«Peça o seu orçamento», «Marcar avaliação», «Falar connosco». Verbo primeiro, e diz o que acontece a seguir.
Nunca
«Clique aqui», «Submeter», «Enviar». Dois botões âmbar lado a lado: se tudo é a ação principal, nada é.
Cartão de serviço
.vu-cartaoNumerado, porque os serviços da Visual Up são quatro e é útil que se percebam como um conjunto fechado. A corda acende no lado esquerdo quando o cartão é o foco, com o rato ou com o teclado.
Estatística
.vu-estatO filete âmbar por cima é a assinatura do bloco. O número é sempre real e sempre verificável: se não houver fonte, o número não entra.
5000+
Projetos concluídos
24h
Resposta ao orçamento
40%
Abaixo do andaime
2018
Desde
Testemunho
.vu-testemunhoNome e função sempre. Um testemunho sem nome não é prova, é decoração, e num setor onde se decide por confiança isso conta contra.
Ficámos impressionados com a rapidez e a qualidade do acabamento. Sem andaimes, sem confusão, exatamente o que precisávamos.
Formulário de orçamento
.vu-campoO formulário é o produto: é onde os 24 horas começam a contar. Rótulo sempre visível, nunca só o marcador de posição, e o erro explica o que fazer em vez de dizer que está errado.
Distintivo
.vu-distintivoPara estado, não para enfeite. A versão âmbar é a única coisa da página que pode competir com o botão primário, por isso aparece uma vez só.
Tabela
.vu-tabelaCabeçalho na fonte técnica, alinhamento à esquerda, e a tabela rola dentro da sua própria caixa. A página nunca rola de lado por causa de uma tabela.
| Fator | Acesso por cordas | Andaime |
|---|---|---|
| Montagem | Nenhuma | 2 a 5 dias |
| Licença de ocupação de via | Não | Sim, quase sempre |
| Custo relativo | Referência | Até 40% acima |
| Acesso a zonas estreitas | Sim | Limitado |
A linha
.vu-ancoraNão é um componente, é o tecido conjuntivo. Marca o início de uma secção, prende uma citação, numera um cartão. Sempre vertical, sempre 2px, sempre âmbar.
Um título ancorado
Um parágrafo que a linha segura pelo lado, do princípio ao fim, com a mesma medida do título acima.