Check with your designers to help you design this section
Check with your designers to help you design this section
<div class="raul-login-container ">
<form class="raul-login-form" role="form" action="">
<div class="form-group">
<label for="username">Username</label>
<div>
<input id="username" type="text" class="form-control" name="username" required>
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<div>
<input id="password" type="text" class="form-control" name="password" required>
</div>
</div>
<div class="form-group clearfix mb-3">
<div class="raul-login-remember">
<label class="clearfix">
<input type="checkbox" name="remember">
<div class="raul-login-checkbox-wrap">
<i class="fa fa-check-square" aria-hidden="true"></i>
</div>
<span>Remember Me</span>
</label>
</div>
<div class="raul-login-forgot-pass">
<a href="#">
Forgot Password?
</a>
</div>
</div>
<div class="form-group">
<button type="submit" class="button button-primary button-block">
Login
</button>
<div class="rpup-login rpup-login-full">
<div class="rpup-question">Already using Unified Login?</div>
<a href="https://my.realpage.com" class="rpup-button raul-radius btn-block">
RealPage Unified Login
</a>
</div>
</div>
</form>
</div>
<div class="raul-login-container raul-login-no-logo">
<form class="raul-login-form" role="form" action="">
<div class="form-group">
<label for="username">Username</label>
<div>
<input id="username" type="text" class="form-control" name="username" required>
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<div>
<input id="password" type="text" class="form-control" name="password" required>
</div>
</div>
<div class="form-group clearfix mb-3">
<div class="raul-login-remember">
<label class="clearfix">
<input type="checkbox" name="remember">
<div class="raul-login-checkbox-wrap">
<i class="fa fa-check-square" aria-hidden="true"></i>
</div>
<span>Remember Me</span>
</label>
</div>
<div class="raul-login-forgot-pass">
<a href="#">
Forgot Password?
</a>
</div>
</div>
<div class="form-group">
<button type="submit" class="button button-primary button-block">
Login
</button>
<div class="rpup-login rpup-login-full">
<div class="rpup-question">Already using Unified Login?</div>
<a href="https://my.realpage.com" class="rpup-button raul-radius btn-block">
RealPage Unified Login
</a>
</div>
</div>
</form>
</div>
Once you've begun transitioning users over to RealPage Unified Platform, please add this Unified Login button to your product login.
We've tried to anticipate product layout needs. If needed, you can adjust the alignment of the question or button, but please do not change the wording or design.
.rpup-login)<div class="rpup-login">
<div class="rpup-question">
Already using Unified Login?
</div>
<a
href="https://my.realpage.com"
class="rpup-button">
RealPage Unified Login
</a>
</div>
.rpup-login-full)<div class="rpup-login rpup-login-full">
<div class="rpup-question">
Already using Unified Login?
</div>
<a
href="https://my.realpage.com"
class="rpup-button">
RealPage Unified Login
</a>
</div>
.rpup-login.rpup-login-left)<div class="rpup-login rpup-login-left">
<div class="rpup-question">
Already using Unified Login?
</div>
<a
href="https://my.realpage.com"
class="rpup-button">
RealPage Unified Login
</a>
</div>
.rpup-login.rpup-login-right)<div class="rpup-login rpup-login-right">
<div class="rpup-question">
Already using Unified Login?
</div>
<a
href="https://my.realpage.com"
class="rpup-button">
RealPage Unified Login
</a>
</div>
Since most products have not implemented the RAUL style login, their button corners do not match the RAUL radiused buttons.
.rpup-button).rpup-button.raul-radius)You must include this directly in your project.
.rpup-login {
display: block;
margin-top: 4px;
text-align: center;
}
.rpup-login.rpup-login-right {
text-align: right;
}
.rpup-login.rpup-login-left {
text-align: left;
}
.rpup-login.rpup-login-full .rpup-button {
display: block;
}
.rpup-login-right .rpup-question {
display: inline-block;
}
.rpup-question {
display: block;
font-size: 12px;
line-height: 16px;
padding: 8px;
}
.rpup-button {
background: #f06000;
border-radius: 4px;
color: #fff;
display: inline-block;
flex: 0 0 auto;
font-size: 14px;
max-width: none;
padding: 5px 20px 5px 40px;
position: relative;
white-space:nowrap;
width: auto;
}
.rpup-button:hover {
background: #e05000;
color: #fff;
text-decoration: none;
}
.rpup-button::before {
background: url(https://cdn.realpage.com/images/rp-logo-dots-white.svg) no-repeat;
background-size: contain;
content: "";
display: inline-block;
height: 18px;
margin-left: -24px;
position: absolute;
top: 7px;
width: 18px;
}
.raul-radius {
border-radius: 100px;
}