Facets UX Style Guide

<div class="shell-navmenu"> <div class="panel panel-default col-xs-12 col-sm-12 col-md-12 col-lg-12 padding-horizontal-none text-primary" style="float: left; width: 100%"> <div class="panel-body"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td rowspan="2"><table border="0" cellspacing="0" cellpadding="0"> <tbody><tr> <td nowrap="nowrap" style="width: 200px" valign="top"><font face="Arial" style="font-size: 18px; " color="#808080"> Group ID:</font><font face="Arial" style="font-size: 18px; color: black; cursor: pointer" class="transferclaimid_an"> Rider<span style="position: relative; padding-bottom: 5px"> <span title="Transfer" id="bcd" class="fas fa-external-link-alt dropdown-toggle transferclaimid" data-toggle="dropdown" aria-hidden="true" style="cursor: pointer; color: #337ab7; font-size: 14px; padding-left: 5px"> </span> <ul class="dropdown-menu dropdown-menu-right" role="menu" style="left: 10px !important; top: 25px; width: 270px"> <li><a style="color: #000" href="">APTC Status Override</a></li> <li><a style="color: #000" href="">Billing Entity </a></li> <li><a style="color: #000" href="">Discretionary Billing Items</a></li> <li><a style="color: #000" href="">Group</a></li> <li><a style="color: #000" href="">Receipt History</a></li> </ul> </span></font></td> <td width="26"> </td> <td valign="top"><font face="Arial" style="font-size: 18px" color="#808080">Group Name</font><font face="Arial" style="font-size: 18px; " color="#808080">: </font><font face="Arial" style="font-size: 18px; color: black">Rider Corporation </font> <a href="#status_info" data-toggle="popover" data-trigger="focus" data-placement="bottom" data-popover-content="#status" data-original-title="" title=""><i class="fa fa-info-circle" title="Click to see more info" style="font-size: 16px;"></i></a> <div id="status" class="hidden"> <div class="popover-body"> <table border="0" cellspacing="0" cellpadding="0" style="float: left" width="250"> <tbody> <tr> <td width="10" valign="top"> </td> <td valign="top"> </td> <td width="10" valign="top"> </td> <td valign="top"> </td> <td width="10" valign="top"> </td> <td valign="top"> </td> <td width="10" valign="top"> </td> <td valign="top"> </td> <td width="10" valign="top"> </td> <td align="right" valign="top"><a href="#status"><i class="fa fa-times-circle" title="Close" style="font-size: 16px; cursor: hand !important"></i></a></td> </tr> <tr> <td colspan="10" valign="top" align="center"><strong> <font size="2">Address from Group</font></strong>   <a href=""><i class="far fa-edit" title="Edit"></i></a></td> </tr> <tr> <td colspan="10" valign="top" height="5"></td> </tr> <tr> <td valign="top"> </td> <td colspan="9" valign="top"><font size="2">1295 Monroe Ave</font></td> </tr> <tr> <td valign="top"> </td> <td colspan="9" valign="top"><font size="2">Jackson, WY 83001</font></td> </tr> <tr> <td valign="top"> </td> <td colspan="9" valign="top"><font size="2">Teton</font></td> </tr> <tr> <td valign="top"> </td> <td valign="top"> </td> <td valign="top"> </td> <td valign="top"> </td> <td valign="top"> </td> <td valign="top"> </td> <td valign="top"> </td> <td valign="top"> </td> <td valign="top"> </td> <td valign="top"> </td> </tr> </tbody> </table> </div> </div></td> </tr> </tbody></table> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td colspan="7" height="10"></td> </tr> <tr> <td valign="top"> </td> <td width="20"> </td> <td valign="top"> </td> <td width="20" valign="top"> </td> <td valign="top"> </td> <td width="20" valign="top"> </td> <td valign="top"> </td> <td width="20"> </td> <td valign="top"> </td> </tr> </tbody> </table></td> <td align="right"><div class="topright" style="padding-top:5px; cursor: pointer"> <a href=""><span title="Refresh" id="abc" class="glyphicon glyphicon-refresh" aria-hidden="true" style="color:#039bc9; padding: 10px"></span></a></div></td> </tr> <tr> <td align="right" valign="bottom"><a href="top_section_billing.html" title="View less info" style="cursor: pointer; padding-right: 5px"><i class="fa fa fa-chevron-up"></i></a></td> </tr> </tbody> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td valign="top" style="text-align: left"><table width="100%" border="0"> <tbody> <tr> <td colspan="4"><h4 style="box-sizing: border-box; font-family: sans-serif, Arial; font-weight: 500; line-height: 1.1; color: rgb(0, 0, 0); margin-top: 10px; margin-bottom: 10px; font-size: 12pt; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255)"><b>Current Billing Status</b></h4></td> </tr> <tr> <td colspan="4" style="height: 0px;"><hr style="word-spacing: 0; margin-top: 0px; margin-bottom: 5px; border-top-color: black !important; height: 2px"></td> </tr> </tbody> <tbody> <tr> <td width="20%" valign="bottom"><font color="#808080">Last Billed Date</font></td> <td width="20%" valign="bottom"><font color="#808080">Net Amount Due</font></td> <td width="20%" valign="bottom"><font color="#808080">Current Suspense</font></td> <td width="20%" valign="bottom"><font color="#808080">Processing Status</font></td> </tr> <tr> <td width="18%">05/01/2012 <a title=""><i class="fa fa-info-circle" title="Click to see more info" style="font-size: 16px; cursor: pointer"></i></a></td> <td width="18%">$120,799.30</td> <td width="18%">$0.00</td> <td width="100">Normal Billing <a title=""><i class="fa fa-info-circle" title="Click to see more info" style="font-size: 16px; cursor: pointer"></i></a></td> </tr> </tbody> <tbody> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td colspan="4"><h4 style="box-sizing: border-box; font-family: sans-serif, Arial; font-weight: 500; line-height: 1.1; color: rgb(0, 0, 0); margin-top: 10px; margin-bottom: 10px; font-size: 12pt; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255)"><b>Billing Eligibility Status</b></h4></td> </tr> <tr> <td colspan="4" style="height: 0px;"><hr style="word-spacing: 0; margin-top: 0px; margin-bottom: 5px; border-top-color: black !important; height: 2px"></td> </tr> <tr> <td valign="bottom" nowrap=""><font color="#808080" style="padding-right: 20px">Claim Eligibility Through Date</font></td> <td valign="bottom"><font color="#808080">APTC Extended Grace Period Through Date</font></td> <td valign="bottom"><font color="#808080"> Delinquency Auto Term Date</font></td> <td valign="bottom"><font color="#808080">APTC Auto Term Date</font></td> </tr> <tr> <td>03/31/2012</td> <td>--</td> <td>--</td> <td>--</td> </tr> </tbody> <tbody> </tbody> <tbody> <tr> <td colspan="4" height="20"></td> </tr> </tbody> </table></td> <td valign="top" style="width: 15px"> </td> <td valign="top" style="width: 2px; background-color: #CCC" width="2"></td> <td valign="top" style="width: 15px"> </td> <td valign="top" width="250"><table border="0"> <tbody> <tr> <td><h4 style="box-sizing: border-box; font-family: sans-serif, Arial; font-weight: 500; line-height: 1.1; color: rgb(0, 0, 0); margin-top: 10px; margin-bottom: 10px; font-size: 12pt; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255)"><b>Billing Processing Status</b></h4></td> </tr> <tr> <td style="height: 0px;"><hr style="word-spacing: 0; margin-top: 0px; margin-bottom: 5px; border-top-color: black !important; height: 2px"></td> </tr> </tbody> <tbody> <tr> <td><font color="#808080">Last Billing Run Date</font></td> </tr> <tr> <td>04/30/2012</td> </tr> <tr> <td> </td> </tr> <tr> <td><font color="#808080">Status Description</font></td> </tr> <tr> <td><span style="color: #28a745 !important; text-decoration: none"> Entity was billed successfully with no rating errors</span></td> </tr> <tr> <td> </td> </tr> <tr> <td><font color="#808080">Next Scheduled Bill Date</font></td> </tr> <tr> <td>05/11/2021 <a title=""><i class="fa fa-info-circle" title="Click to see more info" style="font-size: 16px; cursor: pointer"></i></a></td> </tr> </tbody> </table></td> </tr> </tbody> </table></td> </tr> </tbody> </table> </div> </div> </div>

Top Panel