Toggle menu
  1. Community Area
  2. Release Notes
  3. Video Guides
  4. gossinteractive.com
  5. MyGOSS

Summary Block

Summary blocks can be used to display data in a structured but flexible way across products.

When to use the Summary Block

Use summary blocks to organise content into clear, concise sections, helping users quickly grasp essential points without overwhelming them.

These components work well for displaying structured information—like overviews, definitions, and quick reference items—allowing users to scan and expand on details as needed for a more accessible, digestible experience.

Examples in GOSS products

  • Viewing summaries in the Self Service template
  • Displaying summaries of form submissions

 

Accessibility considerations

Maintaining the structure of description lists is essential for accessibility, as it preserves the link between terms and their descriptions. Deviating from this structure can disrupt content flow, making it harder for assistive technologies to convey information accurately.

Additional notes

After researching the best format to display data summaries, we've determined that using the Description List element provides the most effective structure.

Description lists, identified by the <dl> element in HTML, offer a clear way to organize data pairs consisting of terms and their corresponding descriptions or definitions. Here are some key reasons why description lists are commonly chosen for such data structures:

  1. Semantic Structure: Description lists give the data semantic meaning, clearly illustrating the relationship between each term and its definition or description
  2. Accessibility: By employing appropriate HTML elements such as <dt> for terms and <dd> for descriptions, we enhance accessibility. Screen readers and other assistive technologies can interpret the data structure more accurately, aiding users with disabilities in comprehension.

In summary, description lists provide a structured and accessible method for presenting paired data, making them a preferred choice for diverse web content.

Additionally, the structure aligns with the principles of GOV.UK's design system, as demonstrated in GOV.UK Summary List.

We've developed a new component,  .gi-summary-block , designed to help you consistently structure data with labels and values across all our products.

One notable improvement is its mobile-friendliness compared to the previous icmformdatatable table.

This component can also replace the existing structure generated by the form designer, offering enhanced flexibility and usability.

Basic summary block

A summary block with no additional configuration options.

Summary title

Key label
Value text
Key label

This is summary about the section

Value text
Key label
Value text
HTML 
<div class="gi-summary-block">
    <h2 class="gi-summary-block__title"> Summary title</h2>
    <div class="gi-summary-block__content">
        <dl class="gi-summary-blocklist">
            <div class="gi-summary-blocklist__row">
                <dt class="gi-summary-blocklist__key"> Key label </dt>
                <dd class="gi-summary-blocklist__value"> Value text </dd>
            </div>
            <div class="gi-summary-blocklist__row">
                <dt class="gi-summary-blocklist__key"> Key label <p class="gi-summary-blocklist__summary"> This is
                        summary about the section </p>
                </dt>
                <dd class="gi-summary-blocklist__value"> Value text </dd>
            </div>
            <div class="gi-summary-blocklist__row">
                <dt class="gi-summary-blocklist__key"> Key label </dt>
                <dd class="gi-summary-blocklist__value"> Value text </dd>
            </div>
        </dl>
    </div>
</div>

Summary block with different heading element

A summary block with a H3 element as the heading

The heading needs to be reviewed when this component is added to make sure the order is correct in the page.

Summary title - Heading 3

Key label
Value text
Key label

This is summary about the section

Value text
Key label
Value text
HTML 
<div class="gi-summary-block">
    <h3 class="gi-summary-block__title"> Summary title - Heading 3 </h3>
    <div class="gi-summary-block__content">
        <dl class="gi-summary-blocklist">
            <div class="gi-summary-blocklist__row">
                <dt class="gi-summary-blocklist__key"> Key label </dt>
                <dd class="gi-summary-blocklist__value"> Value text </dd>
            </div>
            <div class="gi-summary-blocklist__row">
                <dt class="gi-summary-blocklist__key"> Key label <p class="gi-summary-blocklist__summary"> This is
                        summary about the section </p>
                </dt>
                <dd class="gi-summary-blocklist__value"> Value text </dd>
            </div>
            <div class="gi-summary-blocklist__row">
                <dt class="gi-summary-blocklist__key"> Key label </dt>
                <dd class="gi-summary-blocklist__value"> Value text </dd>
            </div>
        </dl>
    </div>
</div>

Summary block with actions

A summary block with a H2 element as the heading and an extra column for actions

This example has an extra <dd> element for the action links.

<a class="gi-summary-blocklist__link" href="#">
    Change
    <span class="accessibility">
         Key label (Summary title)
    </span>
</a>

Remember to write the change accessibility eg add either a span element with the class accessibility or an aria-label to say what is going to change.

 

Summary title - Heading 2 with actions

Key label
Value text
Change Key label (Summary title)
Key label

This is summary about the section

