Facets UX Style Guide

<div id="pcoded" class="pcoded iscollapsed" style="top: 100px !important" nav-type="st2" theme-layout="vertical" vertical-placement="left" vertical-layout="wide" pcoded-device-type="desktop" vertical-nav-type="expanded" vertical-effect="shrink" vnavigation-view="view1" fream-type="theme1" layout-type="light"> <div class="pcoded-overlay-box"></div> <div class="pcoded-container navbar-wrapper" style="width: 100%; position: absolute; margin-top: 28px !important; background-color: none;" img=""> <nav class="navbar header-navbar pcoded-header iscollapsed" header-theme="themelight1" pcoded-header-position="absolute" style="top: 10px; height: 50px !important; position: absolute !important; background-color:none;"> <div class="navbar-wrapper"> <div class="navbar-logo __web-inspector-hide-shortcut__" logo-theme="theme6"> <a href="#" style="font-size: 16px !important; padding-right: 108px; font-family: sans-serif; text-transform: capitalize;">Navigation</a> <a href="" title="Close"><i class="fas fa-toggle-off"></i></a> <a class="mobile-options waves-effect waves-light"> <i class="feather icon-more-horizontal"></i></a></div> </div> </nav> <div class="pcoded-main-container" style="margin-top: 50px; top: 109px; background-color: #ffffff;"> <div class="pcoded-wrapper"> <nav class="pcoded-navbar" navbar-theme="theme1" active-item-theme="theme1" sub-item-theme="theme2" active-item-style="style0" pcoded-navbar-position="absolute" style="top: -234px; position: absolute;"> <div class="nav-list"> <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: 100%; height: 100%;"> <div class="pcoded-inner-navbar main-menu" style="overflow: hidden; width: 100%; height: 100%; font-family: sans-serif;"> <ul class="pcoded-item pcoded-left-item" item-border="true" item-border-style="solid" subitem-border="false" style="top: 130px !important"> <li class="pcoded-hasmenu" dropdown-icon="style1" subitem-icon="style1"> <a href="javascript:void(0)" class="waves-effect waves-dark" alt="Summary" title="Summary"> <span class="pcoded-micon"></span> <span class="pcoded-mtext">Level 1</span><i style= "padding-left: 189px; position:absolute; padding-top:10px;" class="fa pull-right fa-chevron-down "> </i></a> </li> <li class="pcoded-hasmenu" dropdown-icon="style1" subitem-icon="style1"> <a href="javascript:void(0)" class="waves-effect waves-dark"alt="Member" title="Member"> <span class="pcoded-micon"></span> <span class="pcoded-mtext">Level 2</span><i style= "padding-left: 189px; position:absolute; padding-top:10px;" class="fa pull-right fa-chevron-down "> </i></a> <ul class="pcoded-submenu"> <li class=""> <a href="#" class="waves-effect waves-dark"alt="Enrollment Source" title="Enrollment Source"> <span class="pcoded-mtext">Empty Li Data</span></a></li> <li class=""> <a href="#" class="waves-effect waves-dark"alt="Medicaid" title="Medicaid"> <span class="pcoded-mtext">Empty Li Data</span></a></li> <li class=""> <a href="#" class="waves-effect waves-dark"alt="Subsidy Billing" title="Subsidy Billing"> <span class="pcoded-mtext">Empty Li Data</span></a></li> </ul> </li> <li class="pcoded-hasmenu" dropdown-icon="style1" subitem-icon="style1"> <a href="javascript:void(0)" class="waves-effect waves-dark"alt="Member" title="Member"> <span class="pcoded-micon"></span> <span class="pcoded-mtext">Level 3</span><i style= "padding-left: 189px; position:absolute; padding-top:10px;" class="fa pull-right fa-chevron-down "> </i></a> <ul class="pcoded-submenu"> <li class=""> <a href="#" class="waves-effect waves-dark"alt="Enrollment Source" title="Enrollment Source"> <span class="pcoded-mtext">Empty Li Data </span></a></li> <li class=""> <a href="#" class="waves-effect waves-dark"alt="Medicaid" title="Medicaid"> <span class="pcoded-mtext">Empty Li Data</span></a></li> <li class="pcoded-hasmenu pcoded-trigger" dropdown-icon="style1" subitem-icon="style1"> <a href="javascript:void(0)" class="waves-effect waves-dark" alt="Medicare" title="Medicare"> <span class="pcoded-mtext">Empty Li Data</span> <span style="float: right;"><i style="" class="fa pull-right fa-chevron-down "> </i></span></a> <ul class="pcoded-submenu" style="display: block;"> <li class=""> <a href="#" class="waves-effect waves-dark" style="color: #fff" alt="Medicare Events" title="Medicare Events"> <span class="pcoded-mtext">Empty Li Data</span></a></li> <li class=""> <a href="billing_360_new_left_nav_entity_definition.html" class="waves-effect waves-dark"alt="Medicare Facilitator" title="Medicare Facilitator"> <span class="pcoded-mtext">Empty Li Data</span></a></li> <li class=""> <a href="#" class="waves-effect waves-dark"alt="Medicare Interface" title="Medicare Interface"> <span class="pcoded-mtext">Empty Li Data</span></a></li> <li class=""> <a href="billing_360_new_left_nav_entity_messages.html" class="waves-effect waves-dark" alt="Medicare Retiree Subsidy" title="Medicare Retiree Subsidy"> <span class="pcoded-mtext">Empty Li Data</span></a></li> <li class=""><a href="billing_360_new_left_nav_payment_info.html" class="waves-effect waves-dark"alt="Medicare Verification" title="Medicare Verification"> <span class="pcoded-mtext">Empty Li Data</span></a></li> <li class=""> <a href="billing_360_new_left_nav_rebate_preferences.html" class="waves-effect waves-dark" alt="Medicare Carrier/ Intermediary" title="Medicare Carrier/ Intermediary" style=""> <span class="pcoded-mtext">Empty Li Data</span></a></li> </ul> </li> <li class=""> <a href="#" class="waves-effect waves-dark"alt="Subsidy Billing" title="Subsidy Billing"> <span class="pcoded-mtext">Empty Li Data</span></a></li> </ul> </li> </ul> </div> </div> </div> </nav> </div> </div> </div> </div>

Side Menu