Utilitário

Max Width

Limita a largura máxima de um elemento usando a escala do design system.

Classes

Classe CSS	Descrição
`.max-width-3xs`	`max-width: var(--max-width-3xs);`
`.max-width-2xs`	`max-width: var(--max-width-2xs);`
`.max-width-xs`	`max-width: var(--max-width-xs);`
`.max-width-sm`	`max-width: var(--max-width-sm);`
`.max-width-md`	`max-width: var(--max-width-md);`
`.max-width-lg`	`max-width: var(--max-width-lg);`
`.max-width-xl`	`max-width: var(--max-width-xl);`
`.max-width-100%`	`max-width: 100%;`
`.max-width-none`	`max-width: none;`

Responsivo

Para mirar um breakpoint, adicione o sufixo @{breakpoint} — por exemplo, .max-width-sm@md.

Max-width adaptativo

Para definir max-width igual à largura do breakpoint atual, use .max-width-adaptive-{breakpoint} (ex.: .max-width-adaptive-md):

<div class="container max-width-adaptive-md">
  <!-- ... -->
</div>

Container

A classe .container centraliza o conteúdo horizontalmente subtraindo a variável --container-margin-x em ambos os lados da largura do elemento. É frequentemente combinada com as classes de max-width:

<div class="container max-width-sm">
  <!-- ... -->
</div>