Component

Summary list

Use the summary list to summarise information, for example, a user’s responses at the end of a form.

This component extends the Summary list component in the GOV.UK Design System allowing the rendering of multiple groups of lists, and actions at the group level.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Title, summary and body

Title: Ethical standards for public service providers
Summary: Find out more about our reviews on the subject of ethical standards for public service providers, including our 2014 report, 2015 guidance and 2018 follow-up publication.
Body: After the government decided in 2013 to expand the remit of the Committee to include public service providers, the Committee on Standards in Public Life produced our first report on the issue: Ethical Standards for Providers of Public Services in 2014.

How to call this component

<%= render "govuk_publishing_components/components/summary_list", {
  title: "Title, summary and body",
  items: [
    {
      field: "Title",
      value: "Ethical standards for public service providers"
    },
    {
      field: "Summary",
      value: "Find out more about our reviews on the subject of ethical standards for public service providers, including our 2014 report, 2015 guidance and 2018 follow-up publication."
    },
    {
      field: "Body",
      value: "After the government decided in 2013 to expand the remit of the Committee to include public service providers, the Committee on Standards in Public Life produced our first report on the issue: Ethical Standards for Providers of Public Services in 2014."
    }
  ]
} %>

GOV.UK Design System

This component incorporates components from the GOV.UK Design System:

Summary-list

Accessibility acceptance criteria

Action links in the component must:

indicate what the action refers to (e.g. Change name)

Links in the component must:

accept focus
be focusable with a keyboard
be usable with a keyboard
indicate when they have focus
change in appearance when touched (in the touch-down state)
change in appearance when hovered
be usable with touch
be usable with voice commands
have visible text
have meaningful text

Other examples

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

id - accepts a string for the element ID attribute
data_attributes - accepts a hash of data attributes
aria - accepts a hash of aria attributes
classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
margin_bottom - accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale
role - accepts a space separated string of roles
lang - accepts a language attribute value
open - accepts an open attribute value (true or false)
hidden - accepts an empty string, ‘hidden’, or ‘until-found’
tabindex - accepts an integer. The integer can also be passed as a string
dir - accepts ‘rtl’, ‘ltr’, or ‘auto’
type - accepts any valid type attribute e.g. ‘button’, ‘submit’, ‘text’
rel - accepts any valid rel attribute e.g. ‘nofollow’
target - accepts a valid target attribute e.g. ‘_blank’
title - accepts any string
draggable - accepts a draggable attribute value (“true” or “false”)

Without title (preview)

Title: Ethical standards for public service providers
Summary: Find out more about our reviews on the subject of ethical standards for public service providers, including our 2014 report, 2015 guidance and 2018 follow-up publication.

<%= render "govuk_publishing_components/components/summary_list", {
  items: [
    {
      field: "Title",
      value: "Ethical standards for public service providers"
    },
    {
      field: "Summary",
      value: "Find out more about our reviews on the subject of ethical standards for public service providers, including our 2014 report, 2015 guidance and 2018 follow-up publication."
    }
  ]
} %>

Without borders (preview)

Title, summary and body

Title: Ethical standards for public service providers
Summary: Find out more about our reviews on the subject of ethical standards for public service providers, including our 2014 report, 2015 guidance and 2018 follow-up publication.
Body: After the government decided in 2013 to expand the remit of the Committee to include public service providers, the Committee on Standards in Public Life produced our first report on the issue: Ethical Standards for Providers of Public Services in 2014.

<%= render "govuk_publishing_components/components/summary_list", {
  title: "Title, summary and body",
  items: [
    {
      field: "Title",
      value: "Ethical standards for public service providers"
    },
    {
      field: "Summary",
      value: "Find out more about our reviews on the subject of ethical standards for public service providers, including our 2014 report, 2015 guidance and 2018 follow-up publication."
    },
    {
      field: "Body",
      value: "After the government decided in 2013 to expand the remit of the Committee to include public service providers, the Committee on Standards in Public Life produced our first report on the issue: Ethical Standards for Providers of Public Services in 2014."
    }
  ],
  borderless: true
} %>

With edit on section (preview)

For all links shown in the component, see the with customised links example for guidance.

Title, summary and body

Change

Title: Ethical standards for public service providers
Summary: Find out more about our reviews on the subject of ethical standards for public service providers, including our 2014 report, 2015 guidance and 2018 follow-up publication.
Body: After the government decided in 2013 to expand the remit of the Committee to include public service providers, the Committee on Standards in Public Life produced our first report on the issue: Ethical Standards for Providers of Public Services in 2014.

