Content

Upper-level layout pattern for page views

The Content component drives the upper-level layout pattern for pages across the Invision application. Note that there is no custom element-style <content /> component. Instead, simply use the c-content CSS classes inside new view templates.

Usage

The variant examples shown below are the best resource for finding the layout pattern most relevant to your specific view. Aside from the modal/dialog extension, the Content component should occupy the main area for a given view.

Generally speaking, the Content layout area can be divided into up to 3 sections. This allows for an optional inner navigation panel (typically on the left) and/or optional meta panels (typically on the right).

Similarly, there are 3 defined heading styles: Main and secondary headings that span the full view, and an inner heading that can be used per internal section.

Note: Many examples showcase the use of a few other components that are typically used in concert with the content component.

Default

The simplest typical use of the content component. This example include a definitions list component to showcase some common inner content.

A title goes here.

A secondary title goes here.

An Inner Title goes here.

username

jonathanrahemer@gmail.com

phone

(555) 555-5555

Language

English (US)

Birthdate

22/22/2222

System ID

123124124

External ID

123124124653452

Address

1060 W Addison St,

Chicago, IL 60613

username

jonathanrahemer@gmail.com

phone

(555) 555-5555

Language

English (US)

HTML

<div class="t-content">
    <div class="c-content">
        <div class="c-content-container">
            <div class="c-content-headingContainer">
                <div class="c-content-heading">A title goes here.</div>
            </div>
            <div class="c-content-secondaryHeadingContainer">
                <div class="c-content-secondaryHeading">A secondary title goes here.</div>
            </div>
            <div class="c-content-innerContainer">
                <div class="c-content-innerHeading">An Inner Title goes here.</div>
                <div class="c-definitions">
                    <div class="c-definition">
                        <div class="c-definition-term">username</div>
                        <div class="c-definition-value">jonathanrahemer@gmail.com</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">email</div>
                        <div class="c-definition-value">jonathanrahemer@gmail.com</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">phone</div>
                        <div class="c-definition-value">(555) 555-5555</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">Language</div>
                        <div class="c-definition-value">English (US)</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">Birthdate</div>
                        <div class="c-definition-value">22/22/2222</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">System ID</div>
                        <div class="c-definition-value">123124124</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">External ID</div>
                        <div class="c-definition-value">123124124653452</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">Address</div>
                        <div class="c-definition-value">1060 W Addison St,</div>
                        <div class="c-definition-value">Chicago, IL 60613</div>
                    </div>
                </div>
                <div class="c-content-innerDivider"></div>
                <div class="c-definitions">
                    <div class="c-definition">
                        <div class="c-definition-term">username</div>
                        <div class="c-definition-value">jonathanrahemer@gmail.com</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">email</div>
                        <div class="c-definition-value">jonathanrahemer@gmail.com</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">phone</div>
                        <div class="c-definition-value">(555) 555-5555</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">Language</div>
                        <div class="c-definition-value">English (US)</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Including a Advanced Heading & Filter Bar

The content component combination with the full featured c-heading component for headings, as well as a filter bar component instead of a secondary heading. Also included is some misc heading and filter content to showcase common usage.

Transaction Activity

Export

Schedule

Save

An Inner Title goes here.

username

jonathanrahemer@gmail.com

phone

(555) 555-5555

Language

English (US)

Birthdate

22/22/2222

System ID

123124124

External ID

123124124653452

Address

1060 W Addison St,

Chicago, IL 60613

HTML

<div class="t-content">
    <div class="c-content">
        <div class="c-content-container">
            <div class="c-content-headingContainer">
                <div class="c-heading">
                    <div class="c-heading-titleArea">
                        <div class="c-heading-backButton">
                            <inv-icon glyph="'back-arrow'"></inv-icon>
                        </div>
                        <div class="c-heading-label">Transaction Activity</div>
                    </div>
                    <div class="c-heading-buttons">
                        <div class="c-button c-button--icon">
                            <inv-icon glyph="'cloud-download'"></inv-icon>
                            <div class="c-button-text">Export</div>
                        </div>
                        <div class="c-button c-button--icon">
                            <inv-icon glyph="'clock-o'"></inv-icon>
                            <div class="c-button-text">Schedule</div>
                        </div>

                        <div class="c-divider"></div>

                        <div class="c-button c-button--primary">Save</div>
                        <div class="c-button c-button--icon">
                            <inv-icon glyph="'ellipsis-h'"></inv-icon>
                            <div class="c-button-text">More</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="c-filterBar" ng-controller="filterBarExampleController">
                <div class="c-filterBar-filters">
                    <div class="c-filterBar-filter">
                        <inv-single-select class="c-filterButton is-removable" name="countryName"
                            options="countryOptions"
                            is-removable="isRemovable"
                            on-selected-option="handleSingleSelect"
                            on-remove="handleSingleSelectRemove">
                        </inv-single-select>
                    </div>
                    <div class="c-filterBar-filter">
                        <inv-single-select class="c-filterButton is-removable" name="paymentTypeName"
                            options="paymentTypeOptions"
                            is-removable="isRemovable"
                            on-selected-option="handleSingleSelect"
                            on-remove="handleSingleSelectRemove">
                        </inv-single-select>
                    </div>
                </div>
            </div>
            <div class="c-content-innerContainer">
                <div class="c-content-innerHeading">An Inner Title goes here.</div>
                <div class="c-definitions">
                    <div class="c-definition">
                        <div class="c-definition-term">username</div>
                        <div class="c-definition-value">jonathanrahemer@gmail.com</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">email</div>
                        <div class="c-definition-value">jonathanrahemer@gmail.com</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">phone</div>
                        <div class="c-definition-value">(555) 555-5555</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">Language</div>
                        <div class="c-definition-value">English (US)</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">Birthdate</div>
                        <div class="c-definition-value">22/22/2222</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">System ID</div>
                        <div class="c-definition-value">123124124</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">External ID</div>
                        <div class="c-definition-value">123124124653452</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">Address</div>
                        <div class="c-definition-value">1060 W Addison St,</div>
                        <div class="c-definition-value">Chicago, IL 60613</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Including a footer

A footer element can be added to the bottom of the content space. Often this is used in combination with the pager components.

Cancel

HTML

<div class="t-content" style="height: 600px;">
    <div class="c-content c-content--containHeight">
        <inv-breadcrumbs breadcrumbs="[{label: 'Breadcrumb'}]"></inv-breadcrumbs>
        <div class="c-content-container c-content-containHeight">
            <div class="c-masthead">
                <div class="c-heading">
                    <div class="c-heading-titleArea">
                        <div class="c-heading-label">A title goes here.</div>
                    </div>
                </div>
            </div>
            <div class="c-filterBar">
            </div>
            <div class="c-content-tableContainer c-content-containHeight">
                <div class="c-datatable">
                </div>
            </div>
            <div class="c-content-footer">
                <a href="#" class="c-button">Cancel</a>
                <button class="c-button c-button--primary">Submit Form</button>
            </div>
        </div>
    </div>
</div>

Including Inner Navigation

The content component can include a left-hand inner navigation element. Shown here along with the innerNavigation CSS component to show common usage.

Jonathan Raimer

jonathan@notemail.com

(555) 555-5555)

English (United States)

Pages

Example Route Active Route

Help

A title goes here.

A secondary title goes here.

