Version: 1.0.0

Containers

A container limits content to a maximum width. Containers are most often used to hold grid rows, columns and components. Containers are the most basic layout element in Kognifai Design System. They have fluid-width (meaning they strive to be 100% wide all the time). They also add a default padding on the left and right side so we ensures a bit of breathing space between our content and the viewport edges.

While containers can be nested, most layouts do not require a nested container. If you think about your page as a hierarchy of boxes, the container is usually used outside your grid. See grid system for more details.

A bit simplified, it can look like this in HTML:

<div class="kx-container">
    <div class="kx-row">
        <div class="kx-col">
            <div>Component</div>
        </div>
        <div class="kx-col">
            <div>Component</div>
        </div>
        <div class="kx-col">
            <div>Component</div>
        </div>
    </div>
</div>

Container Width

To understand the maximum width of containers, we need to be aware of the box sizing it uses. In CSS we usually define box-sizing with either:

content-box: It’s the default box-sizing, and gives you the default CSS box-sizing behaviour. If you set an element’s width to 100px, then the element’s content box will be 100 px wide, and the width of any border or padding will be added to the final rendered width.
border-box: It tells the browser to account for any borders and padding in the value your specify for width and height. If you set at element’s width to 100 px, that 100 px will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it easier to size elements.

A kx-container always uses content-box as it’s box sizing. This way we can easily adjust the outside padding of a container without affecting it’s maximum width.

To calculate the total width we can use this table:

Modifier	max-width	padding-left	content	padding-right	total
`kx-container--mob-s`	62.5rem	12px	296px	12px	320px
`kx-container--mob-m`	21.9375rem	12px	351px	12px	375px
`kx-container--tab-s`	36rem	12px	576px	12px	600px
`kx-container--tab-m`	46.5rem	12px	744px	12px	768px
`kx-container--tab-l`	62.5rem	12px	1000px	12px	1024px
`kx-container--ltp-s`	78.5rem	12px	1256px	12px	1280px
`kx-container--ltp-m`	88.5rem	12px	1416px	12px	1440px
`kx-container--dtp`	118.5rem	12px	1896px	12px	1920px

The class-names used to control max-width are modifiers, so they should always be used together with the base-class kx-container. Modifiers for container widths corresponds to out responsive breakpoints.

<div class="kx-container kx-container--tab-l">
    <!-- Container will stretch but never become wider than "large tablet" -->
</div>

Container Alignment

Use spacing utilities to align the container left, center or right.

kx-mr--auto (aligns container to the left)
kx-mx--auto (aligns container to the center)
kx-ml--auto (aligns container to the right)

<div class="kx-container kx-container--tab-m kx-mr--auto">
    <!-- Container will stretch but never become wider than "medium tablet" -->
</div>

Container tab-m + left alignment

<div class="kx-container kx-container--tab-m kx-mx--auto">
    <!-- Container will stretch but never become wider than "medium tablet" -->
</div>

Container tab-m + center alignment

<div class="kx-container kx-container--tab-m kx-ml--auto">
    <!-- Container will stretch but never become wider than "medium tablet" -->
</div>

Container tab-m + right alignment

To test how containers look in a page, please have a look at the template layout. Try also to open it as a standalone page and resize your browser.

Container Width​

Container Alignment​

Container Width

Container Alignment