Minimal
Description
The purpose of the minimal header is to minimise distractions by removing unnecessary links and content and focuses the user on the critcal path to conversion. It contains 2 levels of navigation only and only critical links.
Usage
Code example
<header class="header" data-js-header role="banner">
<div class="header__upper">
<div class="header__inner">
<div class="header__navbar">
<a href="/" class="header__logo header__logo--compact">
<img src="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/logos/funding-circle.svg" alt="Funding Circle home page">
</a>
<ul class="header__nav header__nav--controls">
<li class="header__nav-item header__nav-item--comfortable">
<svg class="icon icon--small" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>phone icon</title><path d="M5.15 9.73C3.994 8.476 3.11 7.066 2.566 5.47c-.223-.652-.383-1.315-.44-1.992-.062-.708.153-1.31.57-1.833.397-.5.92-.836 1.504-1.09.18-.08.38-.09.58-.063.122.016.208.07.273.188.514.92 1.036 1.838 1.55 2.76.15.265.134.466-.077.656-.227.206-.478.384-.717.577-.207.166-.413.332-.613.505-.125.11-.162.252-.122.43.095.424.294.807.53 1.173.45.698 1.01 1.304 1.615 1.87.516.483 1.042.956 1.575 1.42.245.213.51.4.776.586.237.165.387.162.576-.025.235-.232.445-.49.67-.733.138-.148.274-.298.426-.43.233-.207.428-.21.71-.027.22.143.44.29.657.44.644.444 1.285.893 1.93 1.336.11.073.15.164.153.28.005.21-.054.4-.132.583-.63 1.464-2.307 2.075-3.793 1.62-.927-.284-1.782-.727-2.593-1.28-.927-.628-1.77-1.363-2.552-2.17-.163-.167-.315-.347-.472-.52" fill-rule="evenodd"/></svg>
<span>0800 048 2467</span>
</li>
<li class="header__nav-item header__nav-item--compact">
<a class="header__nav-link" href="tel:0800 048 2467">
<svg class="icon icon--small" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>phone icon</title><path d="M5.15 9.73C3.994 8.476 3.11 7.066 2.566 5.47c-.223-.652-.383-1.315-.44-1.992-.062-.708.153-1.31.57-1.833.397-.5.92-.836 1.504-1.09.18-.08.38-.09.58-.063.122.016.208.07.273.188.514.92 1.036 1.838 1.55 2.76.15.265.134.466-.077.656-.227.206-.478.384-.717.577-.207.166-.413.332-.613.505-.125.11-.162.252-.122.43.095.424.294.807.53 1.173.45.698 1.01 1.304 1.615 1.87.516.483 1.042.956 1.575 1.42.245.213.51.4.776.586.237.165.387.162.576-.025.235-.232.445-.49.67-.733.138-.148.274-.298.426-.43.233-.207.428-.21.71-.027.22.143.44.29.657.44.644.444 1.285.893 1.93 1.336.11.073.15.164.153.28.005.21-.054.4-.132.583-.63 1.464-2.307 2.075-3.793 1.62-.927-.284-1.782-.727-2.593-1.28-.927-.628-1.77-1.363-2.552-2.17-.163-.167-.315-.347-.472-.52" fill-rule="evenodd"/></svg>
<span>Call us</span>
</a>
</li>
<li class="header__nav-item">
<a class="header__nav-link" href="/login">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon--small" width="16" height="16" viewBox="0 0 16 16"><title>padlock icon</title><path d="M10.039212 7.71995276L10.039212 7.60792276C10.039212 6.94307395 10.0394223 6.27822513 10.03917 5.61337632 10.0387495 4.54966405 9.07553904 3.71222641 7.90492022 3.75751188 6.82524487 3.79928449 5.96121869 4.61591219 5.96088233 5.59523922 5.96067211 6.26963388 5.96084029 6.94406671 5.96084029 7.61846137L5.96084029 7.71995276 10.039212 7.71995276ZM4.14226489 7.72201466L4.14226489 7.5830272C4.14226489 6.92123306 4.14247512 6.25943892 4.1421808 5.59760659 4.14201262 5.11634342 4.21445628 4.64607705 4.42367254 4.20082079 4.96542326 3.04772125 5.90794759 2.31475331 7.26314427 2.07373989 8.5795754 1.83959947 9.74451815 2.16553271 10.7065514 3.01602905 11.4458719 3.66961377 11.8299116 4.4808958 11.8483273 5.4215049 11.8624544 6.14347603 11.8554329 6.86579081 11.8577874 7.58795285 11.8579136 7.62857996 11.8577874 7.66924525 11.8577874 7.72201466 12.0315597 7.72201466 12.195115 7.72201466 12.3587124 7.72205284 12.7649098 7.72212921 12.9998156 7.93370326 12.9998577 8.30072179 13.0000258 10.009313 13.0000679 11.7179423 12.9998577 13.4265335 12.9998156 13.7880919 12.7644473 13.9999714 12.3644726 13.9999714 9.45301968 14.0000095 6.54156679 14.0000095 3.6301139 13.9999714 3.23787544 13.9999714 3.00040489 13.7865263 3.0003208 13.4311155 2.9998583 11.719317 2.99994239 10.0075184 3.00027876 8.29571977 3.0003208 7.93481057 3.23703454 7.72216739 3.63621043 7.72205284 3.80010211 7.72197648 3.9639938 7.72201466 4.14226489 7.72201466L4.14226489 7.72201466Z"/></svg>
<span>Sign in</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="header__primary ">
<div class="header__inner">
<div class="header__navbar">
<a href="/" class="header__logo header__logo--comfortable">
<img src="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/logos/funding-circle.svg" alt="Funding Circle home page">
</a>
</div>
</div>
</div>
</header>