Container

Centers content horizontally with a configurable maximum width.

Preview · Container

Code

HTML · @primus/ui-core

<div style="width:100%;background:#f4f4f5;padding:1rem;border-radius:8px;border:1px dashed #d4d4d8">
  <div style="max-width:640px;margin:0 auto;background:var(--card);border-radius:6px;padding:1.5rem;border:1px solid var(--border)">
    <p style="text-align:center;color:var(--muted-foreground);font-size:0.875rem;margin:0">
      .container - centred, max-width constrained
    </p>
  </div>
</div>

React

import { Container } from 'primus-react-ui';

<Container maxWidth="lg" padding="md">
  <h1>Page Title</h1>
  <p>Your content here.</p>
</Container>

Angular

<primus-container maxWidth="lg" padding="md">
  <h1>Page Title</h1>
</primus-container>

Props

Prop	Type	Default	Description
maxWidth	sm | md | lg | xl | full	lg	Maximum width
padding	none | sm | md | lg	md	Horizontal padding

Version history

See the Changelog for version history and breaking changes.