<%= render "govuk_publishing_components/components/summary_list", {
  title: "Title, summary and body",
  items: [
    {
      field: "Title",
      value: "Ethical standards for public service providers"
    },
    {
      field: "Summary",
      value: "Find out more about our reviews on the subject of ethical standards for public service providers, including our 2014 report, 2015 guidance and 2018 follow-up publication."
    },
    {
      field: "Body",
      value: "After the government decided in 2013 to expand the remit of the Committee to include public service providers, the Committee on Standards in Public Life produced our first report on the issue: Ethical Standards for Providers of Public Services in 2014."
    }
  ],
  edit: {
    href: "edit-title-summary-body",
    data_attributes: {
      gtm: "edit-title-summary-body"
    }
  }
} %>

With delete on section (preview)

For all links shown in the component, see the with customised links example for guidance.

Title, summary and body

Delete

Title: Ethical standards for public service providers
Summary: Find out more about our reviews on the subject of ethical standards for public service providers, including our 2014 report, 2015 guidance and 2018 follow-up publication.
Body: After the government decided in 2013 to expand the remit of the Committee to include public service providers, the Committee on Standards in Public Life produced our first report on the issue: Ethical Standards for Providers of Public Services in 2014.

<%= render "govuk_publishing_components/components/summary_list", {
  title: "Title, summary and body",
  items: [
    {
      field: "Title",
      value: "Ethical standards for public service providers"
    },
    {
      field: "Summary",
      value: "Find out more about our reviews on the subject of ethical standards for public service providers, including our 2014 report, 2015 guidance and 2018 follow-up publication."
    },
    {
      field: "Body",
      value: "After the government decided in 2013 to expand the remit of the Committee to include public service providers, the Committee on Standards in Public Life produced our first report on the issue: Ethical Standards for Providers of Public Services in 2014."
    }
  ],
  delete: {
    href: "delete-title-summary-body",
    data_attributes: {
      gtm: "delete-title-summary-body"
    }
  }
} %>

With edit and delete on section (preview)

For all links shown in the component, see the with customised links example for guidance.

Title, summary and body

Title: Ethical standards for public service providers
Summary: Find out more about our reviews on the subject of ethical standards for public service providers, including our 2014 report, 2015 guidance and 2018 follow-up publication.
Body: After the government decided in 2013 to expand the remit of the Committee to include public service providers, the Committee on Standards in Public Life produced our first report on the issue: Ethical Standards for Providers of Public Services in 2014.

<%= render "govuk_publishing_components/components/summary_list", {
  title: "Title, summary and body",
  items: [
    {
      field: "Title",
      value: "Ethical standards for public service providers"
    },
    {
      field: "Summary",
      value: "Find out more about our reviews on the subject of ethical standards for public service providers, including our 2014 report, 2015 guidance and 2018 follow-up publication."
    },
    {
      field: "Body",
      value: "After the government decided in 2013 to expand the remit of the Committee to include public service providers, the Committee on Standards in Public Life produced our first report on the issue: Ethical Standards for Providers of Public Services in 2014."
    }
  ],
  edit: {
    href: "edit-title-summary-body",
    data_attributes: {
      gtm: "edit-title-summary-body"
    }
  },
  delete: {
    href: "delete-title-summary-body",
    data_attributes: {
      gtm: "delete-title-summary-body"
    }
  }
} %>

With customised links (preview)

For all links shown in the component, visually hidden text containing the name of the thing it refers to is automatically appended. This offers a better experience for screen reader users by making the link text unique and more explicit. In the example below, the link text would be Change Title, summary and body.

The text of the link can be customised using the link_text option. Take care that the provided link_text still makes sense to screen readers when combined with the title. For instance, Reorder link text and Items title becomes Reorder Items, which reads fine, but link text of Summary would read as Summary Items, which does not make sense.

To override this behaviour, use link_text_no_enhance on the link in question, as shown. This will remove the visually hidden text, allowing you to add your own. The component will render a span element with a class of govuk-visually-hidden included in a passed capture block as the link_text parameter.

Title, summary and body

Edit this document

Title: Rural conservation techniques; Change Title
Body: Following the land use committee change to overreaching rural byelaws in 2009, further policies were adopted.; Edit Body

Remove

