Content Container

1import { ContentContainer } from "passport-ui";

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