Transparency Chart {% include 'components/charts/transparency-chart' %}
#
HTML 
<div class="transparency-chart">
    <div class="transparency-chart__image" data-svg="/images/mainsite5/transparency-chart/donut.svg">
        <img src="/images/mainsite5/transparency-chart/donut.png" alt="Transparency chart">
    </div>
    <ul class="transparency-chart__legend">
        <li class="transparency-chart__legend-item transparency-chart__legend-item--disaster-response" data-id="disaster-response"><a href="#disaster-response-section">Disaster Response</a></li>
        <li class="transparency-chart__legend-item transparency-chart__legend-item--developing-communities" data-id="developing-communities"><a href="#developing-communities-section">Developing Communities</a></li>
        <li class="transparency-chart__legend-item transparency-chart__legend-item--global-church" data-id="global-church"><a href="#global-church-section">Enabling the global church to act</a></li>
        <li class="transparency-chart__legend-item transparency-chart__legend-item--changing-policies" data-id="changing-policies"><a href="#changing-policies-section">Changing unjust policies</a></li>
        <li class="transparency-chart__legend-item transparency-chart__legend-item--fundraising" data-id="fundraising"><a href="#fundraising-section">Fundraising</a></li>
        <li class="transparency-chart__legend-item transparency-chart__legend-item--running-costs" data-id="running-costs"><a href="#running-costs-section">Support &amp; Running costs</a></li>
    </ul>
    <div class="transparency-chart__details">
        <article id="disaster-response-section" class="transparency-chart-detail transparency-chart-detail--disaster-response">
            <span class="transparency-chart-detail__spend">38p</span>
            <h1 class="transparency-chart-detail__title">Responding to Disaster</h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
        <article id="developing-communities-section" class="transparency-chart-detail transparency-chart-detail--developing-communities">
            <span class="transparency-chart-detail__spend">31p</span>
            <h1 class="transparency-chart-detail__title">Developing Communities</h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
        <article id="global-church-section" class="transparency-chart-detail transparency-chart-detail--global-church">
            <span class="transparency-chart-detail__spend">10p</span>
            <h1 class="transparency-chart-detail__title">Enabling the Global Church to Act</h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
        <article id="changing-policies-section" class="transparency-chart-detail transparency-chart-detail--changing-policies">
            <span class="transparency-chart-detail__spend">6p</span>
            <h1 class="transparency-chart-detail__title">Changing unjust policies</h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
        <article id="fundraising-section" class="transparency-chart-detail transparency-chart-detail--fundraising">
            <span class="transparency-chart-detail__spend">9p</span>
            <h1 class="transparency-chart-detail__title">Fundraising</h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
        <article id="running-costs-section" class="transparency-chart-detail transparency-chart-detail--running-costs">
            <span class="transparency-chart-detail__spend">6p</span>
            <h1 class="transparency-chart-detail__title">Support &amp; Running costs</h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
    </div>
</div>
Twig 
<div class="transparency-chart">
    <div class="transparency-chart__image" data-svg="/images/mainsite5/transparency-chart/donut.svg">
        <img src="/images/mainsite5/transparency-chart/donut.png" alt="Transparency chart">
    </div>
    <ul class="transparency-chart__legend">
        <li class="transparency-chart__legend-item transparency-chart__legend-item--disaster-response" data-id="disaster-response"><a href="#disaster-response-section">Disaster Response</a></li>
        <li class="transparency-chart__legend-item transparency-chart__legend-item--developing-communities" data-id="developing-communities"><a href="#developing-communities-section">Developing Communities</a></li>
        <li class="transparency-chart__legend-item transparency-chart__legend-item--global-church" data-id="global-church"><a href="#global-church-section">Enabling the global church to act</a></li>
        <li class="transparency-chart__legend-item transparency-chart__legend-item--changing-policies" data-id="changing-policies"><a href="#changing-policies-section">Changing unjust policies</a></li>
        <li class="transparency-chart__legend-item transparency-chart__legend-item--fundraising" data-id="fundraising"><a href="#fundraising-section">Fundraising</a></li>
        <li class="transparency-chart__legend-item transparency-chart__legend-item--running-costs" data-id="running-costs"><a href="#running-costs-section">Support &amp; Running costs</a></li>
    </ul>
    <div class="transparency-chart__details">
        <article id="disaster-response-section" class="transparency-chart-detail transparency-chart-detail--disaster-response">
            <span class="transparency-chart-detail__spend">38p</span>
            <h1 class="transparency-chart-detail__title">Responding to Disaster</h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
        <article id="developing-communities-section" class="transparency-chart-detail transparency-chart-detail--developing-communities">
            <span class="transparency-chart-detail__spend">31p</span>
            <h1 class="transparency-chart-detail__title">Developing Communities</h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
        <article id="global-church-section" class="transparency-chart-detail transparency-chart-detail--global-church">
            <span class="transparency-chart-detail__spend">10p</span>
            <h1 class="transparency-chart-detail__title">Enabling the Global Church to Act</h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
        <article id="changing-policies-section" class="transparency-chart-detail transparency-chart-detail--changing-policies">
            <span class="transparency-chart-detail__spend">6p</span>
            <h1 class="transparency-chart-detail__title">Changing unjust policies</h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
        <article id="fundraising-section" class="transparency-chart-detail transparency-chart-detail--fundraising">
            <span class="transparency-chart-detail__spend">9p</span>
            <h1 class="transparency-chart-detail__title">Fundraising</h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
        <article id="running-costs-section" class="transparency-chart-detail transparency-chart-detail--running-costs">
            <span class="transparency-chart-detail__spend">6p</span>
            <h1 class="transparency-chart-detail__title">Support &amp; Running costs</h1>
            <img src="http://placehold.it/430x240" alt="" class="transparency-chart-detail__media">
            <div class="transparency-chart-detail__copy">
                <p>Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.</p>
            </div>
        </article>
    </div>
</div>
{}
Transparency chart
38p

Responding to Disaster

Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.

31p

Developing Communities

Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.

10p

Enabling the Global Church to Act

Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.

6p

Changing unjust policies

Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.

9p

Fundraising

Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.

6p

Support & Running costs

Most people (92%) who are affected, or killed, by disasters are in poor countries. Our 50 years’ experience responding to floods; earthquakes; tsunamis; typhoons; food crises and conflicts enable us to act quickly, using your support to save lives.