An Inner Title goes here.

username

jonathanrahemer@gmail.com

phone

(555) 555-5555

Language

English (US)

Birthdate

22/22/2222

System ID

123124124

External ID

123124124653452

Address

1060 W Addison St,

Chicago, IL 60613

HTML

<div class="t-content">
    <div class="c-content c-content--flexible">
        <div class="c-content-innerNavigation c-contentNavigation">
            <div class="c-contentNavigation-leftNav">
                <div class="c-navGroup c-contentNavigation-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-contentNavigation-navGroup">
                    <inv-action-nav-group label="Quick Actions" initially-visible="3" nav-items="ContentArea.navItems"></inv-action-nav-group>
                </div>
                <div class="c-contentNavigation-navGroup c-navGroup">
                    <div class="c-navGroup-subtitle">
                        Pages
                    </div>
                    <div class="c-contentNavigation-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-contentNavigation-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>
        <div class="c-content-container">
            <div class="c-content-headingContainer">
                <div class="c-content-heading">A title goes here.</div>
            </div>
            <div class="c-content-secondaryHeadingContainer">
                <div class="c-content-secondaryHeading">A secondary title goes here.</div>
            </div>
            <div class="c-content-innerContainer">
                <div class="c-content-innerHeading">An Inner Title goes here.</div>
                <div class="c-definitions">
                    <div class="c-definition">
                        <div class="c-definition-term">username</div>
                        <div class="c-definition-value">jonathanrahemer@gmail.com</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">email</div>
                        <div class="c-definition-value">jonathanrahemer@gmail.com</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">phone</div>
                        <div class="c-definition-value">(555) 555-5555</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">Language</div>
                        <div class="c-definition-value">English (US)</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">Birthdate</div>
                        <div class="c-definition-value">22/22/2222</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">System ID</div>
                        <div class="c-definition-value">123124124</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">External ID</div>
                        <div class="c-definition-value">123124124653452</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">Address</div>
                        <div class="c-definition-value">1060 W Addison St,</div>
                        <div class="c-definition-value">Chicago, IL 60613</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Including Meta Panel (shown with example content)

The content component can include a right handed meta panel as well.

Jonathan Raimer

jonathan@notemail.com

(555) 555-5555)

English (United States)

Pages

Example Route Active Route

Help

A title goes here.

A secondary heading goes here.

Some inner title goes here.

First Name

Last Name

Address Line 1

Address Line 2

City

State/Region/Province

Postal Code

Footer and such.

A secondary title goes here.

An Inner Title goes here.

username

jonathanrahemer@gmail.com

HTML

<div class="t-content" style="height: 500px;">
    <div class="c-content c-content--flexible">
        <div class="c-content-innerNavigation c-contentNavigation">
            <div class="c-contentNavigation-leftNav">
                <div class="c-navGroup c-contentNavigation-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-contentNavigation-navGroup">
                    <inv-action-nav-group label="Quick Actions" initially-visible="3" nav-items="ContentArea.navItems"></inv-action-nav-group>
                </div>
                <div class="c-contentNavigation-navGroup c-navGroup">
                    <div class="c-navGroup-subtitle">
                        Pages
                    </div>
                    <div class="c-contentNavigation-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-contentNavigation-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>
        <div class="c-content-container c-content-containHeight">
            <div class="c-content-headingContainer">
                <div class="c-content-heading">A title goes here.</div>
            </div>
            <div class="c-content-main">
                <div class="c-content-innerMain">
                    <div class="c-content-secondaryHeadingContainer">
                        <div class="c-content-secondaryHeading">A secondary heading goes here.</div>
                    </div>
                    <div class="c-content-innerContainer">
                        <div class="c-content-innerHeading">Some inner title goes here.</div>
                        <form class="c-generalForm" autocomplete="off">
                            <fieldset class="c-fieldset">
                                <div class="c-fieldset-item c-fieldset-item--brief" ng-required>
                                    <label for="firstName">First Name</label>
                                    <input id="firstName" type="text" placeholder="First Name">
                                </div>
                                <div class="c-fieldset-item  c-fieldset-item--brief is-required">
                                    <label for="lastName">Last Name</label>
                                    <input id="lastName" type="text" placeholder="Last Name">
                                </div>
                                <div class="c-fieldset-item">
                                    <label for="address1">Address Line 1</label>
                                    <input id="address1" type="text" placeholder="Address Line 1">
                                </div>
                                <div class="c-fieldset-item">
                                    <label for="address2">Address Line 2</label>
                                    <input id="address2" type="text" placeholder="Address Line 2">
                                </div>
                                <div class="c-fieldset-item c-fieldset-item--mid">
                                    <label for="city">City</label>
                                    <input id="city" type="text" placeholder="City">
                                </div>
                                <div class="c-fieldset-items c-fieldset-items--two">
                                    <div class="c-fieldset-item">
                                        <label for="state">State/Region/Province</label>
                                        <div class="c-select">
                                            <select name="state" id="state">
                                                <option value="1">Nebraska</option>
                                                <option value="2">Iowa</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="c-fieldset-item is-required">
                                        <label for="postal">Postal Code</label>
                                        <input id="postal" type="text" placeholder="Zip">
                                    </div>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                    <div class="c-content-footer">
                        <div class="u-p++">Footer and such.</div>
                    </div>
                </div>
                <div class="c-content-meta">
                    <div class="c-content-secondaryHeadingContainer">
                        <div class="c-content-secondaryHeading">A secondary title goes here.</div>
                    </div>
                    <div class="c-content-innerContainer">
                        <div class="c-content-innerHeading">An Inner Title goes here.</div>
                        <div class="c-definitions c-definitions--long">
                            <div class="c-definition">
                                <div class="c-definition-term">username</div>
                                <div class="c-definition-value">jonathanrahemer@gmail.com</div>
                            </div>
                            <div class="c-definition">
                                <div class="c-definition-term">email</div>
                                <div class="c-definition-value">jonathanrahemer@gmail.com</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Including Meta Panel (just the tags for content)

The content component can include a right handed meta panel (needed content tags only).

Nav would go here.

A title goes here.

A secondary heading goes here.

Some inner heading goes here.

There can be any number of headings.

Another heading

An Inner Title goes here.

HTML

<div class="t-content" style="height: 400px;">
    <div class="c-content c-content--flexible">
        <div class="c-content-innerNavigation c-contentNavigation">
            <div class="c-contentNavigation-leftNav">
                Nav would go here.
            </div>
        </div>
        <div class="c-content-container c-content-containHeight">
            <div class="c-content-headingContainer">
                <div class="c-content-heading">A title goes here.</div>
            </div>
            <div class="c-content-main">
                <div class="c-content-innerMain">
                    <div class="c-content-secondaryHeadingContainer">
                        <div class="c-content-secondaryHeading">A secondary heading goes here.</div>
                    </div>
                    <div class="c-content-innerContainer">
                        <div class="c-content-innerHeading">Some inner heading goes here.</div>
                        <div class="c-content-innerHeading">There can be any number of headings.</div>
                    </div>
                </div>
                <div class="c-content-meta">
                    <div class="c-content-secondaryHeadingContainer">
                        <div class="c-content-secondaryHeading">Another heading</div>
                    </div>
                    <div class="c-content-innerContainer">
                        <div class="c-content-innerHeading">An Inner Title goes here.</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Including Wide Meta Panel (shown with example content)

