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
<!-- Single summary -->
<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">What are the dates of the sales period you are reporting for?</div>
</div>
<div class="grid__col col-8@xs col-4@m">
<div class="summary__answer venus">01 January 2015 to 02 February 2017</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>
</div>
<!-- Single summary without edit link -->
<div class="summary">
<h2 class="summary__title neptune">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">Total turnover</div>
</div>
<div class="grid__col col-8@xs col-4@m">
<div class="summary__answer venus">
£234,000.00
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Grouped -->
<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">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">£123.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 food?. The current value is: £123.00</span>
</a>
</div>
</div>
</div>
</div>
<div class="summary__item">
<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">£987.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: £987.00</span>
</a>
</div>
</div>
</div>
</div>
<div class="summary__item">
<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">£567.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: £567.00</span>
</a>
</div>
</div>
</div>
</div>
<div class="summary__item">
<div class="grid">
<div class="grid__col col-12@xs col-10@m">
<div class="summary__question mars">Description</div>
</div>
<div class="grid__col col-8@xs col-10@m">
<div class="summary__answer summary__answer--textarea venus">This is textarea output with a longer piece of text to demonstrate how it appears on the summary page.</div>
</div>
<div class="grid__col col-4@xs col-2@m">
<div class="summary__link summary__link--textarea mars">
<a href="#">Change <span class="u-vh">your answer for: Description</span></a>
</div>
</div>
</div>
</div>
<div class="summary__item">
<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 household goods?</div>
</div>
<div class="grid__col col-8@xs col-4@m">
<div class="summary__answer venus">£5,678.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 household goods?. The current value is: £5,678.00</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Multiple -->
<div class="summary">
<h2 class="summary__title neptune" id="">Summary - Section Title</h2>
<div class="summary__block">
<div class="summary__item summary__item--multiple">
<div class="grid">
<div class="grid__col col-12@m">
<div class="summary__question mars">Please enter test values (none mandatory)</div>
</div>
</div>
<div class="grid">
<div class="grid__col col-12@xs col-6@m">
<div class="summary__label mars">Currency Test</div>
</div>
<div class="grid__col col-8@xs col-4@m">
<div class="summary__answer venus">£1,000.00</div>
</div>
<div class="grid__col col-4@xs col-2@m">
<div class="summary__link mars">
<a href="#">Change <span class="u-vh">your answer for: Currency Test. The current value is: £1,000.00</span></a>
</div>
</div>
</div>
<div class="grid">
<div class="grid__col col-12@xs col-6@m">
<div class="summary__label mars">Kilometres Square</div>
</div>
<div class="grid__col col-8@xs col-4@m" id="square-kilometres-answer">
<div class="summary__answer venus">11 km²</div>
</div>
<div class="grid__col col-4@xs col-2@m">
<div class="summary__link mars">
<a href="#">Change <span class="u-vh">your answer for: Kilometres Square. The current value is: 11 km²</span></a>
</div>
</div>
</div>
<div class="grid">
<div class="grid__col col-12@xs col-6@m">
<div class="summary__label mars">Decimal test to 2 decimal places</div>
</div>
<div class="grid__col col-8@xs col-4@m">
<div class="summary__answer venus">11.33</div>
</div>
<div class="grid__col col-4@xs col-2@m">
<div class="summary__link mars">
<a href="#">Change <span class="u-vh">your answer for: Decimal test to 2 decimal places. The current value is: 11.33</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Multiple textarea -->
<div class="summary">
<h2 class="summary__title neptune" id="">Summary - Section Title</h2>
<div class="summary__block">
<div class="summary__item summary__item--multiple">
<div class="grid">
<div class="grid__col col-12@m">
<div class="summary__question mars">Please enter test values (none mandatory)</div>
</div>
</div>
<div class="grid">
<div class="grid__col col-12@xs col-6@m">
<div class="summary__label mars">Currency Test</div>
</div>
<div class="grid__col col-8@xs col-4@m">
<div class="summary__answer venus">£1,000.00</div>
</div>
<div class="grid__col col-4@xs col-2@m">
<div class="summary__link mars">
<a href="#">Change <span class="u-vh">your answer for: Currency Test. The current value is: £1,000.00</span></a>
</div>
</div>
</div>
<div class="grid">
<div class="grid__col col-10@xs col-12@m">
<div class="summary__label mars">Description</div>
</div>
<div class="grid__col col-8@xs col-10@m">
<div class="summary__answer summary__answer--textarea venus">This is textarea output with a longer piece of text to demonstrate how it appears on the summary page.</div>
</div>
<div class="grid__col col-4@xs col-2@m">
<div class="summary__link summary__link--textarea mars">
<a href="#">Change <span class="u-vh">your answer for: Description</span></a>
</div>
</div>
</div>
<div class="grid">
<div class="grid__col col-12@xs col-6@m">
<div class="summary__label mars">Decimal test to 2 decimal places</div>
</div>
<div class="grid__col col-8@xs col-4@m">
<div class="summary__answer venus">11.33</div>
</div>
<div class="grid__col col-4@xs col-2@m">
<div class="summary__link mars">
<a href="#">Change <span class="u-vh">your answer for: Decimal test to 2 decimal places. The current value is: 11.33</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Validation across multiple pages -->
<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>
/* Single summary: No context defined */
/* Single summary without edit link: No context defined */
/* Grouped: No context defined */
/* Multiple: No context defined */
/* Multiple textarea: No context defined */
/* Validation across multiple pages: No context defined */