Kern Component Library GitHub

Container

Centered layout wrapper with max-width variants.

Examples

Default preview

narrow — max-w-2xl
default — max-w-5xl
wide — max-w-7xl
full — max-width disabled

Rendered as <section> with merged custom classes.

<div class="space-y-4">

    {{ partial:components/primitives/container size="narrow" }}

        <div class="bg-secondary/60 text-secondary-foreground rounded-default border border-border px-4 py-3 text-sm">

            narrow — max-w-2xl

        </div>

    {{ /partial:components/primitives/container }}



    {{ partial:components/primitives/container size="default" }}

        <div class="bg-secondary/60 text-secondary-foreground rounded-default border border-border px-4 py-3 text-sm">

            default — max-w-5xl

        </div>

    {{ /partial:components/primitives/container }}



    {{ partial:components/primitives/container size="wide" }}

        <div class="bg-secondary/60 text-secondary-foreground rounded-default border border-border px-4 py-3 text-sm">

            wide — max-w-7xl

        </div>

    {{ /partial:components/primitives/container }}



    {{ partial:components/primitives/container size="full" }}

        <div class="bg-secondary/60 text-secondary-foreground rounded-default border border-border px-4 py-3 text-sm">

            full — max-width disabled

        </div>

    {{ /partial:components/primitives/container }}



    {{ partial:components/primitives/container size="narrow" as="section" class="border-border border border-dashed py-2" }}

        <p class="text-muted-foreground text-sm">Rendered as &lt;section&gt; with merged custom classes.</p>

    {{ /partial:components/primitives/container }}

</div>

Props

Name Type Default Description
size string default Container width: narrow|default|wide|full
as string div Root HTML element
class string Additional classes merged via tw_merge (root element only)

Source

{{#

    @name Container

    @desc Centered layout wrapper with max-width variants.

    @param size string [default] - Container width: narrow|default|wide|full

    @param as string [div] - Root HTML element

    @param class string - Additional classes merged via tw_merge (root element only)

#}}

{{ _element = as ?? 'div' }}

{{ _size_key = size ?? 'default' }}

{{ _sizes = ['narrow' => 'max-w-2xl', 'default' => 'max-w-5xl', 'wide' => 'max-w-7xl', 'full' => 'max-w-none', ] }}

{{ _size_class = _sizes[_size_key] ?? _sizes['default'] }}

{{ _classes = 'mx-auto w-full px-4 sm:px-6 lg:px-8 {_size_class} {class}'

 | tw_merge }}

<{{ _element }} class="{{ _classes }}">

    {{ slot }}

</{{ _element }}>

Dependencies

Packages

marcorieser/tailwind-merge-statamic

composer require marcorieser/tailwind-merge-statamic