IATI Pattern Library

<article class="listing listing--article">
	<aside class="listing__aside">
		<div class="listing__media">
			<img src="/assets/img/content-image3.jpg" alt="alt tag">
		</div>
	</aside>
	<div class="listing__body">
		<h2 class="listing__heading"><a href=""><span>São Tomé and Príncipe is IATI’s first Portuguese-speaking Member</span></a></h2>
		<ul class="listing__metadata">
			<li class="listing__metadata__item">
				<i role="presentation" aria-hidden="true" class="ico ico--14 ico-calendar-ocean"></i> <span class="listing__metadata__date">27 Feb 2018</span>
			</li>
			
		</ul>
		<div class="listing__excerpt">São Tomé and Príncipe has become the first Portuguese-speaking country to join IATI. They join 86 members of the initiative</div>
		<a href="#" class="button">Read more</a>
	</div>
</article>

<article class="listing listing--featured">
	<aside class="listing__aside">
		<div class="listing__media">
			<img src="/assets/img/content-image3.jpg" alt="alt tag">
		</div>
	</aside>
	<div class="listing__body">
		<h2 class="listing__heading"><a href=""><span>São Tomé and Príncipe is IATI’s first Portuguese-speaking Member</span></a></h2>
		<ul class="listing__metadata">
			<li class="listing__metadata__item">
				<i role="presentation" aria-hidden="true" class="ico ico--14 ico-calendar-ocean"></i> <span class="listing__metadata__date">27 Feb 2018</span>
			</li>
			
		</ul>
		<div class="listing__excerpt">São Tomé and Príncipe has become the first Portuguese-speaking country to join IATI. They join 86 members of the initiative</div>
		<a href="#" class="button">Read more</a>
	</div>
</article>

<article class="listing listing--article  listing--archived">
	<aside class="listing__aside">
		<div class="listing__media">
			<img src="/assets/img/content-image.jpg" alt="alt tag">
		</div>

		<h3 class="listing__location"><i role="presentation" aria-hidden="true" class="ico ico--14 ico-location-ocean"></i>Jisc, Brettenham House, 5 Lancaster Place, London, WC2E 7EN</h3>

		<span class="badge">Past event</span>
	</aside>
	<div class="listing__body">
		<h2 class="listing__heading"><a href=""><span>Health Survey for England: Introductory Workshop</span></a></h2>
		<ul class="listing__metadata">
			<li class="listing__metadata__item">
				<i role="presentation" aria-hidden="true" class="ico ico--14 ico-calendar-ocean"></i>
				<span class="listing__metadata__date">25 Aug&ndash;28 Oct 2017</span>
			</li>
		</ul>
		<p class="listing__excerpt">The following examples include an image of how the example should look in a supporting browser, they each link to a page with more information about the technique being shown, code and a CodePen of the example. Unless otherwise noted these examples work in any browser supporting the up to date Grid Specification</p>
		<a href="#" class="button">More details</a>
	</div>
</article>

<article class="case-study">
	<div class="case-study__media background-cover" style="background-image: url(/assets/img/content-image3.jpg"></div>
	<div class="case-study__panel">
		<h2 class="case-study__heading"><a href=""><span>São Tomé and Príncipe is IATI’s first Portuguese-speaking Member</span></a></h2>
		<p class="case-study__excerpt">Nullam magna ligula, sagittis vitae faucibus ut, sollicitudin et mauris. Donec et varius lacus.</p>
		<a href="#" class="button">Read more</a>
	</div>
</article>

<article class="listing listing--guidance">
	<aside class="listing__aside">
		<div class="listing__media">
			<img src="/assets/img/content-image2.jpg" alt="alt tag">
		</div>
	</aside>
	<div class="listing__body">
		<h2 class="listing__heading"><a href=""><span>Publish your data to the IATI Standard</span></a></h2>
		<div class="listing__excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
		
			<ul class="listing__list">
				<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
				<li>Officia deserunt mollit anim id est laborum.</li>
				<li>Duis aute irure dolor in reprehenderit in voluptate</li>
			</ul>
		
		<a href="#" class="button">Publishing your data to the IATI Standard</a>
	</div>
</article>

<article class="listing listing--article listing--people">
	<aside class="listing__aside">
		<div class="listing__media">
			<img src="/assets/img/portrait.png" alt="alt tag">
		</div>
	</aside>
	<div class="listing__body">
		<header class="listing__header">
			<h2 class="listing__heading"><span>Stephen Potter</span></h2>
			
				<div class="listing__body-img ">
					<img src="/assets/img/logo.png" alt="alt tag">
					<span>International Aid Transparency Initiative</span>
				</div>
			
			<ul class="listing__metadata">
				<li class="listing__metadata__item">IATI Chair</li>
				<li class="listing__metadata__item">Director, Development Policy Planning, Global Affairs Canada</li>
			</ul>
		</header>
		<div class="listing__excerpt is-typeset"><p>Since August 2015, Stephen Potter has been responsible for aid transparency, Agenda 2030, and the creation of a new policy framework for Canadian international assistance. He has worked for over 20 years with Canada's development assistance programme, serving in a variety of positions, including overseas postings in Ukraine (2012-2015), Tanzania (2005-2008), Honduras (2002-2004), and Peru (1999-2002). He began his development career working in the International Development Research Centre's evaluation unit.</p><p>Yohanna Loucheur, Senior Policy Analyst at Global Affairs Canada, is alternate in the role of Chair.</p></div>
		<ul class="listing__metadata">
			<li class="listing__metadata__item">IATI Constituency: Providers of Development Cooperation</li>
		</ul>
	</div>
</article>