IATI Pattern Library

<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>

<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>