Containers
Containers
Use containers to constrain the maximum width of a block of content and center it within the available space.
| Class | Max Width |
|---|---|
.pv-container-sm |
768px |
.pv-container-md |
972px |
.pv-container-lg |
1448px |
You can override the centering of the container using a custom property.
| Custom Property | Default Value | Description |
|---|---|---|
--margin-inline |
auto | The horizontal margins of the container |
Example
A large container constraining page content.
Container Content
This content is constrained to a maximum width of 1448px and centered within the available space. Resize the browser to see responsive behavior.
HTML
<div class="pv-container-lg">
<p class="pv-text-title-lg">Container Content</p>
<p class="pv-text-body-md">This content is constrained to a maximum width of 1448px and centered within the available space.</p>
</div>Example
Using different container sizes.
.pv-container-sm (max-width: 768px)
.pv-container-md (max-width: 972px)
.pv-container-lg (max-width: 1448px)
HTML
<div class="pv-container-sm">
<p>.pv-container-sm (max-width: 768px)</p>
</div>
<div class="pv-container-md">
<p>.pv-container-md (max-width: 972px)</p>
</div>
<div class="pv-container-lg">
<p>.pv-container-lg (max-width: 1448px)</p>
</div>