RAUL UI Library

Style Guide

|
v2.82.9
RP
RP
Log Out
Dark Navigation:
Shopping

Cart:

Check with your designers to help you design this section

Custom Link In More Context Home Help Settings

Shell

html
<header id="raul-header" class="raul-header"> <i id="raul-header-menu-button" class="raul-header-menu-button fa fa-bars"></i> <div id="raul-header-logo" class="raul-header-logo"> <img id="raul-header-logo-mobile" class="raul-header-logo-mobile" src="https://cdn.realpage.com/images/rp-logo-dots.svg" alt="RealPage Inc. Logo" /> </div> <div id="raul-header-title" class="raul-header-title has-sub-info"> <h1 id="raul-header-product" class="raul-header-product">Product Name</h1> <h2 id="raul-header-company" class="raul-header-company d-none d-sm-inline-block" title="Acme Property Management Company" > Acme Property Management Company </h2> <span id="raul-header-divider" class="raul-header-divider d-none d-sm-inline-block">|</span> <div id="raul-header-properties" class="raul-header-properties">The Village</div> </div> <div id="raul-header-user" class="raul-header-user d-none d-sm-block"> <div id="raul-header-user-info" class="raul-header-user-info d-none d-md-inline-flex" > <p id="raul-header-user-handle" class="raul-header-user-handle d-none d-md-block m-0"> John W Smith </p> <p id="raul-header-user-title" class="raul-header-user-title d-none d-md-block m-0"> Leasing Agent </p> </div> <div id="raul-header-user-avatar" class="raul-header-user-avatar"></div> <i id="raul-header-user-angle" class="raul-header-user-angle fa fa-angle-down" aria-hidden="true" ></i> </div> <div id="raul-header-more" class="raul-header-more d-xl-none"> <i id="raul-header-more-icon" class="raul-header-more-icon fa fa-ellipsis-v"></i> </div> <div id="raul-header-icon-wrap" class="unified-navbar"> <div class="unified-navbar-item"> <a href="#home"> <i id="raul-header-home" class="raul-header-home fa fa-home d-none d-xl-inline-block"></i> </a> </div> <div class="unified-navbar-item"> <a href="#switcher"> <i id="raul-header-app-switcher" class="raul-header-app-switcher fa fa-th"></i> </a> </div> <div class="unified-navbar-item"> <a href="#help"> <i id="raul-header-help" class="raul-header-help fa fa-question-circle d-none d-xl-inline-block" ></i> </a> </div> <div class="unified-navbar-item"> <a href="#settings"> <i id="raul-header-settings" class="raul-header-custom-icon fa fa-cog d-none d-xl-inline-block" ></i> </a> </div> <div class="unified-navbar-item"> <a href="#shopping"> <i id="raul-header-shopping" class="raul-header-shopping fa fa-shopping-cart d-none d-xl-inline-block" data-badge="2" ></i> </a> </div> <div class="unified-navbar-item"> <a href="#notifications"> <i id="raul-header-notifications" class="raul-header-notifications fa fa-bell" data-badge="20" ></i> </a> </div> </div> <div id="raul-header-search" class="raul-header-search d-none d-lg-block"> <input id="raul-header-search-input" class="raul-header-search-input" placeholder="Search"> <i id="raul-header-search-icon" class="raul-header-search-icon fa fa-search"></i> </div> <div id="raul-header-search-mobile" class="raul-header-search-mobile d-lg-none"> <input id="raul-header-search-input-mobile" class="raul-header-search-input-mobile" placeholder="Search" > <i id="raul-header-search-icon-mobile" class="raul-header-search-icon-mobile fa fa-search"></i> </div> </header> <div id="raul-header-more-context" class="raul-header-more-context d-xl-none"> <div id="raul-header-more-context-inner" class="raul-header-more-context-inner"> <div class="raul-header-user clearfix d-sm-none"> <div class="raul-header-user-avatar"></div> <div class="raul-header-user-info"> <p class="raul-header-user-handle m-0">John Smith</p> <p class="raul-header-user-title m-0">Leasing Agent</p> </div> <i class="raul-header-user-angle fa fa-angle-down" aria-hidden="true"></i> </div> <a class="raul-header-context-home" href="#home"> <i class="raul-header-home fa fa-home"></i> <span>Home</span> </a> <a class="raul-header-context-help" href="#help"> <i class="raul-header-help fa fa-question-circle"></i> <span>Help</span> </a> <a class="raul-header-context-custom" href="#settings"> <i class="raul-header-custom-icon fa fa-cog"></i> <span>Settings</span> </a> <a class="raul-header-context-shopping" href="#shopping"> <i class="raul-header-shopping fa fa-shopping-cart" data-badge="2"></i> <span>Shopping Card <span class="badge badge-pill badge-default">2</span></span> </a> </div> </div> <!-- User Context --> <div id="raul-user-context" class="raul-user-context">User Context</div> <!-- Notifications Context --> <div id="raul-notifications-context" style="display: none;" class="raul-notifications-context background-charcoal-10 p-3" > Place Notifications Context Here </div> <!-- Shopping Context --> <div id="raul-shopping-context" style="display: none;" class="raul-shopping-context background-charcoal-10 p-3" > Place Shopping Context Here </div> <nav id="raul-left-navigation" class="raul-left-navigation raul-left-navigation-light"> <ul id="raul-left-navigation-items" class="raul-left-navigation-items"> <li> <a class="raul-left-navigation-item no-subitems" href="#"> <i class="raul-left-navigation-item-icon fa fa-home"></i> <span class="raul-left-navigation-item-display">Home</span> </a> </li> <li> <span class="raul-left-navigation-item has-subitems"> <i class="raul-left-navigation-item-arrow fa fa-angle-down"></i> <i class="raul-left-navigation-item-icon fa fa-university"></i> <span class="raul-left-navigation-item-display">Company</span> </span> <ul class="raul-left-navigation-subitems"> <li> <a class="raul-left-navigation-subitem" href="#"> <span class="raul-left-navigation-item-display">Company Search</span> </a> </li> <li> <a class="raul-left-navigation-subitem" href="#"> <span class="raul-left-navigation-item-display">Company Details</span> </a> </li> </ul> </li> <li> <span class="raul-left-navigation-item has-subitems active selected"> <i class="raul-left-navigation-item-arrow fa fa-angle-down arrow-up"></i> <i class="raul-left-navigation-item-icon fa fa-building"></i> <span class="raul-left-navigation-item-display">Properties</span> </span> <ul class="raul-left-navigation-subitems subitems-open"> <li> <span class="raul-left-navigation-subitem has-subitems active" href="/item/2.1"> <i class="raul-left-navigation-item-arrow fa fa-angle-down arrow-up"></i> <span class="raul-left-navigation-item-display">Level 2 Sub Navigation Item</span> </span> <ul class="raul-left-navigation-subitems subitems-open"> <li> <a class="raul-left-navigation-subitem active" href="#"> <span class="raul-left-navigation-item-display"> Level 3 Sub Navigation Item (Active) </span> </a> </li> <li> <span class="raul-left-navigation-subitem has-subitems" href="/item/2.2"> <i class="raul-left-navigation-item-arrow fa fa-angle-down"></i> <span class="raul-left-navigation-item-display"> Level 3 Sub Navigation Item </span> </span> <ul class="raul-left-navigation-subitems"> <li> <span class="raul-left-navigation-subitem has-subitems" href="/item/2.2"> <i class="raul-left-navigation-item-arrow fa fa-angle-down"></i> <span class="raul-left-navigation-item-display"> Level 4 Sub Navigation Item </span> </span> <ul class="raul-left-navigation-subitems"> <li> <a class="raul-left-navigation-subitem" href="#"> <span class="raul-left-navigation-item-display"> Level 5 Sub Navigation Item </span> </a> </li> <li> <span class="raul-left-navigation-subitem has-subitems" href="/item/2.2"> <i class="raul-left-navigation-item-arrow fa fa-angle-down"></i> <span class="raul-left-navigation-item-display"> Level 5 Sub Navigation Item </span> </span> <ul class="raul-left-navigation-subitems"> <li> <a class="raul-left-navigation-subitem" href="#"> <span class="raul-left-navigation-item-display"> Level 6 Sub Navigation Item </span> </a> </li> </ul> </li> </ul> </li> <li> <a class="raul-left-navigation-subitem" href="#"> <span class="raul-left-navigation-item-display"> Level 4 Sub Navigation Item </span> </a> </li> </ul> </li> </ul> </li> <li> <a class="raul-left-navigation-subitem" href="#"> <span class="raul-left-navigation-item-display">Level 2 Sub Navigation Item</span> </a> </li> </ul> </li> <li> <a class="raul-left-navigation-item no-subitems" href="#"> <i class="raul-left-navigation-item-icon fa fa-th"></i> <span class="raul-left-navigation-item-display">Products</span> </a> </li> <li> <a class="raul-left-navigation-item no-subitems" href="#"> <i class="raul-left-navigation-item-icon fa fa-users"></i> <span class="raul-left-navigation-item-display">People</span> </a> </li> <li> <a class="raul-left-navigation-item no-subitems" href="#"> <i class="raul-left-navigation-item-icon fa fa-key"></i> <span class="raul-left-navigation-item-display">Roles &amp; Rights</span> </a> </li> <li> <a class="raul-left-navigation-item no-subitems" href="#"> <i class="raul-left-navigation-item-icon fa fa-cog"></i> <span class="raul-left-navigation-item-display">Settings</span> </a> </li> </ul> </nav> <header id="raul-page-header" class="raul-page-header"> <h2 id="raul-page-header-page" class="raul-page-header-page">Page Header</h2> <div id="raul-page-header-breadcrumbs" class="raul-page-header-breadcrumbs"> <div id="raul-page-header-breadcrumbs-dropdown" class="raul-page-header-breadcrumbs-dropdown d-md-none" > <a class="raul-page-header-breadcrumbs-dropdown-breadcrumb" href="http://www.realpage.com"> RAUL </a> <a class="raul-page-header-breadcrumbs-dropdown-breadcrumb" href="http://www.realpage.com"> Component </a> </div> <i id="raul-page-header-breadcrumbs-back" class="fa fa-angle-left d-inline-block d-md-none"></i> <a class="raul-page-header-breadcrumb hidden-sm-down" href="http://www.realpage.com">RAUL</a> <span class="hidden-sm-down"> / </span> <a class="raul-page-header-breadcrumb hidden-sm-down" href="http://www.realpage.com"> Component </a> <span class="hidden-sm-down"> / </span> <span class="raul-page-header-breadcrumb"><strong>Page Header</strong></span> </div> </header>
Open demo in full screen
Custom elements are in alpha.
html
<ui-shell product-name="RAUL UI Library" company-name="Styleguide" property-name="v2" user-name="Logged In User" user-title="Logged In User Role" help-link="#help" home-link="#home" logout-link="#logout" settings-link="#settings" user-settings-link="#user-settings" notifications-link="" notifications-count="5" shopping-link="" shopping-cart-count="5" show-app-switcher show-help-link show-home-link show-notifications show-settings-link show-shopping show-search domain="Shell" page="Omnibar" page-content-id="omnibar" ></ui-shell>
Open demo in full screen

Where to go from here?

Page Header