Listings

During design and development phases, this guide is best viewed in Google chrome as it is still a working document.

Article

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

Notes

Used to display a list of news articles.

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

Notes

Used to display a feaured article, only one article should be featured.

Event

Health Survey for England: Introductory Workshop

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

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

Notes

Used to display a list of events.

Case study

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

Notes

Used to display a list of case studies.

Guidance

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

Notes

Used to display a list of guidance and support.

Profile

Stephen Potter

alt tag International Aid Transparency Initiative

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.

Yohanna Loucheur, Senior Policy Analyst at Global Affairs Canada, is alternate in the role of Chair.

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

Notes

Used to display a list of team members.