Biblioteca de Cores variante de cores para componentes UI
- Inicio
- UI GERAL
COLEÇÃO DE CORES UI
Esta é a paleta padronizada de cores dos elementos dos sistemas da COTIN
Para aplicar as classes das cores (Ex: .blue-madison) para portlets,
botões, statistic blocks, tiles e outros containers.
#ffffff
Fundo de botão secundário e
backgrounds de elementos
white
Fonte de Texto
Um texto simples
aqui...
Um texto simples aqui...
Um texto simples aqui...
Um texto simples aqui...
Um texto simples aqui...
Background com cor
Um texto simples
aqui...
Um texto simples aqui...
Um texto simples aqui...
Um texto simples aqui...
Um texto simples aqui...
Icon font
Icone com cor de fundo
Como usar a classe
class="font-white"
Box
com a cor como borda
class="border-white"
Box com a cor como
Background
class="bg-white
bg-font-white"
Button
class="btn white"
Button
class="c-btn-border-1x c-btn-white"
Button
class="btn btn-circle white" #e1e5ec
Hover de botão secundário
Hover de botão secundário
Fonte de Texto
Um texto simples
aqui...
Um texto simples aqui...
Um texto simples aqui...
Um texto simples aqui...
Um texto simples aqui...
Background com cor
Um texto simples
aqui...
Um texto simples aqui...
Um texto simples aqui...
Um texto simples aqui...
Um texto simples aqui...
Icon font
Icone com cor de fundo
Como usar a classe
class="font-default"
Box
com a cor como borda
class="border-default"
Box com a cor como
Background
class="bg-default
bg-font-default"
Button
class="btn default"
Button
class="c-btn-border-1x
c-btn-default"
Button
class="btn btn-circle default"
#337ab7
Botões primários
blue
Fonte de Texto
Um texto simples
aqui...
Um texto simples aqui...
Um texto simples aqui...
Um texto simples aqui...
Um texto simples aqui...
Background com cor
Um texto simples
aqui...
Um texto simples aqui...
Um texto simples aqui...
Um texto simples aqui...
Um texto simples aqui...
Icon font
Icone com cor de fundo
Como usar a classe
class="font-blue"
Box
com a cor como borda
class="border-blue"
Box com a cor como
Background
class="bg-blue
bg-font-blue"
Button
class="btn blue"
Button
class="c-btn-border-1x c-btn-blue"
Button
class="btn btn-circle blue" #32c5d2
Cor para cabeçalhos e acabamentos
de
elementos
green
Fonte de Texto
Um texto simples
aqui...
Um texto simples aqui...
Um texto simples aqui...
Um texto simples aqui...
Um texto simples aqui...
Background com cor
Um texto simples
aqui...
Um texto simples aqui...
Um texto simples aqui...
Um texto simples aqui...
Um texto simples aqui...
Icon font
Icone com cor de fundo
Como usar a classe
class="font-green"
Box
com a cor como borda
class="border-green"
Box com a cor como
Background
class="bg-green
bg-font-green"
Button
class="btn green"
Button
class="c-btn-border-1x c-btn-green"
Button
class="btn btn-circle green"
#004F9F
Cor para cabeçalho e rodapé
principal
green
Fonte de Texto
Um texto simples
aqui...
Um texto simples aqui...
Um texto simples aqui...
Um texto simples aqui...
Um texto simples aqui...
Background com cor
Um texto simples
aqui...
Um texto simples aqui...
Um texto simples aqui...
Um texto simples aqui...
Um texto simples aqui...
Icon font
Icone com cor de fundo
Como usar a classe
class="font-green"
Box
com a cor como borda
class="border-green"
Box com a cor como
Background
class="bg-green
bg-font-green"
Button
class="btn green"
Button
class="c-btn-border-1x c-btn-green"
Button
class="btn btn-circle green"
#edeff1
Cor para background geral da aplicação
green
Fonte de Texto
Um texto simples
aqui...
Um texto simples aqui...
Um texto simples aqui...
Um texto simples aqui...
Um texto simples aqui...
Background com cor
Um texto simples
aqui...
Um texto simples aqui...
Um texto simples aqui...
Um texto simples aqui...
Um texto simples aqui...
Icon font
Icone com cor de fundo
Como usar a classe
class="font-green"
Box
com a cor como borda
class="border-green"
Box com a cor como
Background
class="bg-green
bg-font-green"
Button
class="btn green"
Button
class="c-btn-border-1x c-btn-green"
Button
class="btn btn-circle green" 
