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_expanded.html" title="View more info" style="cursor: pointer; padding-right: 5px"><i class="fa fa fa-chevron-down"></i></a></td> </tr> </tbody> </table> </div> </div> </div>

Top Panel