Container
Centered layout wrapper with responsive horizontal padding and max-width variants.
Sizes
Narrow (max-w-2xl)
Default (max-w-5xl)
Wide (max-w-7xl)
Full (no max-width)
1{{ partial:components/primitives/container size="narrow" class="bg-secondary/40 py-3 text-center text-sm" }}
2 Narrow (max-w-2xl)
3{{ /partial:components/primitives/container }}
4{{ partial:components/primitives/container size="default" class="bg-secondary/40 py-3 text-center text-sm" }}
5 Default (max-w-5xl)
6{{ /partial:components/primitives/container }}
7{{ partial:components/primitives/container size="wide" class="bg-secondary/40 py-3 text-center text-sm" }}
8 Wide (max-w-7xl)
9{{ /partial:components/primitives/container }}
10{{ partial:components/primitives/container size="full" class="bg-secondary/40 py-3 text-center text-sm" }}
11 Full (no max-width)
12{{ /partial:components/primitives/container }}
{{ partial:components/primitives/container size="narrow" class="bg-secondary/40 py-3 text-center text-sm" }}
Narrow (max-w-2xl)
{{ /partial:components/primitives/container }}
{{ partial:components/primitives/container size="default" class="bg-secondary/40 py-3 text-center text-sm" }}
Default (max-w-5xl)
{{ /partial:components/primitives/container }}
{{ partial:components/primitives/container size="wide" class="bg-secondary/40 py-3 text-center text-sm" }}
Wide (max-w-7xl)
{{ /partial:components/primitives/container }}
{{ partial:components/primitives/container size="full" class="bg-secondary/40 py-3 text-center text-sm" }}
Full (no max-width)
{{ /partial:components/primitives/container }}
Polymorphism
1{{ partial:components/primitives/container as="section" class="bg-secondary/40 py-3 text-center text-sm" }}
2 Rendered as a section element
3{{ /partial:components/primitives/container }}
{{ partial:components/primitives/container as="section" class="bg-secondary/40 py-3 text-center text-sm" }}
Rendered as a section element
{{ /partial:components/primitives/container }}
Props
| Name | Type | Default | Description |
|---|---|---|---|
size
|
string
|
default
|
Max-width variant: narrow (2xl) | default (5xl) | wide (7xl) | full (none) |
as
|
string
|
div
|
Root HTML element |
class
|
string
|
Additional classes merged via tw_merge (root element only) |
Slots
| Name | Fallback / Default | Description |
|---|---|---|
default
|
Source
1{{#
2 @name Container
3 @desc Centered layout wrapper with responsive horizontal padding and max-width variants.
4 @param size string [default] - Max-width variant: narrow (2xl) | default (5xl) | wide (7xl) | full (none)
5 @param as string [div] - Root HTML element
6 @param class string - Additional classes merged via tw_merge (root element only)
7#}}
8{{# format-ignore-start #}}
9{{ _el = as ?? 'div' }}
10{{ _sizes = [
11 'narrow' => 'max-w-2xl',
12 'default' => 'max-w-5xl',
13 'wide' => 'max-w-7xl',
14 'full' => 'max-w-none',
15] }}
16{{ _class_size = _sizes[size] ?? _sizes['default'] }}
17{{# format-ignore-end #}}
18{{ _class = 'mx-auto w-full px-4 sm:px-6 lg:px-8 {_class_size} {class}'
19 | tw_merge }}
20<{{ _el }} class="{{ _class }}">
21 {{ slot }}
22</{{ _el }}>
{{#
@name Container
@desc Centered layout wrapper with responsive horizontal padding and max-width variants.
@param size string [default] - Max-width variant: narrow (2xl) | default (5xl) | wide (7xl) | full (none)
@param as string [div] - Root HTML element
@param class string - Additional classes merged via tw_merge (root element only)
#}}
{{# format-ignore-start #}}
{{ _el = as ?? 'div' }}
{{ _sizes = [
'narrow' => 'max-w-2xl',
'default' => 'max-w-5xl',
'wide' => 'max-w-7xl',
'full' => 'max-w-none',
] }}
{{ _class_size = _sizes[size] ?? _sizes['default'] }}
{{# format-ignore-end #}}
{{ _class = 'mx-auto w-full px-4 sm:px-6 lg:px-8 {_class_size} {class}'
| tw_merge }}
<{{ _el }} class="{{ _class }}">
{{ slot }}
</{{ _el }}>
Dependencies
Packages
1composer require marcorieser/tailwind-merge-statamic
composer require marcorieser/tailwind-merge-statamic