Default

Basic main container.

This is the typical usage of mainContainer in coordination with the content component. In this example, there is a blank navigator next to the mainContainer to showcase the typical spacing.

See the `c-content` examples for the different inner content layouts available.

HTML

<p>This is the typical usage of mainContainer in coordination with the content component. In this example, there is a blank navigator next to the mainContainer to showcase the typical spacing.</p>
<div class="t-content" style="height: 500px; width: 500px; position: relative;">
    <div class="c-mainContainer">
        <inv-care-navigator></inv-care-navigator>
        <div class="c-content c-content--flexible c-mainContainer-content">
            <div class="c-content-container">
                <div class="c-content-innerContainer c-dontJustCopyPaste c-content-containHeight">
                    <p>See the `c-content` examples for the different inner content layouts available.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Guttered

Main container with a max-width gutter.

This example has the gutter element, which centers the inner content within a maximum width. After hitting the maximum width, the mainContainer content area will stay centered within the mainContainer area. In this example, there is a blank navigator next to the mainContainer to showcase the typical spacing and usage. You'll notice that the guttered space is beginning to expand in this example, as the content area has hit the maximum width.

See the `c-content` examples for the different inner content layouts available.

HTML

<p>This example has the gutter element, which centers the inner content within a maximum width. After hitting the maximum width, the mainContainer content area will stay centered within the mainContainer area. In this example, there is a blank navigator next to the mainContainer to showcase the typical spacing and usage. You'll notice that the guttered space is beginning to expand in this example, as the content area has hit the maximum width.</p>
<div class="t-content" style="height: 500px; width: 1800px; position: relative;">
    <div class="c-mainContainer">
        <inv-care-navigator></inv-care-navigator>
        <div class="c-content c-content--flexible c-mainContainer-content">
            <div class="c-content-container c-mainContainer-gutter">
                <div class="c-content-innerContainer c-dontJustCopyPaste c-content-containHeight">
                    <p>See the `c-content` examples for the different inner content layouts available.</p>
                </div>
            </div>
        </div>
    </div>
</div>