Container

Centered max-width container with responsive padding. Use to constrain content width and provide consistent horizontal spacing.

Installation

import { Container } from '@happyvertical/smrt-svelte';

Basic Usage

The default container with lg max-width (1024px).

<Container>
  <p>Content inside a centered container</p>
</Container>

Max Width Sizes

Choose from sm (640px), md (768px), lg (1024px), xl (1280px), or full width.

<Container maxWidth="sm">Small - 640px</Container>
<Container maxWidth="md">Medium - 768px</Container>
<Container maxWidth="lg">Large - 1024px (default)</Container>
<Container maxWidth="xl">Extra Large - 1280px</Container>
<Container maxWidth="full">Full Width</Container>

Common Patterns

Use Container to wrap page content for consistent layout.

<script>
  import { Container, Header, Footer } from '@happyvertical/smrt-svelte';
</script>

<Header />

<main>
  <Container>
    <h1>Page Title</h1>
    <p>Page content...</p>
  </Container>
</main>

<Footer />

Props

TypeScript

import { Container } from '@happyvertical/smrt-svelte';

type MaxWidth = 'sm' | 'md' | 'lg' | 'xl' | 'full';

interface Props {
  maxWidth?: MaxWidth;
  children?: Snippet;
}

Responsive Behavior

Container automatically adjusts padding on smaller screens. On mobile, padding is reduced while maintaining centered content.