Container

A layout component that constrains content width and centers it horizontally with responsive padding. Essential for creating consistent page layouts.

Anatomy

<script>
  import { Container } from "@saas-ui/svelte/layout/container";
</script>

<Container maxW="4xl">
  <p>Content constrained to max width</p>
</Container>

Examples

Basic Accessibility

Basic container with default maximum width and responsive horizontal padding.

<Container>
	<DecorativeBox class="px-2">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	</DecorativeBox>
</Container>

Fluid Accessibility

Set fluid to true to make the container span the full width of its parent without a maximum width constraint.

<Container fluid>
	<DecorativeBox class="px-2">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	</DecorativeBox>
</Container>

Sizes Accessibility

Use the maxW prop to set different maximum widths: sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl.

<VStack gap={4}>
	{#each sampleSizes as size}
		<div>
			<Text weight="medium" class="mb-1 block text-center"
				>{size}</Text>
			<Container maxW={size}>
				<DecorativeBox class="px-2">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				</DecorativeBox>
			</Container>
		</div>
	{/each}
</VStack>

Props

Prop	Type	Default	Description
`maxW`	`sm \| md \| lg \| xl \| 2xl \| 3xl \| 4xl \| 5xl \| 6xl \| 7xl \| 8xl \| full`	`8xl`	The maximum width of the container.
`fluid`	`boolean`	`false`	Whether the container should be fluid.
`centerContent`	`boolean`	`false`	Whether to center the content.
`children`	`any`	-	The content to be rendered inside the component.
`class`	`text`	-	Additional CSS classes to apply.