DEPRECATED - see the content component for a unified single content layout, including sub navigations.

Theme-able Classes

The following classes are theme-able. Width is predetermined by the defaults. Color & style must be provided by the swatch.

• .c-contentArea-masthead - border bottom
• .c-contentArea-content - full border
• .c-contentArea-leftNav - border right
• .c-contentArea-rightNav - border left

Also note that the main content area does not provide any padding assumptions. This allows the content designer to appropriately divide the content area as needed, but also places the burden of adding appropriate padding to align content with the heading.

Default

Content-area often composes with the content component for a inner navigation and panel areas. This can have navigation pieces on the left and right, and creates a visual separation using borders.

HTML

<div class="t-content c-content" style="height: 600px; width: 600px;">
    <div class="c-contentArea c-contentArea--leftNavOnly">
        <div class="c-contentArea-main">
            <div class="c-content-container u-flexKeepHeight">
                <div class="c-masthead c-contentArea-masthead">
                    <div class="c-contentArea-heading c-heading">
                        <div class="c-heading-titleArea">
                            <div class="c-heading-label">Commercial Account</div>
                        </div>
                        <div class="c-heading-buttons">
                            <div class="c-button c-button--concise">
                                <inv-icon glyph="'pop-out'"></inv-icon>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="c-contentArea-content">
                    Main content area
                </div>
            </div>
        </div>
    </div>
</div>

With Filter bar

Content areas can be rendered with a filter bar. In this case, the --borderless modifier should be used on the masthead.

HTML

<div class="t-content c-content" style="height: 600px; width: 600px;">
    <div class="c-contentArea c-contentArea--leftNavOnly">
        <div class="c-contentArea-main">
            <div class="c-content-container u-flexKeepHeight">
                <div class="c-masthead c-contentArea-masthead c-contentArea-masthead--borderless">
                    <div class="c-contentArea-heading c-heading">
                        <div class="c-heading-titleArea">
                            <div class="c-heading-label">Commercial Account</div>
                        </div>
                        <div class="c-heading-buttons">
                            <div class="c-button c-button--concise">
                                <inv-icon glyph="'pop-out'"></inv-icon>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="c-filterBar"></div>
                <div class="c-contentArea-content">
                    Main content area
                </div>
            </div>
        </div>
    </div>
</div>

With Action bar

Content areas can be rendered with an action bar. The location of the action bar, as well as any padding concerns are deferred to the layout of the container.

HTML

<div class="t-content c-content" style="height: 600px; width: 600px;">
    <div class="c-contentArea c-contentArea--leftNavOnly">
        <div class="c-contentArea-main">
            <div class="c-content-container u-flexKeepHeight">
                <div class="c-masthead c-contentArea-masthead">
                    <div class="c-contentArea-heading c-heading">
                        <div class="c-heading-titleArea">
                            <div class="c-heading-label">Commercial Account</div>
                        </div>
                        <div class="c-heading-buttons">
                            <div class="c-button c-button--concise">
                                <inv-icon glyph="'pop-out'"></inv-icon>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="c-contentArea-content">
                    <div class="u-flex u-flexKeepHeight">
                        <div class="u-flexItemGrow">Main content area</div>
                        <div class="c-contentArea-actionBar u-flexEnd u-p+">
                            <div class="c-button">Cancel</div>
                            <div class="c-button c-button--primary">Make Payment</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Left Navigation Only

Content area w/ left navigation bar.

HTML

<div class="t-content c-content" style="height: 600px; width: 800px;" ng-controller="contentAreaExampleController as ContentArea">
    <div class="c-contentArea c-contentArea--leftNavOnly">
        <div class="c-contentArea-leftNav">
            <div class="c-navGroup c-contentArea-navGroup">
                <div class="c-navGroup-title">Jonathan Raimer</div>
                <div class="c-navGroup-navList">
                    <div class="c-navGroup-label">jonathan@notemail.com</div>
                    <div class="c-navGroup-label">(555) 555-5555)</div>
                    <div class="c-navGroup-label">English (United States)</div>
                </div>
            </div>
            <div class="c-contentArea-navGroup">
                <inv-action-nav-group label="Quick Actions" initially-visible="3" nav-items="ContentArea.navItems"></inv-action-nav-group>
            </div>
            <div class="c-contentArea-navGroup c-navGroup">
                <div class="c-navGroup-subtitle">
                    Pages
                </div>
                <div class="c-contentArea-routeList c-navGroup-routeList">
                    <a class="c-navGroup-route" href>Example Route</a>
                    <a class="c-navGroup-route is-active" href>Active Route</a>
                </div>
                <div class="c-contentArea-routeList c-navGroup-routeList">
                    <a href class="c-navGroup-route c-navGroup-route--additionalInfo">
                        <div>Help</div>
                        <inv-icon class="c-navGroup-routeIcon" glyph="'question-circle'"></inv-icon>
                    </a>
                </div>
            </div>
        </div>
        <div class="c-contentArea-main">
            <div class="c-content-container u-flexKeepHeight">
                <div class="c-masthead c-contentArea-masthead">
                    <div class="c-contentArea-heading c-heading">
                        <div class="c-heading-titleArea">
                            <div class="c-heading-label">Commercial Account</div>
                        </div>
                        <div class="c-heading-buttons">
                            <div class="c-button c-button--concise">
                                <inv-icon glyph="'pop-out'"></inv-icon>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="c-contentArea-content">
                    Main Content Area
                </div>
            </div>
        </div>
    </div>
</div>

Wide Left Navigation Only

