Layout & Espaçamento

Visão ao vivo

Storybook mds-styles (HTML/CSS) — foundations-spacing ↗

Storybook mds-styles (HTML/CSS) — foundations-grid ↗

Base: grid inspirado em Bootstrap (.container, .container-fluid, .row, .col-[n], breakpoints xs/sm/md/lg/xl/xxl), sem prefixo mds- (é fundação, não componente).

Densidade: média-alta — o produto prioriza mostrar mais dado por tela (tabelas, kanbans, cards compactos) mantendo respiro suficiente para uso prolongado.

Escala de espaçamento (--mds-spacing-*)

Token	px
xs	4
sm	8
md	16
lg	24
xl	32
xxl	40
xxxl	48

md (16px) é o padrão quando nenhum tamanho é especificado.

Classes utilitárias (verificadas no código, não deduzidas)

.padding-{pos}--{tam}   /* ex.: .padding-all--md, .padding-bottom--lg */
.margin-{pos}--{tam}    /* ex.: .margin-top--sm, .margin-horizontal--xl */
.gap--{tam}             /* dentro de .d-flex: .gap--xs … .gap--xxl */

{pos} = top|right|bottom|left|all|vertical|horizontal (abreviações t|r|b|l|a|v|h também existem). {tam} = qualquer token da escala acima. Remover espaçamento: .no-padding--all / .no-margin--all (e variações por lado).

Flexbox (padrão dominante dentro dos próprios componentes)

.d-flex, .flex-column, .flex-wrap, .flex-grow-1, .align-items-center, .justify-content-between + .gap--* acima. Regra prática: monte o interior de um componente com d-flex + gap--*; reserve .container/.row/.col-* para a estrutura macro da página.

---