The meta panel has a wide variant as well. This is compatible with the left or right side meta panel.

Jonathan Raimer

jonathan@notemail.com

(555) 555-5555)

English (United States)

Pages

Example Route Active Route

Help

A title goes here.

A secondary heading goes here.

Some inner title goes here.

First Name

Last Name

Address Line 1

Address Line 2

City

State/Region/Province

Postal Code

Footer and such.

A secondary title goes here.

An Inner Title goes here.

username

jonathanrahemer@gmail.com

HTML

<div class="t-content" style="height: 500px;">
    <div class="c-content c-content--flexible">
        <div class="c-content-innerNavigation c-contentNavigation">
            <div class="c-contentNavigation-leftNav">
                <div class="c-navGroup c-contentNavigation-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-contentNavigation-navGroup">
                    <inv-action-nav-group label="Quick Actions" initially-visible="3" nav-items="ContentArea.navItems"></inv-action-nav-group>
                </div>
                <div class="c-contentNavigation-navGroup c-navGroup">
                    <div class="c-navGroup-subtitle">
                        Pages
                    </div>
                    <div class="c-contentNavigation-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-contentNavigation-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>
        <div class="c-content-container c-content-containHeight">
            <div class="c-content-headingContainer">
                <div class="c-content-heading">A title goes here.</div>
            </div>
            <div class="c-content-main">
                <div class="c-content-innerMain">
                    <div class="c-content-secondaryHeadingContainer">
                        <div class="c-content-secondaryHeading">A secondary heading goes here.</div>
                    </div>
                    <div class="c-content-innerContainer">
                        <div class="c-content-innerHeading">Some inner title goes here.</div>
                        <form class="c-generalForm" autocomplete="off">
                            <fieldset class="c-fieldset">
                                <div class="c-fieldset-item c-fieldset-item--brief" ng-required>
                                    <label for="firstName">First Name</label>
                                    <input id="firstName" type="text" placeholder="First Name">
                                </div>
                                <div class="c-fieldset-item  c-fieldset-item--brief is-required">
                                    <label for="lastName">Last Name</label>
                                    <input id="lastName" type="text" placeholder="Last Name">
                                </div>
                                <div class="c-fieldset-item">
                                    <label for="address1">Address Line 1</label>
                                    <input id="address1" type="text" placeholder="Address Line 1">
                                </div>
                                <div class="c-fieldset-item">
                                    <label for="address2">Address Line 2</label>
                                    <input id="address2" type="text" placeholder="Address Line 2">
                                </div>
                                <div class="c-fieldset-item c-fieldset-item--mid">
                                    <label for="city">City</label>
                                    <input id="city" type="text" placeholder="City">
                                </div>
                                <div class="c-fieldset-items c-fieldset-items--two">
                                    <div class="c-fieldset-item">
                                        <label for="state">State/Region/Province</label>
                                        <div class="c-select">
                                            <select name="state" id="state">
                                                <option value="1">Nebraska</option>
                                                <option value="2">Iowa</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="c-fieldset-item is-required">
                                        <label for="postal">Postal Code</label>
                                        <input id="postal" type="text" placeholder="Zip">
                                    </div>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                    <div class="c-content-footer">
                        <div class="u-p++">Footer and such.</div>
                    </div>
                </div>
                <div class="c-content-meta c-content-meta--wide">
                    <div class="c-content-secondaryHeadingContainer">
                        <div class="c-content-secondaryHeading">A secondary title goes here.</div>
                    </div>
                    <div class="c-content-innerContainer">
                        <div class="c-content-innerHeading">An Inner Title goes here.</div>
                        <div class="c-definitions c-definitions--long">
                            <div class="c-definition">
                                <div class="c-definition-term">username</div>
                                <div class="c-definition-value">jonathanrahemer@gmail.com</div>
                            </div>
                            <div class="c-definition">
                                <div class="c-definition-term">email</div>
                                <div class="c-definition-value">jonathanrahemer@gmail.com</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Including Thin Meta Panel (shown with example content)

The meta panel has a thin variant as well. This is compatible with the left or right side meta panel.

Jonathan Raimer

jonathan@notemail.com

(555) 555-5555)

English (United States)

Pages

Example Route Active Route

Help

A title goes here.

A secondary heading goes here.

Some inner title goes here.

First Name

Last Name

Address Line 1

Address Line 2

City

State/Region/Province

Postal Code

Footer and such.

A secondary title goes here.

An Inner Title goes here.

username

jonathanrahemer@gmail.com

HTML

<div class="t-content" style="height: 500px;">
    <div class="c-content c-content--flexible">
        <div class="c-content-innerNavigation c-contentNavigation">
            <div class="c-contentNavigation-leftNav">
                <div class="c-navGroup c-contentNavigation-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-contentNavigation-navGroup">
                    <inv-action-nav-group label="Quick Actions" initially-visible="3" nav-items="ContentArea.navItems"></inv-action-nav-group>
                </div>
                <div class="c-contentNavigation-navGroup c-navGroup">
                    <div class="c-navGroup-subtitle">
                        Pages
                    </div>
                    <div class="c-contentNavigation-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-contentNavigation-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>
        <div class="c-content-container c-content-containHeight">
            <div class="c-content-headingContainer">
                <div class="c-content-heading">A title goes here.</div>
            </div>
            <div class="c-content-main">
                <div class="c-content-innerMain">
                    <div class="c-content-secondaryHeadingContainer">
                        <div class="c-content-secondaryHeading">A secondary heading goes here.</div>
                    </div>
                    <div class="c-content-innerContainer">
                        <div class="c-content-innerHeading">Some inner title goes here.</div>
                        <form class="c-generalForm" autocomplete="off">
                            <fieldset class="c-fieldset">
                                <div class="c-fieldset-item c-fieldset-item--brief" ng-required>
                                    <label for="firstName">First Name</label>
                                    <input id="firstName" type="text" placeholder="First Name">
                                </div>
                                <div class="c-fieldset-item  c-fieldset-item--brief is-required">
                                    <label for="lastName">Last Name</label>
                                    <input id="lastName" type="text" placeholder="Last Name">
                                </div>
                                <div class="c-fieldset-item">
                                    <label for="address1">Address Line 1</label>
                                    <input id="address1" type="text" placeholder="Address Line 1">
                                </div>
                                <div class="c-fieldset-item">
                                    <label for="address2">Address Line 2</label>
                                    <input id="address2" type="text" placeholder="Address Line 2">
                                </div>
                                <div class="c-fieldset-item c-fieldset-item--mid">
                                    <label for="city">City</label>
                                    <input id="city" type="text" placeholder="City">
                                </div>
                                <div class="c-fieldset-items c-fieldset-items--two">
                                    <div class="c-fieldset-item">
                                        <label for="state">State/Region/Province</label>
                                        <div class="c-select">
                                            <select name="state" id="state">
                                                <option value="1">Nebraska</option>
                                                <option value="2">Iowa</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="c-fieldset-item is-required">
                                        <label for="postal">Postal Code</label>
                                        <input id="postal" type="text" placeholder="Zip">
                                    </div>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                    <div class="c-content-footer">
                        <div class="u-p++">Footer and such.</div>
                    </div>
                </div>
                <div class="c-content-meta c-content-meta--thin">
                    <div class="c-content-secondaryHeadingContainer">
                        <div class="c-content-secondaryHeading">A secondary title goes here.</div>
                    </div>
                    <div class="c-content-innerContainer">
                        <div class="c-content-innerHeading">An Inner Title goes here.</div>
                        <div class="c-definitions c-definitions--long">
                            <div class="c-definition">
                                <div class="c-definition-term">username</div>
                                <div class="c-definition-value">jonathanrahemer@gmail.com</div>
                            </div>
                            <div class="c-definition">
                                <div class="c-definition-term">email</div>
                                <div class="c-definition-value">jonathanrahemer@gmail.com</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Left Hand Meta Panel