Content area w/ wide left navigation bar.

HTML

<div class="t-content c-content" style="height: 600px; width: 800px;" ng-controller="contentAreaExampleController as ContentArea">
    <div class="c-contentArea c-contentArea--leftNavOnly">
        <div class="c-contentArea-leftNav c-contentArea-leftNav--wide">
            <div class="c-navGroup c-contentArea-navGroup">
                <div class="c-navGroup-title">Jonathan Raimer</div>
                <div class="c-navGroup-navList">
                    <div class="c-navGroup-label">jonathan@notemail.com</div>
                    <div class="c-navGroup-label">(555) 555-5555)</div>
                    <div class="c-navGroup-label">English (United States)</div>
                </div>
            </div>
            <div class="c-contentArea-navGroup">
                <inv-action-nav-group label="Quick Actions" initially-visible="3" nav-items="ContentArea.navItems"></inv-action-nav-group>
            </div>
            <div class="c-contentArea-navGroup c-navGroup">
                <div class="c-navGroup-subtitle">
                    Pages
                </div>
                <div class="c-contentArea-routeList c-navGroup-routeList">
                    <a class="c-navGroup-route" href>Example Route</a>
                    <a class="c-navGroup-route is-active" href>Active Route</a>
                </div>
                <div class="c-contentArea-routeList c-navGroup-routeList">
                    <a href class="c-navGroup-route c-navGroup-route--additionalInfo">
                        <div>Help</div>
                        <inv-icon class="c-navGroup-routeIcon" glyph="'question-circle'"></inv-icon>
                    </a>
                </div>
            </div>
        </div>
        <div class="c-contentArea-main">
            <div class="c-content-container u-flexKeepHeight">
                <div class="c-masthead c-contentArea-masthead">
                    <div class="c-contentArea-heading c-heading">
                        <div class="c-heading-titleArea">
                            <div class="c-heading-label">Commercial Account</div>
                        </div>
                        <div class="c-heading-buttons">
                            <div class="c-button c-button--concise">
                                <inv-icon glyph="'pop-out'"></inv-icon>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="c-contentArea-content">
                    Main Content Area
                </div>
            </div>
        </div>
    </div>
</div>

Left and Right Navigation

Content area containing both left & right navigation bars and also the main content area.

HTML

<div class="t-content c-content" style="height: 600px; width: 800px;">
    <div class="c-contentArea c-contentArea--leftAndRightNav">
        <div class="c-contentArea-leftNav">
            <div class="c-contentArea-navGroup c-navGroup">
                <div class="c-navGroup-title">
                    Routing Header
                </div>
                <div class="c-contentArea-routeList c-navGroup-routeList">
                    <a class="c-navGroup-route" href>Example Route</a>
                    <a class="c-navGroup-route is-active" href>Active Route</a>
                    <a href class="c-navGroup-route is-disabled" disabled>Disabled Route</a>
                </div>
            </div>
        </div>
        <div class="c-contentArea-main">
            <div class="c-content-container u-flexKeepHeight">
                <div class="c-masthead c-contentArea-masthead">
                    <div class="c-contentArea-heading c-heading">
                        <div class="c-heading-titleArea">
                            <div class="c-heading-label">Customer Name</div>
                        </div>
                        <div class="c-heading-buttons">
                            <div class="c-button c-button--concise">
                                <inv-icon glyph="'pop-out'"></inv-icon>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="c-contentArea-content">
                    Main content area
                </div>
            </div>
        </div>
        <div class="c-contentArea-rightNav">
            <div class="c-contentArea-navGroup c-navGroup">
                <div class="c-navGroup-title">
                    Routing Header
                </div>
                <div class="c-contentArea-routeList c-navGroup-routeList">
                    <a class="c-navGroup-route" href>Example Route</a>
                    <a class="c-navGroup-route is-active" href>Active Route</a>
                    <a href class="c-navGroup-route is-disabled" disabled>Disabled Route</a>
                </div>
            </div>
        </div>
    </div>
</div>

Sub Navigation

Content area with sub navigation bar.

HTML

<div class="t-content c-content" style="height: 600px; width: 800px;" ng-controller="contentAreaExampleController as ContentArea">
    <div class="c-contentArea c-contentArea--leftNavOnly">
        <div class="c-contentArea-leftNav">
            <div class="c-navGroup c-contentArea-navGroup">
                <div class="c-navGroup-title">Jonathan Raimer</div>
                <div class="c-navGroup-navList">
                    <div class="c-navGroup-label">jonathan@notemail.com</div>
                    <div class="c-navGroup-label">(555) 555-5555)</div>
                    <div class="c-navGroup-label">English (United States)</div>
                </div>
            </div>           
            
            <div class="c-contentArea-navGroup c-navGroup">                 
                 <div class="c-contentArea-routeList c-navGroup-routeList">                                    
                        <inv-route-nav-group label="Pages"  nav-items="ContentArea.subNavigationItems"></inv-route-nav-group>
                 </div>
            </div>
        </div>
        <div class="c-contentArea-main">
            <div class="c-content-container u-flexKeepHeight">
                <div class="c-masthead c-contentArea-masthead">
                    <div class="c-contentArea-heading c-heading">
                        <div class="c-heading-titleArea">
                            <div class="c-heading-label">Commercial Account</div>
                        </div>
                        <div class="c-heading-buttons">
                            <div class="c-button c-button--concise">
                                <inv-icon glyph="'pop-out'"></inv-icon>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="c-contentArea-content">
                    Main Content Area
                </div>
            </div>
        </div>
    </div>
</div>