Container
The container component is an alternative for the Tailwind `.container` class.
The container component is an alternative for the Tailwind .container. While the Tailwind class jumps from a max-width to max-width, this container component is fluid and scales down with the width of your browser. This container is automatically centered, and therefor mostly used usable on the blog and homepage, but also in pages such as the application login (centered box).
Usage
By default, the container takes the maximum width of max-w-8xl (1440px).
Inner content component, with an automatic max-width of max-w-8xl
<section className="c-container">
<div>Inner content component, with an automatic max-width of max-w-8xl</div>
</section>Limit the container width
On the homepage we often have more narrow containers, such as headlines or smaller features grids. In that case, you want to have a smaller max-width on the container:
Inner content component, with a smaller max-width of max-w-6xl
<section className="c-container max-w-6xl">
<div>Inner content component, with a smaller max-width of max-w-6xl</div>
</section>Implementation
| Type | Name |
|---|---|
| Elements | |
| Default | c-container |
| Modifiers | |
| Max width | max-w-7xl, max-w-5xl, max-w-none |