Saltar para o conteúdo
← Capítulos 04 / 09 · Componentes

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-btn

A 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-cartao

Numerado, 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-estat

O 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-testemunho

Nome 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.
Manuel Ferreira · Administrador de condomínio

Formulário de orçamento

.vu-campo

O 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-distintivo

Para 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ó.

Acesso por cordas Lisboa Resposta em 24h

Tabela

.vu-tabela

Cabeç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.

Comparação entre acesso por cordas e andaime
FatorAcesso por cordasAndaime
MontagemNenhuma2 a 5 dias
Licença de ocupação de viaNãoSim, quase sempre
Custo relativoReferênciaAté 40% acima
Acesso a zonas estreitasSimLimitado

A linha

.vu-ancora

Nã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.