Skip to main contentSkip to sidebarSkip to headerSkip to footer

Content Container

A layout container for centering and constraining content width.

Installation

Import the component from the passport-ui package.

components/example.tsx
1
import { ContentContainer } from "passport-ui";

Usage

Basic example showing how to use the component.

components/example.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<ContentContainer variant="broad">
  <div className="section-container">
    <div className="meta-container">
      <h1>Page Title</h1>
      <p>Page description or subtitle goes here.</p>
    </div>
 
    <div className="list-container">
      <div className="meta-container">
        <h2>Section Title</h2>
        <p>Section content and information.</p>
      </div>
 
      <div className="grid gap-4 md:grid-cols-2">
        <Card>
          <CardContent>
            <h3>Card 1</h3>
            <p>Card content here</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent>
            <h3>Card 2</h3>
            <p>Card content here</p>
          </CardContent>
        </Card>
      </div>
    </div>
  </div>
</ContentContainer>
 
{/* Different width variants */}
<ContentContainer variant="compact">
  <p>Compact width content</p>
</ContentContainer>
 
<ContentContainer variant="relaxed">
  <p>Relaxed width content</p>
</ContentContainer>
 
<ContentContainer variant="full">
  <p>Full width content</p>
</ContentContainer>

Additional resources

Documentation and examples are available in Storybook.

View in Storybook ↗