Value text
Change Key label (Summary title)
Key label
Value text
Change Key label (Summary title)
HTML 
<div class="gi-summary-block">
    <h2 class="gi-summary-block__title"> Summary title - Heading 2 with actions </h2>
    <div class="gi-summary-block__content">
        <dl class="gi-summary-blocklist">
            <div class="gi-summary-blocklist__row">
                <dt class="gi-summary-blocklist__key"> Key label </dt>
                <dd class="gi-summary-blocklist__value"> Value text </dd>
                <dd class="gi-summary-blocklist__actions"> <a class="gi-summary-blocklist__link"
                        href="#">Change<span
                            class="accessibility"> Key label (Summary title)</span></a> </dd>
            </div>
            <div class="gi-summary-blocklist__row">
                <dt class="gi-summary-blocklist__key"> Key label <p class="gi-summary-blocklist__summary"> This is
                        summary about the section </p>
                </dt>
                <dd class="gi-summary-blocklist__value"> Value text </dd>
                <dd class="gi-summary-blocklist__actions"> <a class="gi-summary-blocklist__link"
                        href="#">Change<span
                            class="accessibility"> Key label (Summary title)</span></a> </dd>
            </div>
            <div class="gi-summary-blocklist__row">
                <dt class="gi-summary-blocklist__key"> Key label </dt>
                <dd class="gi-summary-blocklist__value"> Value text </dd>
                <dd class="gi-summary-blocklist__actions"> <a class="gi-summary-blocklist__link"
                        href="#">Change<span
                            class="accessibility"> Key label (Summary title)</span></a> </dd>
            </div>
        </dl>
    </div>
</div>

Summary block with light styling

A summary block with the light modifier applied.

This version creates a lighter style of the summary block by removing the heading background and extra borders.

<div class="gi-summary-block gi-summary-block--light">

 

Summary title - Light styles

Key label
Value text
Key label

This is summary about the section

Value text
Key label
Value text
HTML 
<div class="gi-summary-block gi-summary-block--light">
    <h3 class="gi-summary-block__title"> Summary title - Light styles </h3>
    <div class="gi-summary-block__content">
        <dl class="gi-summary-blocklist">
            <div class="gi-summary-blocklist__row">
                <dt class="gi-summary-blocklist__key"> Key label </dt>
                <dd class="gi-summary-blocklist__value"> Value text </dd>
            </div>
            <div class="gi-summary-blocklist__row">
                <dt class="gi-summary-blocklist__key"> Key label <p class="gi-summary-blocklist__summary"> This is
                        summary about the section </p>
                </dt>
                <dd class="gi-summary-blocklist__value"> Value text </dd>
            </div>
            <div class="gi-summary-blocklist__row">
                <dt class="gi-summary-blocklist__key"> Key label </dt>
                <dd class="gi-summary-blocklist__value"> Value text </dd>
            </div>
        </dl>
    </div>
</div>

Tasklist summary block

A summary block using an ordered list structure instead of description lists.

This version of the summary block can be used to create a task list for a user to complete.

<ol>
    <li>
        <div>
instead of
<dl>
     <div>
             <dt>
             <dd>

The component uses an ordered list instead of description list as you wish the users to complete the list in a certain way.

You need at add the modifier of gi-summary-block--tasklist to add additional styling for the tags

Tasklist example - Hub and Spoke with link elements

  1. Section 1
    Completed
  2. Section 2

    This is summary about the section

    In progress
  3. Section 3
    Not started
  4. Section 4 with an extra long title that will go on two lines
    Cannot start yet
HTML 
<div class="gi-summary-block gi-summary-block--tasklist">
    <h2 class="gi-summary-block__title"> Tasklist example - Hub and Spoke with link elements </h2>
    <div class="gi-summary-block__content">
        <ol class="gi-summary-blocklist">
            <li class="gi-summary-blocklist__row">
                <div class="gi-summary-blocklist__key"> <a class="gi-summary-blocklist__link"
                        href="#"> Section 1 </a> </div>
                <div class="gi-summary-blocklist__actions"> <span class="gi-tag gi-tag--completed">Completed</span>
                </div>
            </li>
            <li class="gi-summary-blocklist__row">
                <div class="gi-summary-blocklist__key"> <a class="gi-summary-blocklist__link"
                        href="#"> Section 2 </a>
                    <p class="gi-summary-blocklist__summary"> This is summary about the section </p>
                </div>
                <div class="gi-summary-blocklist__actions"> <span class="gi-tag gi-tag--in-progress">In progress</span>
                </div>
            </li>
            <li class="gi-summary-blocklist__row">
                <div class="gi-summary-blocklist__key"> Section 3 </div>
                <div class="gi-summary-blocklist__actions"> <span class="gi-tag gi-tag--not-started">Not started</span>
                </div>
            </li>
            <li class="gi-summary-blocklist__row">
                <div class="gi-summary-blocklist__key"> Section 4 with an extra long title that will go on two lines
                </div>
                <div class="gi-summary-blocklist__actions"> <span class="gi-tag gi-tag--cannot-start">Cannot start
                        yet</span> </div>
            </li>
        </ol>
    </div>
</div>

