Custom App Style Guide

<!DOCTYPE HTML> <html> <head> <title>Custom App Style Guide - Helprace</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="//cdn.helprace.com/js/dist/css/front-20241119-0207-320-44346e629b.css" rel="stylesheet" /> <script type="text/javascript" src="//cdn.helprace.com/js/library/jquery/jquery-20241119-0207-320-44346e629b.js"></script> <script type="text/javascript" src="//cdn.helprace.com/js/library/tinymce/prism/prism-20241119-0207-320-44346e629b.js"></script>   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>   <link rel="stylesheet" href="https://cdn.rawgit.com/afeld/bootstrap-toc/v0.4.1/dist/bootstrap-toc.min.css">  <script src="https://cdn.rawgit.com/afeld/bootstrap-toc/v0.4.1/dist/bootstrap-toc.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.0.0/anchor.js" integrity="sha256-2zSrUH8hS3tKsm/8OtCk5ii8UhNZFHBpXewx/OizqXc=" crossorigin="anonymous"></script> <style> .style-guide-content { float: left; width: 75%; padding: 0 15px 20px 15px; } .style-guide-toc { float: right; width: 25%; padding: 33px 15px 20px 15px; } h1, h2, h3 { padding-top: 20px; padding-bottom: 9px; font-weight: normal; color: #666; margin-top: 0; } h1 { border-bottom: 1px solid #eee; } h4 { font-variant: small-caps; text-transform: lowercase; padding-top: 1em; font-size: 20px; display: none; } /* body { font-size: 14px; }*/ .user-app-sidebar { font-size: 12px; width: 263px; background-color: #f5f5f5; padding: 10px; margin-bottom: 20px; } .collapse { display: block; } .user-app-example { border: 1px solid #e7e7e7; margin: 0; border-top-left-radius: 2px; border-top-right-radius: 2px; padding: 15px; font-family: Arial, "Helvetica Neue", Helvetica, Geneva, sans-serif; width: 100%; } .user-app-example + pre { margin-top: 0; border-top: none; border-radius: 0 0 2px 2px; } .user-app-example>.table-responsive:last-child>.table, .user-app-example>.table:last-child, .user-app-example>.well:last-child, .user-app-example>blockquote:last-child, .user-app-example>ol:last-child, .user-app-example>p:last-child, .user-app-example>ul:last-child { margin-bottom: 0; } nav[data-toggle=toc] .nav>li>a { color: #149cb6; font-size: 15px; } nav[data-toggle=toc] .nav .nav>li>a { color: #149cb6; font-size: 14px; } nav[data-toggle=toc] .nav>.active:focus>a, nav[data-toggle=toc] .nav>.active:hover>a, nav[data-toggle=toc] .nav>.active>a { color: #0e6f82; border-left: 2px solid #0e6f82; } nav[data-toggle=toc] .nav .nav>.active:focus>a, nav[data-toggle=toc] .nav .nav>.active:hover>a, nav[data-toggle=toc] .nav .nav>.active>a { color: #0e6f82; } nav[data-toggle=toc] .nav>li>a:focus, nav[data-toggle=toc] .nav>li>a:hover { color: #0e6f82; border-left: 1px solid #0e6f82; } a.anchorjs-link { color: #a9bac3; text-decoration: none; } a.anchorjs-link:hover { color: #4a7c84; text-decoration: none; } </style> <script> document.addEventListener("DOMContentLoaded", function(event) { anchors.options.placement = 'left'; anchors.add('h1, h2, h3'); window.Prism.highlightAll(); }); $(function () { var currentHash = "#initial_hash" $(document).scroll(function () { $('.anchorjs-link').each(function () { var top = window.pageYOffset; var distance = top - $(this).offset().top; var hash = $(this).attr('href'); // 30 is an arbitrary padding choice, // if you want a precise check then use distance===0 if (distance < 30 && distance > -30 && currentHash != hash) { if(history.pushState) { history.pushState(null, null, hash); } else { window.location.hash = '#myhash'; } } }); }); }); function onUserExpanderClick (event) { event.preventDefault(); event.stopPropagation(); var target = jQuery(event.target); var block = target.parent(); if (block.is('.collapse')) { block.toggleClass('in'); } }; $( document ).ready(function() { $('.collapse').on('click', onUserExpanderClick); }); </script> </head> <body data-spy="scroll" data-target="#toc" style="max-width: 1000px; margin: 0 auto;" data-offset="50"> <div class="style-guide-toc"> <nav id="toc" data-toggle="toc" style="position: fixed;"></nav> </div> <div class="style-guide-content"> <div class="user-app"> <h1 data-toc-skip>Helprace Custom App Style Guide</h1> <p>This guide contains a reference of styles that you can use when creating Custom Apps in Helprace. <a href="https://support.helprace.com/i437">Learn more about building Custom Apps</a>.</p> <h1>Supported Tags</h1> <p>Supported tags:</p> <p><code><p>, <div>, <span>, <b>, <strong>, <i>, <em>, <s>, <u>, <small>, <mark>, <ul>, <ol>, <li>, <hr>, <a>, <time></code></p> <p>Supported tag attributes:</p> <p><code>color, src, border, width, height, style, href, alt, title, align, class, colspan, rowspan, rel, target, type, name, scheme, datetime, target, data-user-email</code></p> <p>Any other tags or attributes will be removed before they appear on the app sidebar in Helprace.</p> <h1>Typography</h1> <h2>Inline text elements</h2> <h3>Bold</h3> <p>Use <code><strong></code> or <code><b></code> for emphasizing a snippet of text with a heavier <code>font-weight</code>.<p> <div class="user-app-example"> <p>Here goes <strong>a bold text snippet</strong>.</p> </div> <pre class="language-html"><code class="language-html">Here goes <strong>a bold text snippet</strong>.</code></pre> <h3>Italic</h3> <p>Use <code><em></code> or <code><i></code> for emphasizing a snippet of text with italics.<p> <div class="user-app-example"> <p>Here goes <em>an italicized text snippet</em>.</p> </div> <pre class="language-html"><code class="language-html">Here goes <em>an italicized text snippet</em>.</code></pre> <h3>Strikethrough text</h3> <p>For indicating text that is no longer relevant use the <code><s></code> tag.<p> <div class="user-app-example"> <p><s>This line of text is meant to be treated as no longer accurate.</s></p> </div> <pre class="language-html"><code class="language-html"><s>This line of text is meant to be treated as no longer accurate.</s></code></pre> <h3>Underlined text</h3> <p>To underline text use the <code><u></code> tag.<p> <div class="user-app-example"> <p><u>This line of text will be shown as underlined.</u></p> </div> <pre class="language-html"><code class="language-html"><u>This line of text will be shown as underlined.</u></code></pre> <h3>Small text</h3> <p>For de-emphasizing a block text, use the <code><small></code> tag<p> <div class="user-app-example"> <p><small>This line of text is meant to be treated as fine print.</small></p> </div> <pre class="language-html"><code class="language-html"><small>This line of text is meant to be treated as fine print.</small></code></pre> <h3>Marked text</h3> <p>To highlight a run of text use the <code><mark></code> tag.</p> <div class="user-app-example"> <p>You can use the mark tag to <mark>highlight</mark> text.</p> </div> <pre class="language-html"><code class="language-html">You can use the mark tag to <mark>highlight</mark> text.</code></pre> <h2>Alignment classes</h2> <p>Easily realign text to components with text alignment classes.</p> <div class="user-app-example"> <p class="text-left">Text aligned to the left.</p> <p class="text-center">Centered text.</p> <p class="text-right">Text aligned to the right.</p> <p class="text-justify">Justified text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <pre class="language-html"><code class="language-html"><p class="text-left">Text aligned to the left.</p> <p class="text-center">Centered text.</p> <p class="text-right">Text aligned to the right.</p> <p class="text-justify">Justified text. Lorem ipsum dolor sit amet...</p></code></pre> <h2>Transformation classes</h2> <p>Transform text in components with text capitalization classes.</p> <div class="user-app-example"> <p class="text-lowercase">lowercased text</p> <p class="text-uppercase">uppercased text</p> <p class="text-capitalize">capitalized text</p> </div> <pre class="language-html"><code class="language-html"><p class="text-lowercase">lowercased text</p> <p class="text-uppercase">uppercased text</p> <p class="text-capitalize">capitalized text</p></code></pre> <h1>Helper classes</h1> <h2>Labels</h2> <p>Styled labels for various occasions.</p> <div class="user-app-example"> <span class="label label-default">default</span> <span class="label label-primary">primary</span> <span class="label label-success">success</span> <span class="label label-info">info</span> <span class="label label-warning">warning</span> <span class="label label-danger">danger</span> </div> <pre class="language-html"><code class="language-html"><span class="label label-default">default</span> <span class="label label-primary">primary</span> <span class="label label-success">success</span> <span class="label label-info">info</span> <span class="label label-warning">warning</span> <span class="label label-danger">danger</span></code></pre> <h2>Contextual colors</h2> <p>Pre-set nice colors for all sorts of messages and icons.</p> <div class="user-app-example"> <p class="text-muted">Muted text.</p> <p class="text-primary">Primary information.</p> <p class="text-success">Successful order.</p> <p class="text-info">Informative announcement.</p> <p class="text-warning">Warning message.</p> <p class="text-danger">Danger ahead!</p> </div> <pre class="language-html"><code class="language-html"><p class="text-muted">Muted text.</p> <p class="text-primary">Primary information.</p> <p class="text-success">Successful order.</p> <p class="text-info">Informative announcement.</p> <p class="text-warning">Warning message.</p> <p class="text-danger">Danger ahead!</p></code></pre> <h2>Contextual backgrounds</h2> <p>Pre-set colors for setting background to all sorts of elements. Text color is set automatically to black or white for proper contrast.</p> <div class="user-app-example"> <p class="bg-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> <p class="bg-success">Sed do eiusmod tempor incididunt</p> <p class="bg-info">Ut labore et dolore magna aliqua</p> <p class="bg-warning">Ut enim ad minim veniam</p> <p class="bg-danger">Quis nostrud exercitation ullamco laboris</p> </div> <pre class="language-html"><code class="language-html"><p class="bg-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> <p class="bg-success">Sed do eiusmod tempor incididunt</p> <p class="bg-info">Ut labore et dolore magna aliqua</p> <p class="bg-warning">Ut enim ad minim veniam</p> <p class="bg-danger">Quis nostrud exercitation ullamco laboris</p></code></pre> <h2>Badges</h2> <p>A rounded badge commonly used to display counters.</p> <div class="user-app-example"> <span class="badge">12</span> </div> <pre class="language-html"><code class="language-html"><span class="badge">12</span></code></pre> <h2>Icons</h2> <p>Use <code>.fa</code> class with an icon class from <a href="http://fontawesome.io/icons/" target="_blank">FontAwesome</a>.</p> <div class="user-app-example"> <ul> <li><i class="fa fa-ban text-danger"></i> cancel</li> <li>messages: <span class="badge"><i class="fa fa-envelope"></i> 12</span></li> <li><span class="label label-primary"><i class="fa fa-gear"></i> settings</span></li> </ul> </div> <pre class="language-html"><code class="language-html"><ul> <li><i class="fa fa-ban text-danger"></i> cancel</li> <li>messages: <span class="badge"><i class="fa fa-envelope"></i> 12</span></li> <li><span class="label label-primary"><i class="fa fa-gear"></i> settings</span></li> </ul></code></pre> <h2>HR</h2> <p>A horizontal line.</p> <div class="user-app-example"> Text before the line. <hr> Text under the line. </div> <pre class="language-html"><code class="language-html"><hr></code></pre> <h2>Links</h2> <p>A hyperlink.</p> <div class="user-app-example"> <a target="_blank">link</a> </div> <pre class="language-html"><code class="language-html"><a target="_blank">link</a></code></pre> <h2>Quick floats</h2> <p>Easily float an element to the left or right.</p> <div class="user-app-example"> <div class="pull-left">pull-left</div> <div class="pull-right">pull-right</div> <i class="clearfix"></i> </div> <pre class="language-html"><code class="language-html"><div class="pull-left">text</div> <div class="pull-right">text</div></code></pre> <h2>Center content blocks</h2> <p>Set an element to <code>display: block</code> and center via margin, e.g. to center an image.</p> <div class="user-app-example"> <div class="center-block">centered block</div> </div> <pre class="language-html"><code class="language-html"><div class="center-block">centered block</div></code></pre> <h2>Clearfix</h2> <p>Easily clear floats by adding <code>.clearfix</code> to the parent element.</p> <div class="user-app-example"> <div class="clearfix">Parent clearfix div <span class="pull-right">pull-right</span></div> </div> <pre class="language-html"><code class="language-html"><div class="clearfix">Parent clearfix div <span class="pull-right">pull-right</span></div></code></pre> <h2>Truncating text</h2> <p>Use <code>.text-overflow</code> class to truncate text.</p> <div class="user-app-example"> <div style="width: 300px;"> <div> <span class="pull-right"> <span class="label label-warning"><i class="fa fa-ban"></i> warning</span></li> </span> <div class="text-overflow"> Text overflow enabled. Lorem ipsum dolor sit amet, consectetur </div> </div> </div> </div> <pre class="language-html"><code class="language-html"><div> <span class="pull-right"> <span class="label label-warning"><i class="fa fa-ban"></i> warning</span></li> </span> <div class="text-overflow"> Text overflow enabled. Lorem ipsum dolor sit amet, consectetur </div> </div></code></pre> <h2>Overflow ellipsis</h2> <p>Use <code>.overflow-ellipsis</code> with <code>.text-overflow</code> class to truncate text nicely with an ellipsis at the end.</p> <div class="user-app-example"> <div style="width: 300px;"> <div> <span class="pull-right"> <span class="label label-warning"><i class="fa fa-ban"></i> warning</span></li> </span> <div class="text-overflow overflow-ellipsis"> Text overflow with ellipsis. Lorem ipsum dolor sit amet, consectetur </div> </div> </div> </div> <pre class="language-html"><code class="language-html"><div> <span class="pull-right"> <span class="label label-warning"><i class="fa fa-ban"></i> warning</span></li> </span> <div class="text-overflow overflow-ellipsis"> Text overflow with ellipsis. Lorem ipsum dolor sit amet, consectetur </div> </div></code></pre> <h2>Time ago</h2> <p>Show time in a human-readable format, like you often see it in Helprace: "a week ago", "2 days ago", "13 minutes ago".</p> <div class="user-app-example"> <div> updated <time class="g-date" scheme="default" datetime="2017-07-07T13:33:50+00:00">11 days ago</time> </div> </div> <pre class="language-html"><code class="language-html">updated <time datetime="2017-07-07T13:33:50+00:00"></time></code></pre> <h1>Collapsible blocks</h1> <h2>Collapsed by default</h2> <p>Specify a title within the first <code><div></code> inside a collapsible block. Clicking it toggles visibility of the second <code><div></code>. It is collapsed by default.</p> <div class="user-app-example"> <div class="collapse"> <div>Clickable Title</div> <div> Text and code inside a collapsible block. </div> </div> </div> <pre class="language-html"><code class="language-html"><div class="collapse"> <div>Clickable Title</div> <div>Text and code inside a collapsible block.</div> </div></code></pre> <h2>Expanded by default</h2> <p>Add <code>.in</code> class to make a block expanded by default.</p> <div class="user-app-example"> <div class="collapse in"> <div>Clickable Title</div> <div> Text and code inside a collapsible block. </div> </div> </div> <pre class="language-html"><code class="language-html"><div class="collapse in"> <div>Clickable Title</div> <div>Text and code inside a collapsible block.</div> </div></code></pre> <h2>No left margin</h2> <p>Content inside a collapsible block is shown without left margin.</p> <div class="user-app-example"> <div class="collapse in no-margin"> <div>Clickable Title</div> <div> Text and code inside a collapsible block without left margin. </div> </div> </div> <pre class="language-html"><code class="language-html"><div class="collapse in no-margin"> <div>Clickable Title</div> <div>Text and code inside a collapsible block without left margin.</div> </div></code></pre> <h2>Marker on the right</h2> <p>Display the collapsed/expanded marker on the right.</p> <div class="user-app-example"> <div class="collapse in mode-right"> <div>Clickable Title</div> <div> Text and code inside a collapsible block. </div> </div> </div> <pre class="language-html"><code class="language-html"><div class="collapse in mode-right"> <div>Clickable Title</div> <div>Text and code inside a collapsible block.</div> </div></code></pre> <h1>Lists</h1> <h2>Unordered list</h2> <p>A list of items in which the order does not matter.</p> <div class="user-app-example"> <ul> <li>item</li> <li>item</li> <li> item <ul> <li>item</li> <li>item</li> </ul> </li> <li>item</li> </ul> </div> <pre class="language-html"><code class="language-html"><ul> <li>...</li> </ul></code></pre> <h2>Ordered list</h2> <p>A list of items in a certain order.</p> <div class="user-app-example"> <ol> <li>item</li> <li>item</li> <li> item <ol> <li>item</li> <li>item</li> </ol> </li> <li>item</li> </ol> </div> <pre class="language-html"><code class="language-html"><ol> <li>...</li> </ol></code></pre> <h2>Unstyled list</h2> <p>Remove the default <code>list-style</code> and left margin on list items . This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well, if needed.</p> <div class="user-app-example"> <ul class="list-unstyled"> <li>item</li> <li>item</li> <li> item <ul> <li>item</li> <li>item</li> </ul> </li> <li>item</li> </ul> </div> <pre class="language-html"><code class="language-html"><ul class="list-unstyled"> <li>...</li> </ul></code></pre> <h2>Inline list</h2> <p>Place all list items on a single line with <code>display: inline-block;</code> and some light padding.</p> <div class="user-app-example"> <ul class="list-inline"> <li>item #1</li> <li>item #2</li> <li>item #3</li> <li>item #4</li> </ul> </div> <pre class="language-html"><code class="language-html"><ul class="list-inline"> <li>...</li> </ul></code></pre> <h2>Collapsible nested list</h2> <p>Collapsible lists can be nested items of a list.</p> <div class="user-app-example"> <ul class="list-unstyled"> <li class="collapse in"> <div>Clickable Title</div> <ul class="list-unstyled"> <li>item</li> <ul class="list-unstyled"> <li class="collapse"> <div>Clickable Title</div> <ul class="list-unstyled"> <li>item</li> <li>item</li> </ul> </li> <li>item</li> <li>item</li> </ul> </ul> </li> <li>item</li> </ul> </div> <pre class="language-html"><code class="language-html"><ul class="list-unstyled"> <li class="collapse in"> <div>Clickable Title</div> <ul class="list-unstyled"> <li>item</li> <ul class="list-unstyled"> <li class="collapse"> <div>Clickable Title</div> <ul class="list-unstyled"> <li>item</li> <li>item</li> </ul> </li> <li>item</li> <li>item</li> </ul> </ul> </li> <li>item</li> </ul></code></pre> <h1>Layout examples</h1> <p>Use the following examples of formatted HTML layout to design your first app.</p> <h2>Example Shopping Cart</h2> <div class="user-app-sidebar"> <ul class="list-unstyled"> <li class="text-muted">Customer since 17 Aug 2016</li> <li>Lifetime Value <span class="pull-right">$2,938.00</span></li> <li>Past 12 Months <span class="pull-right">$1,240.00</span></li> <li>Average Order <span class="pull-right">$489.34</span></li> </ul> <div class="collapse in"> <div>Recent Orders <span class="badge">3</span></div> <ul class="list-unstyled"> <li class="clearfix"> <div><a href="#">#94571</a><span class="pull-right">$140.00</span></div> <div>15 June 2017 <span class="pull-right text-warning">Awaiting Shipment</span></div> <hr> </li> <li class="clearfix"> <div><a href="#">#83453</a><span class="pull-right">$176.00</span></div> <div>15 June 2017 <span class="pull-right text-info">Shipped</span></div> <hr> </li> <li class="clearfix"> <div><a href="#">#82454</a><span class="pull-right">$310.00</span></div> <div>15 June 2017 <span class="pull-right text-success">Completed</span></div> <hr> </li> </ul> </div> </div> <pre class="language-html"><code class="language-html"><ul class="list-unstyled"> <li class="text-muted">Customer since 17 Aug 2016</li> <li>Lifetime Value <span class="pull-right">$2,938.00</span></li> <li>Past 12 Months <span class="pull-right">$1,240.00</span></li> <li>Average Order <span class="pull-right">$489.34</span></li> </ul> <div class="collapse in"> <div>Recent Orders <span class="badge">3</span></div> <ul class="list-unstyled"> <li class="clearfix"> <div><a href="#">#94571</a><span class="pull-right">$140.00</span></div> <div>15 June 2017 <span class="pull-right text-warning">Awaiting Shipment</span> </div> <hr> </li> <li class="clearfix"> <div><a href="#">#83453</a><span class="pull-right">$176.00</span></div> <div>15 June 2017 <span class="pull-right text-info">Shipped</span> </div> <hr> </li> <li class="clearfix"> <div><a href="#">#82454</a><span class="pull-right">$310.00</span></div> <div>15 June 2017 <span class="pull-right text-success">Completed</span> </div> <hr> </li> </ul> </div></code></pre> <h2>Example CRM</h2> <div class="user-app-sidebar"> <div class="collapse in mode-right no-margin"> <div class="clearfix"> ACME <span class="pull-right"> <span class="label label-info">R-23-90</span> <span class="label label-success">OK</span> <i class="fa fa-ban text-danger" title="Hover message"></i> </span> </div> <ul class="list-unstyled"> <li class="clearfix"> Company <span class="pull-right"><a href="#">ACME, Inc.</a></span> </li> <li class="collapse"> <div> Point of Contact </div> <ul class="list-unstyled"> <li class="clearfix"> Name <span class="pull-right text-muted"><a href="#">John Smith</a></span> </li> <li class="clearfix"> Email <span class="pull-right text-muted"><a href="#">john.smith@example.com</a></span> </li> <li class="clearfix"> Phone <span class="pull-right text-muted"><a href="tel:+12345678901">+1 (234) 567-89-01</a></span> </li> </ul> </li> <li class="collapse in"> <div> Stats <span class="pull-right"> <i class="fa fa-user text-muted"></i><span class="text-muted">10K</span> <i class="fa fa-envelope text-muted"></i> <span class="text-muted">3K</span> <i class="fa fa-file-alt text-muted"></i> <span class="text-muted">128</span> </span> </div> <ul class="list-unstyled"> <li class="clearfix"> Users <span class="pull-right"> 10,256 </span> </li> <li class="clearfix"> Emails <span class="pull-right"> 2,678 </span> </li> <li class="clearfix"> Pages <span class="pull-right"> 128 </span> </li> <li class="clearfix"> Language <span class="pull-right"> English </span> </li> <li class="clearfix"> Registered <span class="pull-right"> <time datetime="2015-12-07 00:00">10 hours ago</time> </span> </li> </ul> </li> </ul> </div> </div> <pre class="language-html"><code class="language-html"><div class="collapse in mode-right no-margin"> <div class="clearfix"> ACME <span class="pull-right"> <span class="label label-info">R-23-90</span> <span class="label label-success">OK</span> <i class="fa fa-ban text-danger" title="Hover message"></i> </span> </div> <ul class="list-unstyled"> <li class="clearfix"> Company <span class="pull-right"><a href="#">ACME, Inc.</a></span> </li> <li class="collapse"> <div> Point of Contact </div> <ul class="list-unstyled"> <li class="clearfix"> Name <span class="pull-right text-muted"> <a href="#">John Smith</a> </span> </li> <li class="clearfix"> Email <span class="pull-right text-muted"> <a href="#">john.smith@example.com</a> </span> </li> <li class="clearfix"> Phone <span class="pull-right text-muted"> <a href="tel:+12345678901">+1 (234) 567-89-01</a> </span> </li> </ul> </li> <li class="collapse in"> <div> Stats <span class="pull-right"> <i class="fa fa-user text-muted"></i> <span class="text-muted">10K</span> <i class="fa fa-envelope text-muted"></i> <span class="text-muted">3K</span> <i class="fa fa-file-alt text-muted"></i> <span class="text-muted">128</span> </span> </div> <ul class="list-unstyled"> <li class="clearfix"> Users <span class="pull-right"> 10,256 </span> </li> <li class="clearfix"> Emails <span class="pull-right"> 2,678 </span> </li> <li class="clearfix"> Lists <span class="pull-right"> 128 </span> </li> <li class="clearfix"> Language <span class="pull-right"> English </span> </li> <li class="clearfix"> Registered <span class="pull-right"> <time datetime="2017-07-07T13:33:50+00:00"></time> </span> </li> </ul> </li> </ul> </div></code></pre> </div> </div> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-43946909-3', 'auto'); ga('send', 'pageview'); </script> </body> </html>

CINXE.COM

Custom App Style Guide - Helprace