Listings
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
São Tomé and Príncipe is IATI’s first Portuguese-speaking Member
<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–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
São Tomé and Príncipe is IATI’s first Portuguese-speaking Member
Nullam magna ligula, sagittis vitae faucibus ut, sollicitudin et mauris. Donec et varius lacus.
Read more<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
Publish your data to the IATI Standard
- Lorem ipsum dolor sit amet, consectetur adipisicing elit
- Officia deserunt mollit anim id est laborum.
- Duis aute irure dolor in reprehenderit in voluptate
<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
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.