Back to the list

Container

Containers are required for the main part of your website. Three sizes are available: 600px (default), 400px for forms and 800px for large pages. It is also possible to add an <aside>.

File to include

@import "components/container";

Default main

Demo here

<div class="wrapper">
    <main class="main">
        Content
    </main>
</div>

Main large

Demo here

<div class="wrapper">
    <main class="main" data-size="large">
        Content
    </main>
</div>

Main form

Demo here

<div class="wrapper">
    <main class="main" data-size="form">
        Content
    </main>
</div>

Wrapper with aside on the left

Demo here

<div class="wrapper" data-template="2cols">
    <aside class="aside" data-position="1">
        Content
    </aside>

    <main class="main" data-position="2">
        Content
    </main>
</div>

Wrapper with aside on the right

Demo here

<div class="wrapper" data-template="2cols">
    <main class="main" data-position="1">
        Content
    </main>

    <aside class="aside" data-position="2">
        Content
    </aside>
</div>

Wrapper with aside on both sides

Demo here

<div class="wrapper" data-template="3cols">
    <aside class="aside" data-position="1" data-size="small">
        <h3>Aside</h3>
    </aside>

    <main class="main" data-position="2">
        <h1>Main</h1>
    </main>

    <aside class="aside" data-position="3" data-size="small">
        <h3>Aside</h3>
    </aside>
</div>

Attributes

Name Example value Possible values Default Required
data-template (wrapper) 2cols "1col" | "2cols" | "3cols" 1col No
data-size (main) form "default" | "large" | "form" default No
data-size (aside) small "default" | "small" default No
data-position (main) 2 1 | 2 1 No
data-position (aside) 3 1 | 2 | 3 1 No