Heading

Default

The heading component is usable by most details pages in Invision. It provides a framework for rendering a main heading line, with primary label and action buttons.

HTML

<div class="t-content c-content">
    <div class="c-masthead">
        <div class="c-heading">
            <div class="c-heading-titleArea">
                <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-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>

Subheading

The heading component can additionally be combined with a subheading to provide a secondary set of related information for the user.

HTML

<div class="t-content c-content">
    <div class="c-masthead">
        <div class="c-heading">
            <div class="c-heading-label">Transaction Activity</div>
            <div class="c-heading-buttons">
                <div class="c-button c-button--icon">
                    <inv-icon glyph="'cloud-download'"></inv-icon>
                    <div class="c-buttonText">Export</div>
                </div>
                <div class="c-button c-button--icon">
                    <inv-icon glyph="'clock-o'"></inv-icon>
                    <div class="c-buttonText">Schedule</div>
                </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-buttonText">More</div>
                </div>
            </div>
        </div>
        <div class="c-subheading u-pt0">
            <div class="c-subheading-label">Created by John Smith</div>
            <div class="c-subheading-label">Public</div>
            <div class="c-subheading-label">Last Updated 10/22/2016</div>
        </div>
    </div>
</div>

With Back Button

Some headings require the presence of a back button to the left of the title.

HTML

<div class="t-content c-content">
    <div class="c-masthead">
        <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-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>

Secondary Header

This variation on the heading component provides a secondary heading with a solid gray background and different font properties.

Transaction Activity

HTML

<div class="t-content">
    <div class="c-heading c-heading--secondary">
        <div class="c-heading-titleArea">
            <div class="c-heading-label">Transaction Activity</div>
        </div>
    </div>
</div>

Secondary Header with Search Input and Submit Button

This variation on the heading component provides a secondary heading with a solid gray background and different font properties. It also includes the an input as well as a submit button.

HTML

<div class="t-content c-content">
    <div class="c-content-secondaryHeadingContainer u-flex u-flexStretch">
        <div class="c-generalForm">
            <input type="text" placeholder="Search for Greatness">
        </div>
        <button class="c-button c-button--primary" type="submit">Apply</button>
    </div>
</div>

Concise heading

This variation on the heading component removes additional margin and height to minimize its real estate footprint.

HTML

<div class="t-content c-content">
    <div class="c-masthead c-masthead--concise">
        <div class="c-heading">
            <div class="c-heading-titleArea">
                <div class="c-heading-label">Transaction Activity: <span class="c-heading-label--highlight">Activity Name</span></div>
            </div>
        </div>
    </div>
</div>

Concise Buttons

In the event of buttons being simply icons, concise buttons can be used within the buttons collection in the heading.

HTML

<div class="t-content c-content">
    <div class="c-masthead">
        <div class="c-heading">
            <div class="c-heading-titleArea">
                <div class="c-heading-label">Transaction Activity</div>
            </div>
            <div class="c-heading-buttons">
                <div class="c-button c-button--concise">
                    <inv-icon glyph="'pop-out'"></inv-icon>
                </div>
                <div class="c-button c-button--concise">
                    <inv-icon glyph="'clone'"></inv-icon>
                </div>
            </div>
        </div>
    </div>
</div>