The content component can include a left handed meta panel as well.

Jonathan Raimer

jonathan@notemail.com

(555) 555-5555)

English (United States)

Pages

Example Route Active Route

Help

A title goes here.

A secondary title goes here.

An Inner Title goes here.

username

jonathanrahemer@gmail.com

A secondary heading goes here.

Some inner title goes here.

First Name

Last Name

Address Line 1

Address Line 2

City

State/Region/Province

Postal Code

Footer and such.

HTML

<div class="t-content" style="height: 500px;">
    <div class="c-content c-content--flexible">
        <div class="c-content-innerNavigation c-contentNavigation">
            <div class="c-contentNavigation-leftNav">
                <div class="c-navGroup c-contentNavigation-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-contentNavigation-navGroup">
                    <inv-action-nav-group label="Quick Actions" initially-visible="3" nav-items="ContentArea.navItems"></inv-action-nav-group>
                </div>
                <div class="c-contentNavigation-navGroup c-navGroup">
                    <div class="c-navGroup-subtitle">
                        Pages
                    </div>
                    <div class="c-contentNavigation-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-contentNavigation-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>
        <div class="c-content-container c-content-containHeight">
            <div class="c-content-headingContainer">
                <div class="c-content-heading">A title goes here.</div>
            </div>
            <div class="c-content-main">
                <div class="c-content-meta">
                    <div class="c-content-secondaryHeadingContainer">
                        <div class="c-content-secondaryHeading">A secondary title goes here.</div>
                    </div>
                    <div class="c-content-innerContainer">
                        <div class="c-content-innerHeading">An Inner Title goes here.</div>
                        <div class="c-definitions c-definitions--long">
                            <div class="c-definition">
                                <div class="c-definition-term">username</div>
                                <div class="c-definition-value">jonathanrahemer@gmail.com</div>
                            </div>
                            <div class="c-definition">
                                <div class="c-definition-term">email</div>
                                <div class="c-definition-value">jonathanrahemer@gmail.com</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="c-content-innerMain">
                    <div class="c-content-secondaryHeadingContainer">
                        <div class="c-content-secondaryHeading">A secondary heading goes here.</div>
                    </div>
                    <div class="c-content-innerContainer">
                        <div class="c-content-innerHeading">Some inner title goes here.</div>
                        <form class="c-generalForm" autocomplete="off">
                            <fieldset class="c-fieldset">
                                <div class="c-fieldset-item c-fieldset-item--brief" ng-required>
                                    <label for="firstName">First Name</label>
                                    <input id="firstName" type="text" placeholder="First Name">
                                </div>
                                <div class="c-fieldset-item  c-fieldset-item--brief is-required">
                                    <label for="lastName">Last Name</label>
                                    <input id="lastName" type="text" placeholder="Last Name">
                                </div>
                                <div class="c-fieldset-item">
                                    <label for="address1">Address Line 1</label>
                                    <input id="address1" type="text" placeholder="Address Line 1">
                                </div>
                                <div class="c-fieldset-item">
                                    <label for="address2">Address Line 2</label>
                                    <input id="address2" type="text" placeholder="Address Line 2">
                                </div>
                                <div class="c-fieldset-item c-fieldset-item--mid">
                                    <label for="city">City</label>
                                    <input id="city" type="text" placeholder="City">
                                </div>
                                <div class="c-fieldset-items c-fieldset-items--two">
                                    <div class="c-fieldset-item">
                                        <label for="state">State/Region/Province</label>
                                        <div class="c-select">
                                            <select name="state" id="state">
                                                <option value="1">Nebraska</option>
                                                <option value="2">Iowa</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="c-fieldset-item is-required">
                                        <label for="postal">Postal Code</label>
                                        <input id="postal" type="text" placeholder="Zip">
                                    </div>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                    <div class="c-content-footer">
                        <div class="u-p++">Footer and such.</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Showcasing scrolling

The content component has 3 scrollable areas by default. If you need an area inside of these areas to be scrollable, look to the utility classes to override this default behavior.

Jonathan Raimer

jonathan@notemail.com

(555) 555-5555)

English (United States)

Pages

Example Route Active Route

Help

Pages

Example Route Active Route

Help

Pages

Example Route Active Route

Help

A title goes here.

A secondary heading goes here.

Some inner title goes here.

First Name

Last Name

Address Line 1

Address Line 2

City

State/Region/Province

Postal Code

Footer and such.

A secondary title goes here.

An Inner Title goes here.

username

jonathanrahemer@gmail.com

username

jonathanrahemer@gmail.com

username

jonathanrahemer@gmail.com

A title goes here.

A secondary title goes here.

An Inner Title goes here.

username

jonathanrahemer@gmail.com

phone

(555) 555-5555

Language

English (US)

Birthdate

22/22/2222

System ID

123124124

External ID

123124124653452

Address

1060 W Addison St,

Chicago, IL 60613

HTML

