SDC Pattern Library

Summary: Single summary without edit link

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