Check your answers (CYA) summary block

A summary block with the light modified applied and an extra column for actions.

This is an example of how form data can be displayed on a "Check your answers" page.

Your details - Check your answers example

Key label
Value text
Edit Key label (Your Details)
Key label
Value text
Edit Key label (Your Details)
Key label
Value text
Edit Key label (Your Details)
Key label
Value text
Edit Key label (Your Details)
HTML 
<div class="gi-summary-block gi-summary-block--light">
    <h2 class="gi-summary-block__title"> Your details - Check your answers example </h2>
    <div class="gi-summary-block__content">
        <dl class="gi-summary-blocklist">
            <div class="gi-summary-blocklist__row">
                <dt class="gi-summary-blocklist__key"> Key label </dt>
                <dd class="gi-summary-blocklist__value"> Value text </dd>
                <dd class="gi-summary-blocklist__actions"> <a class="gi-summary-blocklist__link"
                        href="#">Edit<span
                            class="accessibility"> Key label (Your Details)</span></a> </dd>
            </div>
            <div class="gi-summary-blocklist__row">
                <dt class="gi-summary-blocklist__key"> Key label </dt>
                <dd class="gi-summary-blocklist__value"> Value text </dd>
                <dd class="gi-summary-blocklist__actions"> <a class="gi-summary-blocklist__link"
                        href="#">Edit<span
                            class="accessibility"> Key label (Your Details)</span></a> </dd>
            </div>
            <div class="gi-summary-blocklist__row">
                <dt class="gi-summary-blocklist__key"> Key label </dt>
                <dd class="gi-summary-blocklist__value"> Value text </dd>
                <dd class="gi-summary-blocklist__actions"> <a class="gi-summary-blocklist__link"
                        href="#">Edit<span
                            class="accessibility"> Key label (Your Details)</span></a> </dd>
            </div>
            <div class="gi-summary-blocklist__row">
                <dt class="gi-summary-blocklist__key"> Key label </dt>
                <dd class="gi-summary-blocklist__value"> Value text </dd>
                <dd class="gi-summary-blocklist__actions"> <a class="gi-summary-blocklist__link"
                        href="#">Edit<span
                            class="accessibility"> Key label (Your Details)</span></a> </dd>
            </div>
        </dl>
    </div>
</div>

Event details summary block

A summary block with an extra column for actions.

This is an example that can be used for the event details in Self Service.

Event Details - Case Task Summary

Summary updated
Date 24 January 2024 15:50
View details Key label (Summary title)
Summary updated
Date 24 January 2024 15:50
View details Key label (Summary title)
Summary updated
Date 24 January 2024 15:50
View details Key label (Summary title)
HTML 
<div class="gi-summary-block gi-summary-block--cm-details">
    <h2 class="gi-summary-block__title"> Event Details - Case Task Summary </h2>
    <div class="gi-summary-block__content">
        <dl class="gi-summary-blocklist">
            <div class="gi-summary-blocklist__row">
                <dt class="gi-summary-blocklist__key"> Summary updated </dt>
                <dd class="gi-summary-blocklist__value"> <span class="nvp"> <span
                            class="nvp__label accessibility">Date</span> <span class="nvp__value"> <span
                                class="nvp__date">24 January 2024</span> <span class="nvp__time">15:50</span> </span>
                    </span> </dd>
                <dd class="gi-summary-blocklist__actions"> <a class="gi-summary-blocklist__link cta-link cta-link--link"
                        href="#">View details<span
                            class="accessibility"> Key label (Summary title)</span></a> </dd>
            </div>
            <div class="gi-summary-blocklist__row">
                <dt class="gi-summary-blocklist__key"> Summary updated </dt>
                <dd class="gi-summary-blocklist__value"> <span class="nvp"> <span
                            class="nvp__label accessibility">Date</span> <span class="nvp__value"> <span
                                class="nvp__date">24 January 2024</span> <span class="nvp__time">15:50</span> </span>
                    </span> </dd>
                <dd class="gi-summary-blocklist__actions"> <a class="gi-summary-blocklist__link cta-link cta-link--link"
                        href="#">View details<span
                            class="accessibility"> Key label (Summary title)</span></a> </dd>
            </div>
            <div class="gi-summary-blocklist__row">
                <dt class="gi-summary-blocklist__key"> Summary updated </dt>
                <dd class="gi-summary-blocklist__value"> <span class="nvp"> <span
                            class="nvp__label accessibility">Date</span> <span class="nvp__value"> <span
                                class="nvp__date">24 January 2024</span> <span class="nvp__time">15:50</span> </span>
                    </span> </dd>
                <dd class="gi-summary-blocklist__actions"> <a class="gi-summary-blocklist__link cta-link cta-link--link"
                        href="#">View details<span
                            class="accessibility"> Key label (Summary title)</span></a> </dd>
            </div>
        </dl>
    </div>
</div>

Share this page

Facebook icon Twitter icon email icon

Print

print icon