Asides

This contains modules that appear in the sidebar

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

CTA - members area

Members assembly events 2017

Information and presentations from the event held in Rome in July

View report 
<div class="aside-m">
    <div class="aside-m__header fill-sunset">
        <h3 class="aside-m__heading">Members assembly events 2017</h3>
    </div>
    <div class="aside-m__body">
        <p class="aside-m__copy">Information and presentations from the event held in Rome in July</p>
        <a class="button" href="#none">View report</a>
    </div>
</div>

Notes

Used to highlight the members area of the site.

CTA - contact

Contact support

Our technical team are ready to help you.

Get help 
<div class="aside-m">
    <div class="aside-m__header fill-sunset">
        <h3 class="aside-m__heading">Contact support</h3>
    </div>
    <div class="aside-m__body">
        <p class="aside-m__copy">Our technical team are ready to help you.</p>
        <a class="button js-move" data-target="support" href="#support">Get help</a>
    </div>
</div>

Notes

Used to highlight contacting support, this will jump you down to the form.

Navigation

<button class="navigation-secondary-toggle" type="button" id="navigation-secondary-toggle">pages in this section <i role="presentation" aria-hidden="true" class="ico ico--16 ico-plus-sunrise"></i></button>
<nav class="navigation-secondary" id="navigation-secondary">
    <ul class="navigation-secondary__list">
        <li class="navigation-secondary__item"><a href="#">Why aid transparency matters</a></li>
        <li class="navigation-secondary__item"><a href="#">How IATI works</a></li>
        <li class="navigation-secondary__item"><a href="#">Who is IATI for?</a></li>
        <li class="navigation-secondary__item"><a href="#">About the standard</a></li>
        <li class="navigation-secondary__item"><a href="#">History of IATI</a></li>
        <li class="navigation-secondary__item"><a href="#">Case studies</a></li>
        <li class="navigation-secondary__item navigation-secondary__item--active"><a href="#">Governance</a>
            <ul class="navigation-secondary__child">
                <li class="navigation-secondary__child__item"><a href="#">Annual reports</a></li>
                <li class="navigation-secondary__child__item"><a href="#">Governing board</a></li>
                <li class="navigation-secondary__child__item"><a href="#">Secreteriat</a></li>
                <li class="navigation-secondary__child__item"><a href="#">Finances</a></li>
                <li class="navigation-secondary__child__item"><a href="#">IATI workplan</a></li>
            </ul>
        </li>
        <li class="navigation-secondary__item"><a href="#">Promote IATI</a></li>
        <li class="navigation-secondary__item"><a href="#">Membership</a></li>
        <li class="navigation-secondary__item"><a href="#">TAG - Technical Advisory Group</a></li>
    </ul>
</nav>

Notes

Used for in page navigation.