Global
During design and development phases, this guide is best viewed in Google chrome as it is still a working document.
Header
<header role="banner" class="header">
<a href="/" class="branding"><span>IATI - International Aid Transparency Initiative</span></a>
<ul class="navigation-utility">
<li id="section-news" class='navigation-utility__item'><a href="http://iatistandard.org/news/">News</a></li>
<li id="section-events" class='navigation-utility__item'><a href="http://iatistandard.org/events/">Events</a></li>
<li id="section-contact" class='navigation-utility__item'><a href="http://iatistandard.org/contact/">Contact</a></li>
</ul>
<button role="button" class="navigation-primary-toggle" id="navigation-primary-toggle"><span>Menu</span></button>
<nav class="navigation-primary" role="navigation" id="navigation-primary">
<ul class="navigation-primary__items">
<li id="section-about" class='navigation-primary__item'><a href="http://iatistandard.org/about/">About</a></li>
<li id="section-standard" class='navigation-primary__item'><a href="http://iatistandard.org/iati-standard/">IATI Standard</a></li>
<li id="section-data" class='navigation-primary__item'><a href="http://iatistandard.org/using-data/">Using Data</a></li>
<li id="section-support" class='navigation-primary__item'><a href="http://iatistandard.org/guidance/">Guidance & Support</a></li>
<li id="section-community" class='navigation-primary__item'><a href="https://discuss.iatistandard.org/">Community</a></li>
<li id="section-news" class='navigation-primary__item navigation-primary__item--ss-only'><a href="http://iatistandard.org/news/">News</a></li>
<li id="section-events" class='navigation-primary__item navigation-primary__item--ss-only'><a href="http://iatistandard.org/events/">Events</a></li>
<li id="section-contact" class='navigation-primary__item navigation-primary__item--ss-only'><a href="http://iatistandard.org/contact/">Contact</a></li>
</ul>
</nav>
</header>
Notes
This is the header which appears on all templates
It would normally sit on top of a hero module.
Footer
<footer role="contentinfo" class="footer">
<div class="footer__content">
<div class="row">
<div class="l-3up">
<div class="l-3up__col">
<span class="branding-footer"></span>
<!-- <h4 class="footer__heading">Contact details</h4>
<p class="footer__copy">Members of the Secretariat can be contacted about various aspects of IATI.</p>
<ul class="footer__list">
<li><a href="#">[email protected]</a></li>
<li><a href="#">[email protected]</a></li>
<li><a href="#">[email protected]</a></li>
<li><a href="#">[email protected]</a></li>
</ul> -->
</div>
<div class="l-3up__col">
<h4 class="footer__heading">Useful links</h4>
<ul class="footer__list">
<li><a href="#">Contact</a></li>
<li><a href="#">Terms and conditions</a></li>
<li><a href="#">Privacy policy</a></li>
</ul>
</div>
<div class="l-3up__col">
<h4 class="footer__heading">Newsletter</h4>
<form>
<div class="form-field">
<label for="newsletter" id="newsletter" class="form-label">Sign up to our newsletter</label>
<input id="newsletter" class="form-item" name="newsletter" type="text" placeholder="Enter email address">
<button type="submit" class="button" name="button">Sign up</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="footer__meta">
<div class="row">
<p class="footer__legal">Copyright IATI 2018. All rights reserved</p>
<ul class="social-list">
<li class="social-list__item social-list__item--twitter"><a href="#">Twitter</a></li>
<li class="social-list__item social-list__item--facebook"><a href="#">Facebook</a></li>
<li class="social-list__item social-list__item--linkedin"><a href="#">Linkedin</a></li>
<li class="social-list__item social-list__item--youtube"><a href="#">Youtube</a></li>
</ul>
</div>
</div>
</footer>
Notes
This is the footer which appears on all templates