SDC Pattern Library

Summary: Multiple textarea

Rationale

Summary is used to present a clear summarised output of values to the user.

A summary can comprise multiple summary components of either variant.

Single

The single summary component displays a singular data element.

Multiple

The multiple summary component displays a multiple data element.

Grouped

The grouped summary displays contiguous data.

Variants

The .summary__link may be removed for data which is non-editable. For example, values calculated from previous inputs.

Research

Research will be required for additional variants.

Usage

Scope

eQ

Dependencies

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