Tipografia e texto: alinhamento, quebra de linha, peso, transformação, cor e pequenos utilitários de acessibilidade.
| Classe |
O que faz |
.text-left |
text-align: left |
.text-center |
text-align: center |
.text-right |
text-align: right |
.text-justify |
text-align: justify — estica as linhas para ocupar toda a largura, alinhando as duas bordas |
Todas com variante responsiva: .text-{breakpoint}-left, .text-{breakpoint}-center, .text-{breakpoint}-right.
| Classe |
O que faz |
.text-wrap |
white-space: normal — quebra linha normalmente |
.text-nowrap |
white-space: nowrap — impede quebra de linha (texto continua numa linha só, pode transbordar) |
.text-break |
word-break: break-word; overflow-wrap: break-word — quebra palavras longas sem espaço para caber no container |
.text-ellipsis |
Trunca o texto em uma linha com reticências (...); combina overflow: hidden + text-overflow: ellipsis + white-space: nowrap. Requer que o elemento tenha uma largura definida |
| Classe |
font-weight |
.font-light (ou .font--light) |
--mds-font-weight-light |
.font-normal (ou .font--normal) |
--mds-font-weight-normal |
.font-semibold (ou .font--semibold) |
--mds-font-weight-semibold |
.font-bold (ou .font--bold) |
--mds-font-weight-bold |
| Classe |
text-transform |
.text-lowercase |
lowercase |
.text-uppercase |
uppercase |
.text-capitalize |
capitalize |
Cores semânticas — preferidas na maioria dos casos, pois seguem o tema (claro/escuro) automaticamente:
| Classe |
Cor |
.text-primary |
--mds-colors-primary-main |
.text-secondary |
--mds-colors-foreground-dark |
.text-body |
--mds-colors-foreground-main |
.text-muted |
--mds-colors-foreground-light |
.text-interactive |
--mds-colors-ui-interactive-text (cor de links/ações) |
.text-success (alias .text-green) |
--mds-colors-success-dark |
.text-danger (alias .text-red) |
--mds-colors-danger-main |
.text-warning (alias .text-yellow) |
--mds-colors-warning-dark |
.text-info (alias .text-blue) |
--mds-colors-info-main |
.text-accent (alias .text-orange) |
--mds-colors-palettes-orange-main |
Cores de paleta (uso pontual, fora do vocabulário semântico):
| Classe |
Cor |
.text-brand |
--mds-colors-palettes-brand-main |
.text-teal |
--mds-colors-palettes-teal-main |
.text-aqua |
--mds-colors-palettes-aqua-main |
.text-pink |
--mds-colors-palettes-pink-main |
.text-gray |
--mds-colors-palettes-gray-main |
.text-white |
--mds-dimmed-default |
.text-white-50 |
--mds-dimmed-default a 50% de opacidade |
.text-black-50 |
Preto a 50% de opacidade |
| Classe |
O que faz |
.text-gradient |
Aplica um gradiente de texto (secondary → primary) via background-clip: text |
| Classe |
O que faz |
.text-decoration-none |
Remove sublinhado (text-decoration: none) — comum em links estilizados como botão |
.text-reset |
Volta a cor do texto para inherit, cancelando uma cor herdada |
.text-hide |
Esconde visualmente o texto mantendo-o presente no DOM (técnica de image-replacement: font: 0/0, color: transparent, text-shadow: none) |
.no-select |
Impede seleção de texto pelo usuário (user-select: none, com prefixos de compatibilidade) |
A maioria dos utilitários abaixo aceita um infixo de breakpoint no meio do nome da classe: .{prefixo}-{breakpoint}-{valor} (ex.: .d-md-none, .text-lg-center, .gap-xl--lg). O breakpoint funciona mobile-first: a classe vale a partir da largura mínima indicada até o próximo breakpoint.
| Breakpoint |
Infixo |
Largura mínima |
| Extra small |
(nenhum, classe base) |
0 |
| Small |
sm |
576px |
| Medium |
md |
768px |
| Large |
lg |
992px |
| Extra large |
xl |
1200px |
| Extra extra extra large |
xxxl |
1920px |