Utilitários do Padrão Digital de Governo

Cores

  • bg-main-primary
  • bg-main-secondary
  • bg-contrast-primary
  • bg-contrast-secondary
  • bg-interactive-main
  • bg-interactive-contrast
  • bg-cta-main
  • bg-cta-contrast
  • bg-error
  • bg-alert
  • bg-success
  • border-color-primary
  • border-color-secondary
  • border-color-interactive-main
  • border-color-interactive-contrast
  • border-color-cta-main
  • border-color-cta-contrast
  • border-color-error
  • border-color-alert
  • border-color-success
  • texto color-main-primary
  • texto color-main-secondary
  • texto color-contrast-primary
  • texto color-contrast-secondary
  • texto color-interactive-main
  • texto color-interactive-contrast
  • texto color-cta-main
  • texto color-cta-contrast
  • texto color-error
  • texto color-alert
  • texto color-success

Tema

Principal primário

Texto sem definição de cor.

Texto principal secundário.

Link externo de exemplo

exemplo de código

Coluna 1 Coluna 2 Coluna 3
Coluna 1 Coluna 2 Coluna 3
Coluna 1 Coluna 2 Coluna 3

Contraste primário

Texto sem definição de cor.

Texto principal secundário.

Link externo de exemplo

exemplo de código

Coluna 1 Coluna 2 Coluna 3
Coluna 1 Coluna 2 Coluna 3
Coluna 1 Coluna 2 Coluna 3

Principal secundário

Texto sem definição de cor.

Texto principal secundário.

Link externo de exemplo

Contraste secundário

Texto sem definição de cor.

Texto principal secundário.

Link externo de exemplo

Erro

Texto sem definição de cor.

Texto principal secundário.

Link externo de exemplo

Alerta

Texto sem definição de cor.

Texto principal secundário.

Link externo de exemplo

Sucesso

Texto sem definição de cor.

Texto principal secundário.

Link externo de exemplo

Borda

  • border
  • border-dashed
  • border-dotted
  • border-sm
  • border-dashed-sm
  • border-dotted-sm
  • border-md
  • border-dashed-md
  • border-dotted-md
  • border-lg
  • border-dashed-lg
  • border-dotted-lg

Tamanho de fonte

  • Texto text-up-1
  • Texto text-up-2
  • Texto text-up-3
  • Texto text-up-4
  • Texto text-up-5
  • Texto text-up-6
  • Texto text-up-7
  • Texto text-up-8
  • Texto text-base
  • Texto text-down-1
  • Texto text-down-2
  • Texto text-down-3
  • Texto text-down-4

Peso de fonte

  • Texto text-weight-thin
  • Texto text-weight-extra-light
  • Texto text-weight-light
  • Texto text-weight-regular
  • Texto text-weight-medium
  • Texto text-weight-semi-bold
  • Texto text-weight-bold
  • Texto text-weight-extra-bold
  • Texto text-weight-black

Camada e sombra

  • Texto level-0
  • Texto level-1
  • Texto level-2
  • Texto level-3
  • Texto level-4

Arredondamento

  • rounder-sm
  • rounder-md
  • rounder-lg
  • rounder-full

Margin

  • Texto m-0
  • Texto m-1
  • Texto m-2
  • Texto m-3
  • Texto m-4
  • Texto m-5
  • Texto m-6
  • Texto m-7
  • Texto m-8
  • Texto m-9
  • Texto m-10

Padding

  • Texto p-0
  • Texto p-1
  • Texto p-2
  • Texto p-3
  • Texto p-4
  • Texto p-5
  • Texto p-6
  • Texto p-7
  • Texto p-8
  • Texto p-9
  • Texto p-10

Gap

  • gap-1
  • gap-2
  • gap-3
  • gap-4
  • gap-5
  • gap-6
  • gap-7
  • gap-8
  • gap-9
  • gap-10

Opacidade

  • opacity-none
  • opacity-10
  • opacity-20
  • opacity-30
  • opacity-40
  • opacity-50
  • opacity-60
  • opacity-70
  • opacity-80
  • opacity-90
  • opacity-full