C20
#
Promo {% include 'components/c20/promo' %}
#
HTML 
<div class="c20-promo">
	<strong>2.5 million</strong> people received life-changing support in last year alone.
</div>
Twig 
<div class="c20-promo">
	{{ text | raw }}
</div>
{
    "text": "<strong>2.5 million<\/strong> people received life-changing support in last year alone."
}
2.5 million people received life-changing support in last year alone.
Heading {% include 'components/c20/heading' %}
#
HTML 
<h1 class="c20-heading c20-heading--level--1">
	<div class="c20-heading__top">Lorem ipsum</div>
	<div class="c20-heading__dash c20-dash"></div>
	<div class="c20-heading__bottom">Dolor sit amet?</div>
</h1>
Twig 
<h{{ level }} class="c20-heading c20-heading--level--{{ level }}">
	<div class="c20-heading__top">{{ top | raw }}</div>
	<div class="c20-heading__dash c20-dash"></div>
	<div class="c20-heading__bottom">{{ bottom | raw }}</div>
</h{{ level }}>
{
    "level": 1,
    "top": "Lorem ipsum",
    "bottom": "Dolor sit amet?"
}

Lorem ipsum
Dolor sit amet?

Rich Text {% include 'components/c20/rich-text' %}
#
HTML 
<div class="c20-rich-text
	 c20-rich-text--align--center	 c20-rich-text--with-lead">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend, turpis a tristique mollis, quam lorem fermentum mi, at aliquam neque neque vel ligula. Aliquam suscipit orci quis enim posuere commodo.</p></p>Nunc sit amet accumsan eros, quis euismod libero. Quisque dictum lectus purus, ut fringilla dui fringilla non. Vivamus finibus condimentum velit a scelerisque. Cras sit amet dolor ultricies, consequat velit vel, accumsan neque. Nam at lacus a quam eleifend sagittis sit amet ut orci. Suspendisse vitae purus lectus.</p>
</div>
Twig 
<div class="c20-rich-text
	{% if center %} c20-rich-text--align--center{% endif %}
	{% if lead %} c20-rich-text--with-lead{% endif %}">
	{{ content | raw }}
