Call To Action Empty State

Default

Empty states within the application often times need a message prompting the user to take a certain action. The call to action component encapsulates these concerns.

Welcome to Invision Customer Care

You do not have a customer loaded. Search or create a customer to begin.

HTML

<div class="t-content c-content">
    <div class="c-callToAction">
        <inv-icon class="c-callToAction-logo" glyph="'logo_customer_care'"></inv-icon>
        <div class="c-callToAction-label">Welcome to Invision Customer Care</div>
        <div class="c-callToAction-label c-callToAction-label--secondary">You do not have a customer loaded. Search or create a customer to begin.</div>
    </div>
</div>

With Link

Some calls to action will provide the user with the ability to take an action right from the component.

There are no cases to display

Start by creating one now.

HTML

<div class="t-content c-content">
    <div class="c-callToAction">
        <inv-icon class="c-callToAction-logo" glyph="'cases-lg'"></inv-icon>
        <div class="c-callToAction-label">There are no cases to display</div>
        <a class="c-callToAction-label c-callToAction-label--link">Start by creating one now.</a>
    </div>
</div>

Pluralization Issues

Some words do not have a plural form that coincides with the expected language for calls to action. In these cases, we update the standard message accordingly.

There is no inventory to display

Start by creating one now.

HTML

<div class="t-content c-content">
    <div class="c-callToAction">
        <inv-icon class="c-callToAction-logo" glyph="'cases-lg'"></inv-icon>
        <div class="c-callToAction-label">There is no inventory to display</div>
        <a class="c-callToAction-label c-callToAction-label--link">Start by creating one now.</a>
    </div>
</div>

With Error

Some calls to action will show the user an error state icon.

There was an error retrieving cases

HTML

<div class="t-content c-content">
    <div class="c-callToAction is-error">
        <inv-icon class="c-callToAction-logo" glyph="'treatment'"></inv-icon>
        <div class="c-callToAction-label">There was an error retrieving cases</div>
    </div>
</div>

Small

Small version of Default.

Welcome to Invision Customer Care

You do not have a customer loaded. Search or create a customer to begin.

HTML

<div class="t-content c-content">
    <div class="c-callToAction c-callToAction--small">
        <inv-icon class="c-callToAction-logo" glyph="'logo_customer_care'"></inv-icon>
        <div class="c-callToAction-label">Welcome to Invision Customer Care</div>
        <div class="c-callToAction-label c-callToAction-label--secondary">You do not have a customer loaded. Search or create a customer to begin.</div>
    </div>
</div>

Centered

An example showing the Call To Action being centered in a c-content container

Welcome to Invision Customer Care

You do not have a customer loaded. Search or create a customer to begin.

HTML

<div class="t-content c-content u-flexKeepHeight" style="height: 600px;">
    <div class="c-content-container c-content-containHeight">
        <div class="c-content-main">
            <div class="c-content-innerMain">
                <div class="c-content-innerContainer">
                    <div class="c-callToAction u-sizeFull ">
                        <inv-icon class="c-callToAction-logo" glyph="'logo_customer_care'"></inv-icon>
                        <div class="c-callToAction-label">Welcome to Invision Customer Care</div>
                        <div class="c-callToAction-label c-callToAction-label--secondary">You do not have a customer loaded. Search or create a customer to begin.</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>