Sign In

See example: Sign In

Note, this requires sso-image.jpg and the path is static/images/sso-image.jpg.

The favicon is here: favicon.png and the path is static/favicon.png.

The ad on the right is supposed to overflow the boundary of the underlying box and it disappears when the screen size is below 1151 pixels.

Single Column Login

If you would like to use a login that doesn't have the second column (ad section) just add single-column as a class to the section tag.

Sign In Component

Modular install (In case you don't want to load all of CLUI.)

In your code add the @corelogic/clui/dist/css/components/fonts.css first, @corelogic/clui/dist/css/components/forms.css, and `@corelogic/clui/dist/css/components/footer.css files from your npm repository.

<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>CoreLogic Login</title>
    <link rel="stylesheet" href="css/corelogic-ui.css"/>
    <link rel="shortcut icon" href="static/favicon.png"/>
</head>
<style>
    body {
        position: relative;
        margin: 0 auto;
        max-width: 1090px;
    }

    .cl-row {
        margin: 0 auto;
        max-width: 100%;
        width: 100%;
    }

    .cl-row:before, .cl-row:after {
        content: " ";
        display: table;
    }

    .cl-row:after {
        clear: both;
    }

    .cl-row .cl-row {
        margin: 0 -0.9375em;
        max-width: none;
        width: auto;
    }

    .cl-column,
    .cl-columns {
        position: relative;
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
        float: left;
    }

    .cl-column + .cl-column:last-child,
    .cl-columns + .cl-columns:last-child {
        float: right;
    }

    .cl-column + .cl-column.end,
    .cl-columns + .cl-columns.end {
        float: left;
    }

    .offset-1 {
        padding-left: 8.33333% !important;
    }

    @media (min-width: 500px) and (max-width: 1151px) {
        .left-block {
            width: 100%;
        }

        .hide-small {
            display: none;
        }
    }

    @media (min-width: 1152px) {
        .cl-column,
        .left-block {
            width: 41.66667%;
        }

        .right-block {
            width: 58.33333%;
        }

        .single-column .hide-small {
            display: none;
        }

        .single-column .inner-block {
            max-width: 500px;
            margin: 0 auto 45px auto;
            padding: 30px 60px !important;
        }

        .single-column .inner-block .app-logo {
            text-align: center;
        }

        .single-column .left-block {
            width: 100%;
        }
    }

    #cl-header {
        padding: 60px 0 45px;
        text-align: center;
    }

    #cl-header #cl-logo {
        margin: 0 auto;
        display: block;
        width: 234px;
        height: 67px;
    }

    .inner-block {
        background: #fff;
        max-width: 1050px;
        padding: 30px 60px;
        margin-bottom: 45px;
        overflow: auto;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -ms-border-radius: 3px;
        border-radius: 3px;
        -webkit-box-shadow: 0px 0px 11px 2px rgba(0, 0, 0, 0.07);
        -moz-box-shadow: 0px 0px 11px 2px rgba(0, 0, 0, 0.07);
        box-shadow: 0px 0px 11px 2px rgba(0, 0, 0, 0.07);
    }

    .inner-block .app-logo {
        margin: 15px 0 30px 0;
        font-size: 30px;
        line-height: 36px;
    }

    @media (max-width: 499px) {
        .inner-block {
            padding: 15px;
            margin-bottom: 30px;
        }

        .inner-block .app-logo {
            text-align: center;
        }
    }

    @media (min-width: 500px) and (max-width: 1151px) {
        .inner-block {
            max-width: 500px;
            margin: 0 auto 45px auto;
            padding: 30px 60px !important;
        }
    }

    .inner-block .left-block {
        max-width: 400px;
    }

    .cl-image {
        position: absolute;
        top: 40px;
        right: -15px;
        background: transparent !important;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -ms-border-radius: 3px;
        border-radius: 3px;
        overflow: hidden;
        -webkit-box-shadow: 0 6px 21px 5px rgba(0, 0, 0, 0.15);
        -moz-box-shadow: 0 6px 21px 5px rgba(0, 0, 0, 0.15);
        box-shadow: 0 6px 21px 5px rgba(0, 0, 0, 0.15);
    }

    .cl-image img {
        background: transparent !important;
    }

    @media (max-width: 499px) {
        .hide-mobile, .hide-small {
            display: none;
        } {
        display: none;
    }
        #cl-header {
            padding: 30px 0;
        }

        #cl-header #cl-logo {
            width: auto;
            height: auto;
        }

        #cl-logo img {
            width: 180px;
        }
    }

    .link {
        margin-left: 15px;
        font-size: 13px;
        text-transform: uppercase;
        color: #127eaf;
    }

    .forgot {
        font-size: 15px;
    }

    #login-container {
        margin-left: 20px;
    }

    .cl-form-login label {
        margin-bottom: 9px;
    }

    .cl-form-login label span {
        float: right;
    }

    .cl-learnmore {
        text-align: center;
        margin-bottom: 30px;
    }

    .cl-learnmore span {
        margin-right: 15px;
    }
</style>
<body>

<header class="cl-row" id="cl-header">
    <div class="cl-columns text-center">
        <a href="" id="cl-logo"><img src="data:image/png;base64,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"/></a>
    </div>
</header>

<section class="cl-row">
    <div class="cl-columns">
        <div class="inner-block">
            <div class="cl-row">
                <div class="left-block cl-columns">
                    <h1 class="app-logo">Agent Achieve</h1>
                    <br>
                    <form action="" method="post" class="cl-form-login">
                        <div class="form-group">
                            <label for="login-email">Email / Username</label>
                            <input id="login-email" type="text" class="form-control" placeholder="">
                        </div>
                        <div class="form-group">
                            <label for="login-password">Password</label><span
                                class="pull-right"><a href="#" class="forgot">Forgot Password?</a></span>
                            <input id="login-password" type="text" class="form-control" placeholder="">
                        </div>
                        <div class="form-group">
                            <input type="submit" value="Sign In" class="btn btn-primary btn-lg btn-block">
                        </div>
                    </form>
                </div>
            </div>
            <div class="cl-row hide-mobile">
                <div class="left-block cl-columns">
                    <p>Need help? Call our toll-free number at <br/><strong><span>(866)781-8321</span></strong> or send
                        us an <a href="">email</a></p>
                </div>
                <div class="right-block offset-1 cl-columns hide-small">
                    <p><strong>Brokers</strong> - Learn why leading brokerages across the U.S. are making the switch
                        to Agent Achieve.
                        <a href="#" class="link">Show Me&nbsp;&nbsp;<i class="fa fa-chevron-right"></i></a></p>
                </div>
            </div>
            <div class="cl-image hide-small">
                <a href="#"><img src="static/images/sso-image.jpg"/></a>
            </div>
        </div>
        <div class="cl-learnmore">
            <span> <b>Not a Customer?</b></span>
            <button class="btn btn-default">Learn More</button>
        </div>
    </div>
</section>

<footer>
    <div>
        2017 Copyright CoreLogic. All Rights Reserved.
    </div>
    <div>
        <ol>
            <li><a href="#">About Our Company</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">FAQs</a></li>
            <li><a href="#">Sitemap</a></li>
            <li><a href="#">Terms of Use</a></li>
            <li><a href="#">Policies</a></li>
        </ol>
    </div>
</footer>

</body>
</html>