Layout
Structural primitives for page layout: Flex, Grid, Container, Stack, and Box.
Container
Constrains content to a max-width, horizontally centered.
Container (sm)
<div class="kds-container kds-container--sm">
<!-- Content -->
</div>
Flex
Flexbox layout with modifiers for direction, wrapping, and alignment.
Left
Right
<div class="kds-flex kds-justify-between kds-items-center
kds-gap-4">
<div>Left</div>
<div>Right</div>
</div>
Grid
CSS Grid with template column/row presets.
1
2
3
<div class="kds-grid kds-grid--cols-3 kds-gap-4">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Stack
Vertical stack with uniform spacing.
Item 1
Item 2
Item 3
<div class="kds-stack kds-stack--gap-4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>