<div class="t-content" style="height: 400px;">
    <div class="c-content c-content--flexible">
        <div class="c-content-innerNavigation c-contentNavigation">
            <div class="c-contentNavigation-leftNav">
                <div class="c-navGroup c-contentNavigation-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-contentNavigation-navGroup">
                    <inv-action-nav-group label="Quick Actions" initially-visible="3" nav-items="ContentArea.navItems"></inv-action-nav-group>
                </div>
                <div class="c-contentNavigation-navGroup c-navGroup">
                    <div class="c-navGroup-subtitle">
                        Pages
                    </div>
                    <div class="c-contentNavigation-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-contentNavigation-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 class="c-contentNavigation-navGroup c-navGroup">
                    <div class="c-navGroup-subtitle">
                        Pages
                    </div>
                    <div class="c-contentNavigation-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-contentNavigation-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 class="c-contentNavigation-navGroup c-navGroup">
                    <div class="c-navGroup-subtitle">
                        Pages
                    </div>
                    <div class="c-contentNavigation-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-contentNavigation-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>
        <div class="c-content-container c-content-containHeight">
            <div class="c-content-headingContainer">
                <div class="c-content-heading">A title goes here.</div>
            </div>
            <div class="c-content-main">
                <div class="c-content-innerMain">
                    <div class="c-content-secondaryHeadingContainer">
                        <div class="c-content-secondaryHeading">A secondary heading goes here.</div>
                    </div>
                    <div class="c-content-innerContainer">
                        <div class="c-content-innerHeading">Some inner title goes here.</div>
                        <form class="c-generalForm" autocomplete="off">
                            <fieldset class="c-fieldset">
                                <div class="c-fieldset-item c-fieldset-item--brief" ng-required>
                                    <label for="firstName">First Name</label>
                                    <input id="firstName" type="text" placeholder="First Name">
                                </div>
                                <div class="c-fieldset-item  c-fieldset-item--brief is-required">
                                    <label for="lastName">Last Name</label>
                                    <input id="lastName" type="text" placeholder="Last Name">
                                </div>
                                <div class="c-fieldset-item">
                                    <label for="address1">Address Line 1</label>
                                    <input id="address1" type="text" placeholder="Address Line 1">
                                </div>
                                <div class="c-fieldset-item">
                                    <label for="address2">Address Line 2</label>
                                    <input id="address2" type="text" placeholder="Address Line 2">
                                </div>
                                <div class="c-fieldset-item c-fieldset-item--mid">
                                    <label for="city">City</label>
                                    <input id="city" type="text" placeholder="City">
                                </div>
                                <div class="c-fieldset-items c-fieldset-items--two">
                                    <div class="c-fieldset-item">
                                        <label for="state">State/Region/Province</label>
                                        <div class="c-select">
                                            <select name="state" id="state">
                                                <option value="1">Nebraska</option>
                                                <option value="2">Iowa</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="c-fieldset-item is-required">
                                        <label for="postal">Postal Code</label>
                                        <input id="postal" type="text" placeholder="Zip">
                                    </div>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                    <div class="c-content-footer">
                        <div class="u-p++">Footer and such.</div>
                    </div>
                </div>
                <div class="c-content-meta">
                    <div class="c-content-secondaryHeadingContainer">
                        <div class="c-content-secondaryHeading">A secondary title goes here.</div>
                    </div>
                    <div class="c-content-innerContainer">
                        <div class="c-content-innerHeading">An Inner Title goes here.</div>
                        <div class="c-definitions c-definitions--long">
                            <div class="c-definition">
                                <div class="c-definition-term">username</div>
                                <div class="c-definition-value">jonathanrahemer@gmail.com</div>
                            </div>
                            <div class="c-definition">
                                <div class="c-definition-term">email</div>
                                <div class="c-definition-value">jonathanrahemer@gmail.com</div>
                            </div>
                        </div>
                        <div class="c-definitions c-definitions--long">
                            <div class="c-definition">
                                <div class="c-definition-term">username</div>
                                <div class="c-definition-value">jonathanrahemer@gmail.com</div>
                            </div>
                            <div class="c-definition">
                                <div class="c-definition-term">email</div>
                                <div class="c-definition-value">jonathanrahemer@gmail.com</div>
                            </div>
                        </div>
                        <div class="c-definitions c-definitions--long">
                            <div class="c-definition">
                                <div class="c-definition-term">username</div>
                                <div class="c-definition-value">jonathanrahemer@gmail.com</div>
                            </div>
                            <div class="c-definition">
                                <div class="c-definition-term">email</div>
                                <div class="c-definition-value">jonathanrahemer@gmail.com</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<br>
<br>
<br>
<div class="t-content" style="height: 350px;">
    <div class="c-content c-content--flexible">
        <div class="c-content-container">
            <div class="c-content-headingContainer">
                <div class="c-content-heading">A title goes here.</div>
            </div>
            <div class="c-content-secondaryHeadingContainer">
                <div class="c-content-secondaryHeading">A secondary title goes here.</div>
            </div>
            <div class="c-content-innerContainer">
                <div class="c-content-innerHeading">An Inner Title goes here.</div>
                <div class="c-definitions">
                    <div class="c-definition">
                        <div class="c-definition-term">username</div>
                        <div class="c-definition-value">jonathanrahemer@gmail.com</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">email</div>
                        <div class="c-definition-value">jonathanrahemer@gmail.com</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">phone</div>
                        <div class="c-definition-value">(555) 555-5555</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">Language</div>
                        <div class="c-definition-value">English (US)</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">Birthdate</div>
                        <div class="c-definition-value">22/22/2222</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">System ID</div>
                        <div class="c-definition-value">123124124</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">External ID</div>
                        <div class="c-definition-value">123124124653452</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">Address</div>
                        <div class="c-definition-value">1060 W Addison St,</div>
                        <div class="c-definition-value">Chicago, IL 60613</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Dialog Form Variant

An example of read only content inside a dialog. The read only content consists of content fields, a content divider, and a content group title.

Example Heading

Label

Example Item

Username

workEmail@gmail.com

Phone

(555) 555-5555

Address

1000 W Mains St,

Chicago, IL 60613

Language

English (US)

Birthdate

22/22/2222

System ID

123124124

External ID

123124124653452

HTML

<div class="t-content c-content" ng-controller="ContentModalExampleController as controller">
    <p>
        <button class="c-button" ng-click="controller.openDialog()">Open Dialog</button>
    </p>

    <inv-popup-vault>
        <div inv-popup="controller.popupConfig">
            <form class="c-content c-content--dialog c-generalForm c-fieldsets"
                  name="examplePopupForm">
                <inv-dialog dialog-size="medium"
                            dialog-title="'Example Modal With Content Classes'"
                            dialog-type="content"
                            on-close="controller.closeDialog()">
                    <dialog-content>
                        <div class="c-content-container">
                            <div class="c-formSectionHeading">
                                <span class="c-formSectionHeading-titleText"> Example Heading</span>
                            </div>
                            <fieldset class="c-fieldset">
                                <div class="c-fieldset-item">
                                    <label for="exampleLabel">Label</label>
                                    <div class="c-fieldset-readOnlyValue" id="exampleLabel">Example Item</div>
                                </div>
                                <div class="c-fieldset-item">
                                    <label class="">Username</label>
                                    <div class="c-fieldset-readOnlyValue">workEmail@gmail.com</div>
                                </div>
                                <div class="c-fieldset-item">
                                    <label class="">Email</label>
                                    <div class="c-fieldset-readOnlyValue">workEmail@gmail.com</div>
                                </div>
                                <div class="c-fieldset-item">
                                    <label class="">Phone</label>
                                    <div class="c-fieldset-readOnlyValue">(555) 555-5555</div>
                                </div>
                                <div class="c-fieldset-item">
                                    <label class="">Address </label>
                                    <div class="c-fieldset-readOnlyValue">1000 W Mains St,</div>
                                    <div class="c-fieldset-readOnlyValue">Chicago, IL 60613</div>
                                </div>
                                <div class="c-fieldset-item">
                                    <label class="">Language</label>
                                    <div class="c-fieldset-readOnlyValue">English (US)</div>
                                </div>
                                <div class="c-fieldset-item">
                                    <label class="">Birthdate</label>
                                    <div class="c-fieldset-readOnlyValue">22/22/2222</div>
                                </div>
                            </fieldset>
                            <fieldset class="c-fieldset">
                                <div class="c-content-innerDivider"></div>
                                <div class="c-fieldset-item">
                                    <label class="">System ID</label>
                                    <div class="c-fieldset-readOnlyValue">123124124</div>
                                </div>
                                <div class="c-fieldset-item">
                                    <label class="">External ID</label>
                                    <div class="c-fieldset-readOnlyValue">123124124653452</div>
                                </div>
                            </fieldset>
                        </div>
                    </dialog-content>
                    <dialog-footer>
                        <button class="c-button" ng-click="controller.closeDialog()">Close</button>
                    </dialog-footer>
                </inv-dialog>
            </form>
        </div>
    </inv-popup-vault>
