Summary is used to present a clear summarised output of values to the user.
A summary can comprise multiple summary components of either variant.
The single summary component displays a singular data element.
The multiple summary component displays a multiple data element.
The grouped summary displays contiguous data.
The .summary__link may be removed for data which is non-editable. For example, values calculated from previous inputs.
Research will be required for additional variants.
eQ
/components/_summary.scss
<div class="panel panel--error u-mb-s" data-qa="error">
<div class="panel__header">
<h1 class="panel__title venus">This page has an error.</h1>
</div>
<div class="panel__body" data-qa="error-body">
<p class="mars">This <strong>must be corrected</strong> to continue.</p>
<ul class="list list--bare">
<li class="list__item mars">
1) <a class="js-inpagelink" href="#sales-of-food">Change one or more of the figures so they total the sum of £600.</a>
</li>
</ul>
</div>
</div>
<div class="summary">
<h2 class="summary__title neptune" id="">Summary - Section Title</h2>
<div class="summary__block">
<div class="summary__item">
<div class="grid">
<div class="grid__col col-12@xs col-6@m">
<div class="summary__question mars">For the period 1 May 2017 to 31 May 2017, what was the total turnover of Essential Enterprise Ltd.?</div>
</div>
<div class="grid__col col-8@xs col-4@m">
<div class="summary__answer venus">£600.00</div>
</div>
<div class="grid__col col-4@xs col-2@m">
<div class="summary__link mars">
<a href="#edit">Change <span class="u-vh">your answer for: What are the dates of the sales period you are reporting for?. The current value is: 01 January 2015 to 02 February 2017</span></a>
</div>
</div>
</div>
</div>
<div class="summary__item summary__item--error">
<p class="summary__error-text venus">Change one or more of the figures so they total the sum of £600.</p>
<div class="grid">
<div class="grid__col col-12@xs col-6@m">
<div class="summary__question mars">What was the value of the business's total sales of food?</div>
</div>
<div class="grid__col col-8@xs col-4@m">
<div class="summary__answer venus">£300.00</div>
</div>
<div class="grid__col col-4@xs col-2@m">
<div class="summary__link mars">
<a id="sales-of-food" href="#edit">
Change <span class="u-vh">your answer for: What was the value of the business's total sales of food?. The current value is: £300.00</span>
</a>
</div>
</div>
</div>
</div>
<div class="summary__item summary__item--error">
<div class="grid">
<div class="grid__col col-12@xs col-6@m">
<div class="summary__question mars">What was the value of the business's total sales of alcohol, confectionery and tobacco?</div>
</div>
<div class="grid__col col-8@xs col-4@m">
<div class="summary__answer venus">£200.00</div>
</div>
<div class="grid__col col-4@xs col-2@m">
<div class="summary__link mars">
<a href="#edit">
Change <span class="u-vh">your answer for: What was the value of the business's total sales of alcohol, confectionery and tobacco?. The current value is: £200.00</span>
</a>
</div>
</div>
</div>
</div>
<div class="summary__item summary__item--error">
<div class="grid">
<div class="grid__col col-12@xs col-6@m">
<div class="summary__question mars">What was the value of the business's total sales of clothing and footwear?</div>
</div>
<div class="grid__col col-8@xs col-4@m">
<div class="summary__answer venus">£50.00</div>
</div>
<div class="grid__col col-4@xs col-2@m">
<div class="summary__link mars">
<a href="#edit">
Change <span class="u-vh">your answer for: What was the value of the business's total sales of clothing and footwear?. The current value is: £50.00</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
/* No context defined for this component. */