Primer

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

Once

£7

£14

£21

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