Capita Content

Benefit Summary (mobile responsive)

This summary of a benefit claim will:

• Create a pie chart of award vs rent payable for Housing Benefit

  • Will hide this if Housing Benefit is not in payment

• Will detail the amount, date, period and payee of the next Housing Benefit payment

  • Will hide this if there is no next payment due

• Will provide details of the current Council Tax support award

  • Will hide this if there is no CTS in place

• Provides buttons as placeholders to replace with your own URLs

Powerful and Visual Benefit Summary

// HTML //

{{if_gt Claim.Entitlement.CurrentWeeklyHB '0'}} 
<div class="col-md-4 col-sm-6 col-xs-12">
	<div class="card">
		<div class="tabbable-panel">
			<div class="tabbable-line tabs-below">
				<div class="tab-content">
					<div class="tab-pane active" id="tab_below_1">
						<p class="header">Current Housing Benefit Award</p>
						<p>Your Housing Benefit Award is:</p>
						<p class="cardheading">£${Claim.Entitlement.CurrentWeeklyHB} per week</p>
						<div class="awesome">
<div class="pie" style="width: 200px;height: 200px;border-radius: 50%;background: conic-gradient(#efb932 0, #b87512 73.893531414422779325286289070%, #9c27b0 0, #9c27b0 100%);"></div>							
		<hr>
								<div class="circle-hb"></div>
								<p>We pay 
									<strong>£${Claim.Entitlement.CurrentWeeklyHB}</strong> weekly
								</p>
								<div class="circle-rent"></div>
								<p>Of your 
									<strong>£${Claim.Hb.RentPayLandlord.Value.ToString("F2")}</strong> weekly rent
								</p>
							</div>
						</div>
						<div class="tab-pane" id="tab_below_2">
							<p class="header">Useful forms</p>
							<p>The following are online services most commonly used for benefits</p>
							<hr>
								<a href="#/do-it-online/form/3" class="btn btn-sm btn-primary">Report a change in circumstances</a>
								<a href="#/do-it-online/form/2" class="btn btn-sm btn-primary">Make a new claim</a>
								<a href="#/do-it-online/form/10" class="btn btn-sm btn-primary">Appeal a decision</a>
								<a href="#/do-it-online/form/6" class="btn btn-sm btn-primary">Apply for an overpayment arrangement</a>
							</div>
							<div class="actions">
								<ul class="nav nav-tabs">
									<li class="active">
										<a href="#tab_below_1" data-toggle="tab">Award Info</a>
									</li>
									<li class="">
										<a href="#tab_below_2" data-toggle="tab"> Useful forms </a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div> {{/if_gt}} {{if_gt Claim.Hb.BenefitPayment.Amount '0' }} 
		<div class="col-md-4 col-sm-6 col-xs-12">
			<div class="card">
				<p class="header">Your Next Payment</p>
				<p>The amount of your next payment is:</p>
				<p class="cardheading">£${Claim.Hb.BenefitPayment.NextPaymentDetail.Amount.Value.ToString("F2")}</p>
				<hr>
					<p>It will be paid on:</p>
					<p class="cardheading">${Claim.Hb.BenefitPayment.NextPaymentDetail.DueDate.Value.ToString("dd MMMM yyyy")}</p>
					<hr>
						<p>It will be paid to:</p>
						<p class="cardheading">${Claim.Hb.BenefitPayment.NextPayeeName}</p>
						<hr>
							<p>It covers the period:</p>
							<p class="cardheading">${Claim.Hb.BenefitPayment.NextPayeeFrom.Value.ToString("D")} to ${Claim.Hb.BenefitPayment.NextPayeeTo.Value.ToString("D")}</p>
						</div>
					</div> {{/if_gt}} {{if_gt Claim.Hb.CouncilTaxAward.AwardAmount '0'}} 
					<div class="col-md-4 col-sm-6 col-xs-12">
						<div class="card">
							<p class="header">Current Council Tax Support Award</p>
							<p>Your Council Tax Support Award is:</p>
							<p class="cardheading">£${Claim.Hb.CouncilTaxAward.AwardAmount} per week</p>
							<hr>
								<p class="header">Useful forms</p>
								<p>The following are online services most commonly used for benefits</p>
								<hr>
									<a href="#/do-it-online/form/3" class="btn btn-sm btn-primary">Report a change in circumstances</a>
									<a href="#/do-it-online/form/10" class="btn btn-sm btn-primary">Appeal a decision</a>
								</div>
							</div> {{/if_gt}}
							
							
							
// Basic CSS for elements //

.card {
    height: 550px;
    margin-top: 15px;
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%), 0 3px 1px -2px rgb(0 0 0 / 20%);
    padding: 15px !important;
}

