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="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>
/* No context defined for this component. */