The <dsgn-container> component centers a block of content and constrains it to a
maximum width. Use it to keep page content readable and to apply consistent
horizontal and vertical padding around a section.
Usage
<dsgn-container size="lg">
<p>Constrained content.</p>
</dsgn-container>Import the component module in your application entrypoint:
import '@ds-gn/ui/container';Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' |
'lg' |
Maximum width of the container. |
| padding-x | 'none' | 'sm' | 'md' | 'lg' | 'xl' |
'md' |
Horizontal padding (padding-inline). |
| padding-y | 'none' | 'sm' | 'md' | 'lg' | 'xl' |
'none' |
Vertical padding (padding-block). |
padding-x and padding-y are the attribute names; the matching JavaScript
properties are paddingX and paddingY.
Container has no surface prop — it paints no background of its own, so it
inherits the theme of whatever wraps it.
Slots
| Slot | Description |
|---|---|
| (default) | Constrained page content. |
Examples
Sizes
<dsgn-container size="sm">Small container</dsgn-container>
<dsgn-container size="md">Medium container</dsgn-container>
<dsgn-container size="lg">Large container</dsgn-container>
<dsgn-container size="xl">Extra-large container</dsgn-container>
<dsgn-container size="2xl">Widest constrained container</dsgn-container>
<dsgn-container size="full">Full-width container</dsgn-container>Section padding
<dsgn-container size="2xl" padding-x="lg" padding-y="xl">
<p>A page section with its own vertical rhythm.</p>
</dsgn-container>Setting padding from JavaScript
const container = document.querySelector('dsgn-container');
container.paddingX = 'lg';
container.paddingY = 'md';Usage patterns
size="2xl"matches the width<dsgn-hero>and<dsgn-footer>use internally, so a section wrapped in it lines up with them.- Leave
padding-yatnonewhen the container is nested inside another component that already owns vertical spacing.