.circle-hb {
    background: radial-gradient(#efb932 0, #c99616 100%);
}

.circle-rent {
    background: radial-gradient(#a727a5 0, rgb(220 32 112) 100%);
}

.pie {
    margin-left: auto;
    margin-right: auto;
}

p.cardheading {
    font-size: calc(var(--font-size-master) + 8px) !important;
    font-weight: bold !important;
    color: #2e5f2c !important;
}

.awesome {
    margin-bottom: 60px !important;
}

.nav-tabs > li.active {
    border-bottom: 3px solid #265d31;
}
.nav-tabs > li.active > a, .nav-tabs > li.active {
    border: none;
}

Why doesn't Housing Benefit cover all of my rent?

This is a highly intelligent set of content that will dynamically present answers to the above questions based upon the person's claim.

Reasons include:

• Excess income

• Non-dependant deductions

• Benefit Cap

• Overpayment recovery

• Rent is higher than Max HB possible

// HTML //

{{if_gt Claim.Hb.ExcessIncome '0'}} 

<div class="col-md-4 col-sm-6 col-xs-12">
	<div class="card reco">
		<p class="cardheading">Your income</p>
		<p>The amount of 'Excess Income' for you is 
			<strong>£${Claim.Hb.ExcessIncome}</strong>, but we only take 
			<strong>65 %</strong> of this to reduce your benefit which, for you, amounts to 
			<strong>£${Claim.Hb.ExcessIncome65percent.ToString("F2")}</strong>. 
		</div>
	</div> 
{{/if_gt}} 


{{if_gt Claim.Hb.WeeklyNonDependantDeductHB '0'}} 

	<div class="col-md-4 col-sm-6 col-xs-12">
		<div class="card reco">
			<p class="cardheading">Other Adults Income</p>
			<p> We also have to make deductions if someone else other than a partner lives with you. The amount we take off for you is 
				<strong>£${Claim.Hb.WeeklyNonDependantDeductHB.ToString("F2")}</strong>
			</p>
		</div>
	</div> 
{{/if_gt}} 


{{ifTrue Claim.Hb.BenefitCap}} 
	<div class="col-md-4 col-sm-6 col-xs-12">
		<div class="card reco">
			<p class="cardheading">You are affected by the Benefit Cap</p>
			<p>The benefit cap is a limit on the total amount of benefit you can get. It applies to most people aged 16 or over who have not reached 
				<a href="https://www.gov.uk/state-pension-age">State Pension age</a>.
			</p>
			<p>The amount your household gets from some benefits might go down to make sure you do not get more than the cap limit. The benefit cap affects:</p>
			<ul>
				<li>Bereavement Allowance</li>
				<li>Child Benefit</li>
				<li>Child Tax Credit</li>
				<li>Employment and Support Allowance</li>
				<li>Housing Benefit</li>
				<li>Incapacity Benefit</li>
				<li>Income Support</li>
				<li>Jobseeker’s Allowance</li>
				<li>Maternity Allowance</li>
				<li>Severe Disablement Allowance</li>
				<li>Widowed Parent’s Allowance (or Widowed Mother’s Allowance or Widow’s Pension if you started getting it before 9 April 2001)</li>
				<li>Universal Credit</li>
			</ul>
			<hr>
				<p class="cardheading">Benefit cap amounts</p>
				<p>The amount you get through the benefit cap depends on whether:</p>
				<ul>
					<li>you live inside or outside 
						<a rel="external" href="http://directory.londoncouncils.gov.uk">Greater London</a>
					</li>
					<li>you’re single or in a couple</li>
					<li>your children live with you (if you’re single)</li>
				</ul>
				<p>If you’re in a couple but you do not live together, you’ll get the amounts for a single person.</p>
				<div role="note" aria-label="Information" class="application-notice info-notice">
					<p>Use the 
						<a rel="external" href="https://www.gov.uk/benefit-cap-calculator">benefit cap calculator</a> to find out how much your benefit might be capped.
					</p>
				</div>
				<h2 id="outside-greater-london">Outside Greater London</h2>
				<p>The benefit cap outside Greater London is:</p>
				<ul>
					<li>£384.62 per week (£20,000 a year) if you’re in a couple</li>
					<li>£384.62 per week (£20,000 a year) if you’re a single parent and your children live with you</li>
					<li>£257.69 per week (£13,400 a year) if you’re a single adult</li>
				</ul>
				<h2 id="inside-greater-london">Inside Greater London</h2>
				<p>The benefit cap inside Greater London is:</p>
				<ul>
					<li>£442.31 per week (£23,000 a year) if you’re in a couple</li>
					<li>£442.31 per week (£23,000 a year) if you’re a single parent and your children live with you</li>
					<li>£296.35 per week (£15,410 a year) if you’re a single adult</li>
				</ul>
			</div>
		</div>

 {{/ifTrue}} 


{{if_gt Claim.Hb.OverPayment.OutstandingBalance '0'}} 

		<div class="col-md-4 col-sm-6 col-xs-12">
			<div class="card reco"> You currently have an overpayment on your claim, with this much left to pay: 
				<p class="cardheading">£${Claim.Hb.OverPayment.OutstandingBalance.ToString("F2")}
</p>
				<p>We are recovering this from your benefit payments at a rate of ${Claim.Hb.OverPayment.StandardDeduction} each week</p>
				<br>
					<p>If you would like to pay off the overpayment sooner without having deductions made from your Housing Benefit, or increase the amount of deduction being made, please make a payment by clicking on this button.</p>
					<a href="#" target="_blank" class="btn btn-sm btn-primary">Request to pay overpayment</a>
					<p>Alternatively, you can call us on 0191 278 7878</p>
				</div>
			</div> 
{{/if_gt}}


			<p>If you don't have any other reasons listed, the reason your rent is not all covered by Housing Benefit will be because the maximum amount of money we can pay for your property is less than your contracted rent.</p>

Benefit Notifications in a table

The following illustrates how benefit notifications can be presented in a table view:

Benefit Notifications

// HTML //

<p>You can view any of your benefit notifications that have been issued after the 29th of November 2017.</p>
<p>
	<strong>${Documents.Documents.Count}</strong> notifications have been created recently. 
</p>
<table class="table table-striped">
	<thead>
		<tr>
			<th>Date Issued</th>
			<th>Document Name</th>
			<th>Download/View</th>
		</tr>
	</thead>
	<tbody> {{#each Documents.Documents}} 
		<tr>
			<td>{{Date}}</td>
			<td>{{Title}}</td>
			<td>
				<silo-document-viewer url="{{Url}}"></silo-document-viewer>
			</td>
		</tr> {{/each}} 
	</tbody>
</table>undefined</div>