Containers

The .container-* classes center content on the page and restrict it to a maximum width. They all have a width of 86vw, providing a bit of natural padding.

Container Sizes

The examples here include a background color and some padding so that you can see where they start and end more easily.

.container-xs

.container-s

.container or .container-m

.container-l

.container-xl

.container-2xl

<div class="container-xs">
	<code>.container-xs</code>
</div>

<div class="container-s">
	<code>.container-s</code>
</div>

<div class="container-m">
	<code>.container</code> or <code>.container-m</code>
</div>

<div class="container-l">
	<code>.container-l</code>
</div>

<div class="container-xl">
	<code>.container-xl</code>
</div>

<div class="container-2xl">
	<code>.container-2xl</code>
</div>

Class	Max Width
`.container-xs`	`18em`
`.container-s`	`28em`
`.container` `.container-m`	`38em`
`.container-l`	`52em`
`.container-xl`	`60em`
`.container-2xl`	`80em`

You can adjust the max widths by changing the corresponding --breakpoint-* CSS variables in the kelp.theme cascade layer.

@layer kelp.theme {
	:where(:root) {

		--breakpoint-xs: 18em;
		--breakpoint-s: 28em;
		--breakpoint-m: 38em;
		--breakpoint-l: 52em;
		--breakpoint-xl: 60em;
		--breakpoint-2xl: 80em;

	}
}

Breakouts

The .breakout class will keep an element in its current position in the flow order, but “break it out” of the container and make it full-width.

<div class="container">
	<p>Some normally contained content.</p>
	<div class="breakout">
		This spans the full width of the page.
	</div>
</div>