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