Utilização de tipografia

O Web Framework permite a criação de elementos HTML que utilizem a tipografia padrão do sistema.
Para isso é necessário atribuir à classe CSS do elemento uma ou mais classes de tipografia disponibilizadas.

Estão disponíveis as seguintes classes:

  • wfd-text: representa um texto
  • wfd-text–small: modifica o texto reduzindo o tamanho
  • wfd-text–large: modifica o texto aumentando o tamanho
  • wfd-label: representa um rótulo, um texto com peso 500
  • wfd-label–small: modifica o rótulo reduzindo o tamanho
  • wfd-label–large: modifica o rótulo aumentando o tamanho
  • wfd-link: representa um texto que possui o mesmo estilo que um link do sistema
  • wfd-link–small: modifica o link, reduzindo o tamanho
  • wfd-link–large: modifica o link, aumentando o tamanho
  • wfd-icon: permite utiliza a tipografia de ícones

Classes modificadoras (small e large) devem ser utilizadas sempre em conjunto com sua classe base.
O resultado visual de cada uma dessas classes pode ser visualizado em “Menu > Desenvolvimento > Web Framework > Componentes > Tipografia”.

Exemplo de uso

Parágrafo HTML simulando um rótulo com tamanho pequeno:

<p class="wfd-label wfd-label--small">Exemplo de rótulo pequeno</p>