<%= render "govuk_publishing_components/components/summary_list", {
  title: "Title, summary and body",
  items: [
    {
      field: "Title",
      value: "Rural conservation techniques",
      edit: {
        href: "edit-title",
        text: "Edit",
        data_attributes: {
          gtm: "edit-title"
        }
      }
    },
    {
      field: "Body",
      value: "Following the land use committee change to overreaching rural byelaws in 2009, further policies were adopted.",
      edit: {
        href: "edit-body",
        link_text: "Edit"
      },
      delete: {
        href: "delete-body",
        link_text: "Remove",
        link_text_no_enhance: true
      }
    }
  ],
  edit: {
    href: "edit-title-summary-body",
    link_text: sanitize("Edit this document <span class=\"govuk-visually-hidden\">my hidden text for screenreaders</span>"),
    link_text_no_enhance: true
  }
} %>

With custom section heading (preview)

Title, summary and body

Title: Ethical standards for public service providers
Summary: Find out more about our reviews on the subject of ethical standards for public service providers, including our 2014 report, 2015 guidance and 2018 follow-up publication.
Body: After the government decided in 2013 to expand the remit of the Committee to include public service providers, the Committee on Standards in Public Life produced our first report on the issue: Ethical Standards for Providers of Public Services in 2014.

<%= render "govuk_publishing_components/components/summary_list", {
  title: "Title, summary and body",
  items: [
    {
      field: "Title",
      value: "Ethical standards for public service providers"
    },
    {
      field: "Summary",
      value: "Find out more about our reviews on the subject of ethical standards for public service providers, including our 2014 report, 2015 guidance and 2018 follow-up publication."
    },
    {
      field: "Body",
      value: "After the government decided in 2013 to expand the remit of the Committee to include public service providers, the Committee on Standards in Public Life produced our first report on the issue: Ethical Standards for Providers of Public Services in 2014."
    }
  ],
  heading_level: 2,
  heading_size: "l"
} %>

With edit on some individual items (preview)

For all links shown in the component, see the with customised links example for guidance.

Title, summary and body

Title: Ethical standards for public service providers
Summary: Find out more about our reviews on the subject of ethical standards for public service providers, including our 2014 report, 2015 guidance and 2018 follow-up publication.; Change Summary

Delete Summary
Body: After the government decided in 2013 to expand the remit of the Committee to include public service providers, the Committee on Standards in Public Life produced our first report on the issue: Ethical Standards for Providers of Public Services in 2014.; Edit Body

Remove Body

<%= render "govuk_publishing_components/components/summary_list", {
  title: "Title, summary and body",
  items: [
    {
      field: "Title",
      value: "Ethical standards for public service providers"
    },
    {
      field: "Summary",
      value: "Find out more about our reviews on the subject of ethical standards for public service providers, including our 2014 report, 2015 guidance and 2018 follow-up publication.",
      edit: {
        href: "edit-summary"
      },
      delete: {
        href: "delete-summary"
      }
    },
    {
      field: "Body",
      value: "After the government decided in 2013 to expand the remit of the Committee to include public service providers, the Committee on Standards in Public Life produced our first report on the issue: Ethical Standards for Providers of Public Services in 2014.",
      edit: {
        href: "edit-body",
        link_text: "Edit"
      },
      delete: {
        href: "delete-body",
        link_text: "Remove"
      }
    }
  ]
} %>

Wide title layout (preview)

Allows a slightly adjusted layout for longer text in the field name.

Privacy settings

GOV.UK can use cookies while you’re signed in: No; Change GOV.UK can use cookies while you’re signed in
GOV.UK can send you feedback emails: Yes; Change GOV.UK can send you feedback emails

<%= render "govuk_publishing_components/components/summary_list", {
  title: "Privacy settings",
  wide_title: true,
  items: [
    {
      field: "GOV.UK can use cookies while you’re signed in",
      value: "No",
      edit: {
        href: "edit-cookies"
      }
    },
    {
      field: "GOV.UK can send you feedback emails",
      value: "Yes",
      edit: {
        href: "edit-feedback"
      }
    }
  ]
} %>

With data attributes (preview)

Data attributes can be passed to individual items within the component as shown.

Title, summary and body

Title: Ethical standards for public service providers

<%= render "govuk_publishing_components/components/summary_list", {
  title: "Title, summary and body",
  items: [
    {
      field: "Title",
      value: "Ethical standards for public service providers",
      data: {
        module: "something"
      }
    }
  ]
} %>

With block (preview)

Use the summary list with a block when you need to show an empty state message or load another component.

Topics

No topics specified for this document.

<%= render "govuk_publishing_components/components/summary_list", {
  title: "Topics"
} do %>
  <p class="govuk-body">No topics specified for this document.</p>
<% end %>