</div>
{
    "center": true,
    "lead": true,
    "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend, turpis a tristique mollis, quam lorem fermentum mi, at aliquam neque neque vel ligula. Aliquam suscipit orci quis enim posuere commodo.<\/p><\/p>Nunc sit amet accumsan eros, quis euismod libero. Quisque dictum lectus purus, ut fringilla dui fringilla non. Vivamus finibus condimentum velit a scelerisque. Cras sit amet dolor ultricies, consequat velit vel, accumsan neque. Nam at lacus a quam eleifend sagittis sit amet ut orci. Suspendisse vitae purus lectus.<\/p>"
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend, turpis a tristique mollis, quam lorem fermentum mi, at aliquam neque neque vel ligula. Aliquam suscipit orci quis enim posuere commodo.

Nunc sit amet accumsan eros, quis euismod libero. Quisque dictum lectus purus, ut fringilla dui fringilla non. Vivamus finibus condimentum velit a scelerisque. Cras sit amet dolor ultricies, consequat velit vel, accumsan neque. Nam at lacus a quam eleifend sagittis sit amet ut orci. Suspendisse vitae purus lectus.

Picture {% include 'components/c20/picture' %}
#
HTML 
<picture class=" c20-picture">
			<source srcset="/images/mainsite5/c20/section-2.png 387w /images/mainsite5/c20/section-2.png 774w" media="" />
	
	<img class=" c20-picture__image" src="/images/mainsite5/c20/section-2.png" alt="" />
</picture>
Twig 
<picture class="{{ pictureClass }} c20-picture">
	{% for source in sources %}
		<source srcset="{{ source.srcset }}" media="{{ source.media }}" />
	{% endfor %}

	<img class="{{ imageClass }} c20-picture__image" src="{{ src }}" alt="{{ alt }}" />
</picture>
{
    "pictureClass": "",
    "imageClass": "",
    "sources": {
        "0": {
            "srcset": "\/images\/mainsite5\/c20\/section-2.png 387w \/images\/mainsite5\/c20\/section-2.png 774w",
            "media": ""
        }
    },
    "src": "\/images\/mainsite5\/c20\/section-2.png",
    "alt": ""
}
Donate Widget {% include 'components/c20/donate-widget' %}
#
HTML 
<div class="c-donate-widget">
	<div id="pageheader_0_DonateWidget_PnlWidget" class="c-donate-widget__form js-donate-widget__form">
		<h3 id="pageheader_0_DonateWidget_HdrTitle" class="c-donate-widget__title">Donate now</h3>
				<div class="js-donate-widget__controls">
			<div id="pageheader_0_DonateWidget_PnlHandles" class="c-donate-widget__handles-container">
				<div id="pageheader_0_DonateWidget_PnlFreq" class="c-donate-widget__handles-row js-donate-widget__freq-handles is-hidden">
					<div class="c-donate-widget__radio">
						<input id="pageheader_0_DonateWidget_ctl01" type="radio" name="pageheader_0$DonateWidget$frequency" value="ctl01" checked="checked" class="js-donate-widget__freq-radio" data-frequency="Once"/><label for="pageheader_0_DonateWidget_ctl01">Once</label>
					</div>
				</div>
				<div id="pageheader_0_DonateWidget_PnlAmounts" class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
					<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="Once">
													<div class="c-donate-widget__radio">
								<input id="pageheader_0_DonateWidget_ctl7" type="radio" name="pageheader_0$DonateWidget$Once" value="ctl7" checked="checked" class="js-donate-widget__amount-radio" data-amount="7"/><label for="pageheader_0_DonateWidget_ctl7">&pound;7</label>
							</div>
													<div class="c-donate-widget__radio">
								<input id="pageheader_0_DonateWidget_ctl14" type="radio" name="pageheader_0$DonateWidget$Once" value="ctl14" checked="checked" class="js-donate-widget__amount-radio" data-amount="14"/><label for="pageheader_0_DonateWidget_ctl14">&pound;14</label>
							</div>
													<div class="c-donate-widget__radio">
								<input id="pageheader_0_DonateWidget_ctl21" type="radio" name="pageheader_0$DonateWidget$Once" value="ctl21" checked="checked" class="js-donate-widget__amount-radio" data-amount="21"/><label for="pageheader_0_DonateWidget_ctl21">&pound;21</label>
							</div>
											</div>
				</div>
			</div>
			<div id="pageheader_0_DonateWidget_PnlContent" class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
									<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="Once" data-amount="7">
						<p class="c-donate-widget__handle-content-text">&pound;7 a month over a year could help provide one family like Tamam&rsquo;s with life-saving support to rebuild their lives.</p>
					</div>
									<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="Once" data-amount="14">
						<p class="c-donate-widget__handle-content-text">&pound;14 a month over a year could help provide two families like Tamam&rsquo;s with life-saving support to rebuild their lives.</p>
					</div>
									<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="Once" data-amount="21">
						<p class="c-donate-widget__handle-content-text">&pound;21 a month over a year could help provide three families like Tamam&rsquo;s with life-saving support to rebuild their lives.</p>
					</div>
							</div>
			<div class="c-donate-widget__input-container">
				<input name="pageheader_0$DonateWidget$InpOther" type="number" id="pageheader_0_DonateWidget_InpOther" class="c-donate-widget__input js-donate-widget__other" min="1" placeholder="other"/>
			</div>
		</div>
		<input type="button" name="pageheader_0$DonateWidget$BtnDonate" value="Donate now" onclick="javascript:__doPostBack(&#39;pageheader_0$DonateWidget$BtnDonate&#39;,&#39;&#39;)" id="pageheader_0_DonateWidget_BtnDonate" class="button c-donate-widget__button"/>
	</div>
</div>
Twig 
<div class="c-donate-widget">
	<div id="pageheader_0_DonateWidget_PnlWidget" class="c-donate-widget__form js-donate-widget__form">
		<h3 id="pageheader_0_DonateWidget_HdrTitle" class="c-donate-widget__title">Donate now</h3>
		{# <p class="c-donate-widget__intro">Become a regular giver today and make a world of difference</p> #}
		<div class="js-donate-widget__controls">
			<div id="pageheader_0_DonateWidget_PnlHandles" class="c-donate-widget__handles-container">
				<div id="pageheader_0_DonateWidget_PnlFreq" class="c-donate-widget__handles-row js-donate-widget__freq-handles is-hidden">
					<div class="c-donate-widget__radio">
						<input id="pageheader_0_DonateWidget_ctl01" type="radio" name="pageheader_0$DonateWidget$frequency" value="ctl01" checked="checked" class="js-donate-widget__freq-radio" data-frequency="Once"/><label for="pageheader_0_DonateWidget_ctl01">Once</label>
					</div>
				</div>
				<div id="pageheader_0_DonateWidget_PnlAmounts" class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
					<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="Once">
						{% for amount, text in amounts %}
							<div class="c-donate-widget__radio">
								<input id="pageheader_0_DonateWidget_ctl{{ amount }}" type="radio" name="pageheader_0$DonateWidget$Once" value="ctl{{ amount }}" checked="checked" class="js-donate-widget__amount-radio" data-amount="{{ amount }}"/><label for="pageheader_0_DonateWidget_ctl{{ amount }}">&pound;{{ amount }}</label>
							</div>
						{% endfor %}
					</div>
				</div>
			</div>
			<div id="pageheader_0_DonateWidget_PnlContent" class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
				{% for amount, text in amounts %}
					<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="Once" data-amount="{{ amount }}">
						<p class="c-donate-widget__handle-content-text">{{ text | raw }}</p>
					</div>
				{% endfor %}
			</div>
			<div class="c-donate-widget__input-container">
				<input name="pageheader_0$DonateWidget$InpOther" type="number" id="pageheader_0_DonateWidget_InpOther" class="c-donate-widget__input js-donate-widget__other" min="1" placeholder="other"/>
			</div>
		</div>
		<input type="button" name="pageheader_0$DonateWidget$BtnDonate" value="Donate now" onclick="javascript:__doPostBack(&#39;pageheader_0$DonateWidget$BtnDonate&#39;,&#39;&#39;)" id="pageheader_0_DonateWidget_BtnDonate" class="button c-donate-widget__button"/>
	</div>
</div>
{
    "amounts": {
        "7": "&pound;7 a month over a year could help provide one family like Tamam&rsquo;s with life-saving support to rebuild their lives.",
        "14": "&pound;14 a month over a year could help provide two families like Tamam&rsquo;s with life-saving support to rebuild their lives.",
        "21": "&pound;21 a month over a year could help provide three families like Tamam&rsquo;s with life-saving support to rebuild their lives."
    }
}

Donate now

£7 a month over a year could help provide one family like Tamam’s with life-saving support to rebuild their lives.

£14 a month over a year could help provide two families like Tamam’s with life-saving support to rebuild their lives.

£21 a month over a year could help provide three families like Tamam’s with life-saving support to rebuild their lives.