</div>

Flush Container Variant

As a variation, the inner containers can have their padding removed. Useful for rich-list (master/slave) like content.

Heading goes here

Secondary heading goes here

Notice the content here has no padding (it's flush!).

An inner heading goes here

username

jonathanrahemer@gmail.com

phone

(555) 555-5555

Language

English (US)

Birthdate

22/22/2222

System ID

123124124

External ID

123124124653452

Address

1060 W Addison St,

Chicago, IL 60613

HTML

<div class="t-content">
    <div class="c-content">
        <div class="c-content-container">
            <div class="c-content-headingContainer">
                <div class="c-content-heading">Heading goes here</div>
            </div>
            <div class="c-content-secondaryHeadingContainer">
                <div class="c-content-secondaryHeading">Secondary heading goes here</div>
            </div>
            <div class="c-content-innerContainer c-content-innerContainer--flush">
                <div>Notice the content here has no padding (it's flush!).</div>
                <br />
                <div class="c-content-innerHeading">An inner heading goes here</div>
                <div class="c-definitions">
                    <div class="c-definition">
                        <div class="c-definition-term">username</div>
                        <div class="c-definition-value">jonathanrahemer@gmail.com</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">email</div>
                        <div class="c-definition-value">jonathanrahemer@gmail.com</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">phone</div>
                        <div class="c-definition-value">(555) 555-5555</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">Language</div>
                        <div class="c-definition-value">English (US)</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">Birthdate</div>
                        <div class="c-definition-value">22/22/2222</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">System ID</div>
                        <div class="c-definition-value">123124124</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">External ID</div>
                        <div class="c-definition-value">123124124653452</div>
                    </div>
                    <div class="c-definition">
                        <div class="c-definition-term">Address</div>
                        <div class="c-definition-value">1060 W Addison St,</div>
                        <div class="c-definition-value">Chicago, IL 60613</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Richlist

Content component with richlist usage.

Devices

Infinite

device associations remaining

12121

Windows PC

Device Details

Device Nickname

Status

Device ID

00:05:9A:3C:7A:00

Name

Windows PC

Device Type

Windows PC

Physical Device Type

Windows PC

Serial Number

323598:1111:00:05:9A:3C:7A:00

Registered Date

7/2/15 10:32 AM

Unregistered Date

N\A

Allow Pinless Purchase

Omit From Assoc. Limit

HTML

<div class="t-content" style="height: 600px;">
    <style>
        .c-customer-section {
            padding: 16px;
            min-height: 140px;
        }

        .c-customer-heading {
            flex-direction: row;
            margin: -16px;
            margin-bottom: 16px;
            padding: 16px 12px;
            white-space: nowrap;
            background-color: #f0f3f6;
        }

        .c-customerDevices-remainingAssociations-value {
            font-weight: 700;
            color: black;
        }
    </style>
    <div class="c-content">
        <div class="c-content-container u-sizeFull">
            <div class="c-content-headingContainer">
                <div class="c-heading">
                    <div class="c-heading-titleArea">
                        <div class="c-heading-label">Devices</div>
                    </div>
                    <div class="c-heading-buttons">
                        <div class="c-button c-button--icon">
                            <inv-icon glyph="'plus'"></inv-icon>
                            <div class="c-button-text u-ml">Register New Device</div>
                        </div>
                        <div class="c-divider"></div>

                        <!-- <open-new-window></open-new-window -->
                        <div class="c-openNewWindow">
                            <inv-icon glyph="'pop-out'"></inv-icon>
                        </div>
                    </div>
                </div>
            </div>
            <div class="c-filterBar c-generalForm">
                <div class="c-filterBar-filters">
                    <inv-boolean-filter
                        class="c-filterBar-filter"
                        is-selected="true"
                        label="'Include Removed'">
                    </inv-boolean-filter>
                </div>
                <div class="c-filterBar-filters u-flexAlignCenter u-flexMiddle">
                    <div class="c-customerDevices-remainingAssociations-value">Infinite</div> 
                    <div class="c-heading-label">device associations remaining</div>
                </div>
            </div>
            <div class="c-content-innerContainer c-content-innerContainer--flush c-content-containHeight">
                <div class="u-flex u-flexItemGrow u-sizeFull">
                    <div class="c-content-richList c-richlist u-mb0">
                        <div class="c-richlist-item c-button u-flex is-selected" ng-repeat="device in [{}]">
                            <div class="u-flex u-flexColumn u-sizeFullWidth">
                                <div class="u-flex u-flexItemGrow u-flexMiddle">
                                    <div class="c-richlist-lineOne c-richlist-lineOne--bold u-textTruncate u-flexItemGrow">12121</div>
                                </div>
                                <div class="u-textTruncate">
                                    <span>Windows PC</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="c-content-richListDetails c-richlist-rightContent u-mb0">
                        <div class="c-customer-section">
                            <div class="c-customer-heading c-heading u-flex u-flexSpaced u-flexMiddle">
                                <div class="c-heading-label u-textUpper u-epsilon">Device Details</div>
                                <div>
                                    <div class="c-button c-button--icon" title="Edit">
                                        <inv-icon glyph="'pencil'"></inv-icon>
                                    </div>
                                </div>
                            </div>
                            <div class="c-definitions">
                                <div class="c-definition">
                                    <div class="c-definition-term">Device Nickname</div>
                                    <div class="c-definition-value" ng-bind="controller.device.Nickname"></div>
                                </div>
                                <div class="c-definition">
                                    <div class="c-definition-term">Status</div>
                                    <div class="c-definition-value"><subscriber-status status="1"></subscriber-status></div>
                                </div>
                                <div class="c-definition">
                                    <div class="c-definition-term">Device ID</div>
                                    <div class="c-definition-value">00:05:9A:3C:7A:00</div>
                                </div>
                                <div class="c-definition">
                                    <div class="c-definition-term">Name</div>
                                    <div class="c-definition-value">Windows PC</div>
                                </div>
                                <div class="c-definition">
                                    <div class="c-definition-term">Device Type</div>
                                    <div class="c-definition-value">Windows PC</div>
                                </div>
                                <div class="c-definition">
                                    <div class="c-definition-term">Physical Device Type</div>
                                    <div class="c-definition-value">Windows PC</div>
                                </div>
                                <div class="c-definition">
                                    <div class="c-definition-term">Serial Number</div>
                                    <div class="c-definition-value">323598:1111:00:05:9A:3C:7A:00</div>
                                </div>
                                <div class="c-definition">
                                    <div class="c-definition-term">Registered Date</div>
                                    <div class="c-definition-value">7/2/15 10:32 AM</div>
                                </div>
                                <div class="c-definition">
                                    <div class="c-definition-term">Unregistered Date</div>
                                    <div class="c-definition-value">N\A</div>
                                </div>
                                <div class="c-definition">
                                    <div class="c-definition-term">Allow Pinless Purchase</div>
                                    <div class="c-definition-value">No</div>
                                </div>
                                <div class="c-definition">
                                    <div class="c-definition-term">Omit From Assoc. Limit</div>
                                    <div class="c-definition-value">No</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Richlist with footer and header

Content component with richlist usage.

Cereals

Consume New Cereal

Cereals

Honey Nut Cheerios

Frosted Flakes

Honey Bunches of Oats

Cheerios

Cinnamon Toast Crunch

Special K

Frosted Mini Wheats

Lucky Charms

Froot Loops

Fruity Pebbles

Raisin Bran

Wheaties

Rice Krispies

footer

Cereal Details

Mascot

A Bee

Name

Honey Nut Cheerios

Year Introduced

1979

Producer

General Mills

Tagline(s)

It's a honey of an O. (1979–2004; 2014–present)

It's Honey Nut Cheerios! (1979–1992; 2000–2004; 2014–present)

It's Irrezzzzistable! (1992–1993)

Race for the taste! (1993–1995)

Little O, Big Taste! (1995–1999)

Nobody can say "No" to Honey Nut Cheerios. (1995–2004)

From the hive that's nuts about honey! (2004–2008)

Bee happy, Bee healthy! (2004–2013)

Must Be the Honey. (2013–present, based on Nelly's "Ride wit Me")

Historically, Honey Nut Cheerios has participated in much the same promotional advertising as the original brand, while collaborating with the field of NASCAR and especially driver Bill Lester, in promoting healthy diets. In 1985, Baskin-Robbins introduced an ice cream flavor based on the cereal called Honey Nut Crunch. Promotional tie-ins included gift certificates in cereal boxes and special Honey Nut Crunch sundaes in stores.

General Mills has been active in the conservation of bees since 2011; In 2011, the company began investing in the Xerces Society to help promote biodiversity and pollinator conservation. In March 2017, General Mills announced the Buzz Bee image had been removed from boxes of Honey Nut Cheerios. Images of the new box showed a white empty space where Buzz Bee used to be. Below the image of the bowl of cereal, a plea to "Help Bring Back The Bees" was added. This was to raise awareness of pollinator decline. In the announcement, General Mills made note that 30% of ingredients they use depend on pollinators. As a part of this campaign, General Mills also plans to expand their pollinator habitat to 3,300 acres.

This campaign has struck controversy in some environmental communities. Kathryn Turner, an ecologist, commented that the packages of seeds contain species that are invasive to some geographic locations, and urges individuals to become more educated before planting the seeds.

HTML

<div class="t-content" style="height: 600px;">
    <div class="c-content c-content--containHeight">
        <div class="c-content-container c-content-containHeight">
            <div class="c-content-headingContainer">
                <div class="c-heading">
                    <div class="c-heading-titleArea">
                        <div class="c-heading-label">Cereals</div>
                    </div>
                    <div class="c-heading-buttons">
                        <div class="c-button c-button--icon">
                            <inv-icon glyph="'plus'"></inv-icon>
                            <div class="c-button-text u-ml">Consume New Cereal</div>
                        </div>
                        <div class="c-divider"></div>

                        <!-- <open-new-window></open-new-window -->
                        <div class="c-openNewWindow">
                            <inv-icon glyph="'pop-out'"></inv-icon>
                        </div>
                    </div>
                </div>
            </div>
            <div class="c-content-main">
                <div class="c-content-meta c-content-meta--richList">
                    <div class="c-content-secondaryHeadingContainer u-flex u-flexSpaced u-flexMiddle">
                        <div class="c-content-secondaryHeading u-textUpper u-epsilon">Cereals</div>
                    </div>
                    <div class="c-content-innerContainer c-content-innerContainer--flush">
                        <div class="c-content-richList c-richlist u-mb0">
                            <div class="c-richlist-item c-button u-flex is-selected">
                                <div class="u-flex u-flexColumn u-sizeFullWidth">
                                    <div class="u-flex u-flexItemGrow u-flexMiddle">
                                        <div class="c-richlist-lineOne c-richlist-lineOne--bold u-textTruncate u-flexItemGrow">Honey Nut Cheerios</div>
                                    </div>
                                </div>
                            </div>
                            <div class="c-richlist-item c-button u-flex">
                                <div class="u-flex u-flexColumn u-sizeFullWidth">
                                    <div class="u-flex u-flexItemGrow u-flexMiddle">
                                        <div class="c-richlist-lineOne c-richlist-lineOne--bold u-textTruncate u-flexItemGrow">Frosted Flakes</div>
                                    </div>
                                </div>
                            </div>
                            <div class="c-richlist-item c-button u-flex">
                                <div class="u-flex u-flexColumn u-sizeFullWidth">
                                    <div class="u-flex u-flexItemGrow u-flexMiddle">
                                        <div class="c-richlist-lineOne c-richlist-lineOne--bold u-textTruncate u-flexItemGrow">Honey Bunches of Oats</div>
                                    </div>
                                </div>
                            </div>
                            <div class="c-richlist-item c-button u-flex">
                                <div class="u-flex u-flexColumn u-sizeFullWidth">
                                    <div class="u-flex u-flexItemGrow u-flexMiddle">
                                        <div class="c-richlist-lineOne c-richlist-lineOne--bold u-textTruncate u-flexItemGrow">Cheerios</div>
                                    </div>
                                </div>
                            </div>
                            <div class="c-richlist-item c-button u-flex">
                                <div class="u-flex u-flexColumn u-sizeFullWidth">
                                    <div class="u-flex u-flexItemGrow u-flexMiddle">
                                        <div class="c-richlist-lineOne c-richlist-lineOne--bold u-textTruncate u-flexItemGrow">Cinnamon Toast Crunch</div>
                                    </div>
                                </div>
                            </div>
                            <div class="c-richlist-item c-button u-flex">
                                <div class="u-flex u-flexColumn u-sizeFullWidth">
                                    <div class="u-flex u-flexItemGrow u-flexMiddle">
                                        <div class="c-richlist-lineOne c-richlist-lineOne--bold u-textTruncate u-flexItemGrow">Special K</div>
                                    </div>
                                </div>
                            </div>
                            <div class="c-richlist-item c-button u-flex">
                                <div class="u-flex u-flexColumn u-sizeFullWidth">
                                    <div class="u-flex u-flexItemGrow u-flexMiddle">
                                        <div class="c-richlist-lineOne c-richlist-lineOne--bold u-textTruncate u-flexItemGrow">Frosted Mini Wheats</div>
                                    </div>
                                </div>
                            </div>
                            <div class="c-richlist-item c-button u-flex">
                                <div class="u-flex u-flexColumn u-sizeFullWidth">
                                    <div class="u-flex u-flexItemGrow u-flexMiddle">
                                        <div class="c-richlist-lineOne c-richlist-lineOne--bold u-textTruncate u-flexItemGrow">Lucky Charms</div>
                                    </div>
                                </div>
                            </div>
                            <div class="c-richlist-item c-button u-flex">
                                <div class="u-flex u-flexColumn u-sizeFullWidth">
                                    <div class="u-flex u-flexItemGrow u-flexMiddle">
                                        <div class="c-richlist-lineOne c-richlist-lineOne--bold u-textTruncate u-flexItemGrow">Froot Loops</div>
                                    </div>
                                </div>
                            </div>
                            <div class="c-richlist-item c-button u-flex">
                                <div class="u-flex u-flexColumn u-sizeFullWidth">
                                    <div class="u-flex u-flexItemGrow u-flexMiddle">
                                        <div class="c-richlist-lineOne c-richlist-lineOne--bold u-textTruncate u-flexItemGrow">Fruity Pebbles</div>
                                    </div>
                                </div>
                            </div>
                            <div class="c-richlist-item c-button u-flex">
                                <div class="u-flex u-flexColumn u-sizeFullWidth">
                                    <div class="u-flex u-flexItemGrow u-flexMiddle">
                                        <div class="c-richlist-lineOne c-richlist-lineOne--bold u-textTruncate u-flexItemGrow">Raisin Bran</div>
                                    </div>
                                </div>
                            </div>
                            <div class="c-richlist-item c-button u-flex">
                                <div class="u-flex u-flexColumn u-sizeFullWidth">
                                    <div class="u-flex u-flexItemGrow u-flexMiddle">
                                        <div class="c-richlist-lineOne c-richlist-lineOne--bold u-textTruncate u-flexItemGrow">Wheaties</div>
                                    </div>
                                </div>
                            </div>
                            <div class="c-richlist-item c-button u-flex">
                                <div class="u-flex u-flexColumn u-sizeFullWidth">
                                    <div class="u-flex u-flexItemGrow u-flexMiddle">
                                        <div class="c-richlist-lineOne c-richlist-lineOne--bold u-textTruncate u-flexItemGrow">Rice Krispies</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="c-content-footer c-content-footer--gray">
                        footer
                    </div>
                </div>
                <div class="c-content-innerMain">
                    <div class="c-content-secondaryHeadingContainer u-flex u-flexSpaced u-flexMiddle">
                        <div class="c-content-secondaryHeading u-textUpper u-epsilon">Cereal Details</div>
                    </div>
                    <div class="c-content-richListDetails c-richlist-rightContent u-mb0">
                        <div class="c-content-innerContainer c-content-containHeight">
                            <div class="c-definitions">
                                <div class="c-definition">
                                    <div class="c-definition-term">Mascot</div>
                                    <div class="c-definition-value">A Bee</div>
                                </div>
                                <div class="c-definition">
                                    <div class="c-definition-term">Name</div>
                                    <div class="c-definition-value">Honey Nut Cheerios</div>
                                </div>
                                <div class="c-definition">
                                    <div class="c-definition-term">Year Introduced</div>
                                    <div class="c-definition-value">1979</div>
                                </div>
                                <div class="c-definition">
                                    <div class="c-definition-term">Producer</div>
                                    <div class="c-definition-value">General Mills</div>
                                </div>
                                <div class="c-definition">
                                    <div class="c-definition-term">Tagline(s)</div>
                                    <div class="c-definition-value">It's a honey of an O. (1979–2004; 2014–present)</div>
                                    <div class="c-definition-value">It's Honey Nut Cheerios! (1979–1992; 2000–2004; 2014–present)</div>
                                    <div class="c-definition-value">It's Irrezzzzistable! (1992–1993)</div>
                                    <div class="c-definition-value">Race for the taste! (1993–1995)</div>
                                    <div class="c-definition-value">Little O, Big Taste! (1995–1999)</div>
                                    <div class="c-definition-value">Nobody can say "No" to Honey Nut Cheerios. (1995–2004)</div>
                                    <div class="c-definition-value">From the hive that's nuts about honey! (2004–2008)</div>
                                    <div class="c-definition-value">Bee happy, Bee healthy! (2004–2013)</div>
                                    <div class="c-definition-value">Must Be the Honey. (2013–present, based on Nelly's "Ride wit Me")</div>
                                </div>
                            </div>
                            <br/><br/>
                            Historically, Honey Nut Cheerios has participated in much the same promotional advertising
                            as the original brand, while collaborating with the field of NASCAR and especially driver
                            Bill Lester, in promoting healthy diets. In 1985, Baskin-Robbins introduced an ice cream
                            flavor based on the cereal called Honey Nut Crunch. Promotional tie-ins included gift
                            certificates in cereal boxes and special Honey Nut Crunch sundaes in stores.
                            <br/><br/>
                            General Mills has been active in the conservation of bees since 2011; In 2011, the company
                            began investing in the Xerces Society to help promote biodiversity and pollinator conservation.
                            In March 2017, General Mills announced the Buzz Bee image had been removed from boxes of
                            Honey Nut Cheerios. Images of the new box showed a white empty space where Buzz Bee used to
                            be. Below the image of the bowl of cereal, a plea to "Help Bring Back The Bees" was added.
                            This was to raise awareness of pollinator decline. In the announcement, General Mills made
                            note that 30% of ingredients they use depend on pollinators. As a part of this campaign,
                            General Mills also plans to expand their pollinator habitat to 3,300 acres.
                            <br/><br/>
                            This campaign has struck controversy in some environmental communities. Kathryn Turner, an
                            ecologist, commented that the packages of seeds contain species that are invasive to some
                            geographic locations, and urges individuals to become more educated before planting the
                            seeds.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Using contain height

The contain height variation, along with containHeight elements, can be used to maintain the available height for children markup.

HTML

<div class="t-content" style="height: 600px;">
    <div class="c-content c-content--containHeight">
        <inv-breadcrumbs breadcrumbs="[{label: 'Breadcrumb'}]"></inv-breadcrumbs>
        <div class="c-content-container c-content-containHeight">
            <div class="c-masthead">
                <div class="c-heading">
                    <div class="c-heading-titleArea">
                        <div class="c-heading-label">A title goes here.</div>
                    </div>
                </div>
            </div>
            <div class="c-filterBar">
            </div>
            <div class="c-content-tableContainer c-content-containHeight">
                <div class="c-datatable">
                </div>
            </div>
        </div>
    </div>
</div>

Using contain height with inner navigation

The contain height variation, along with containHeight elements and inner navigation, can be used to maintain the available height for children markup.

Jonathan Raimer

jonathan@notemail.com

(555) 555-5555)

English (United States)

Pages

Example Route Active Route

Help

Devices

Content goes here

HTML

<div class="t-content" style="height: 600px;">
    <div class="c-content c-content--containHeight">
        <inv-breadcrumbs breadcrumbs="[{label: 'Breadcrumb'}]"></inv-breadcrumbs>
        <div class="c-content c-content--flush c-content--flexible">
            <div class="c-content-innerNavigation c-contentNavigation">
                <div class="c-contentNavigation-leftNav">
                    <div class="c-navGroup c-contentNavigation-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-contentNavigation-navGroup">
                        <inv-action-nav-group label="Quick Actions" initially-visible="3" nav-items="ContentArea.navItems"></inv-action-nav-group>
                    </div>
                    <div class="c-contentNavigation-navGroup c-navGroup">
                        <div class="c-navGroup-subtitle">
                            Pages
                        </div>
                        <div class="c-contentNavigation-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-contentNavigation-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>
            <div class="c-content-container c-content-containHeight">
                <div class="c-content-headingContainer">
                    <div class="c-heading">
                        <div class="c-heading-titleArea">
                            <div class="c-heading-label">Devices</div>
                        </div>
                        <div class="c-heading-buttons">
                            <div class="c-button c-button--icon">
                                <inv-icon glyph="'plus'"></inv-icon>
                                <div class="c-button-text u-ml">Register New Device</div>
                            </div>
                            <div class="c-divider"></div>
                            <div class="c-openNewWindow">
                                <inv-icon glyph="'pop-out'"></inv-icon>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="c-content-innerContainer c-content-containHeight">
                    Content goes here
                </div>
            </div>
        </div>
    </div>
</div>