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 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

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."
    }
  ]
} %>

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)

Title, summary and body

Change 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"
    }
  }
} %>

With delete on section (preview)

Title, summary and body

Delete 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."
    }
  ],
  delete: {
    href: "delete-title-summary-body",
    data_attributes: {
      gtm: "delete-title-summary-body"
    }
  }
} %>

With edit and delete on section (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."
    }
  ],
  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 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 custom link on section (preview)

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.

Items

Reorder Items

Item 1: Value 2
Item 2: Value 2
Item 3: Value 3

<%= render "govuk_publishing_components/components/summary_list", {
  edit: {
    href: "custom-link",
    link_text: "Reorder"
  },
  title: "Items",
  items: [
    {
      field: "Item 1",
      value: "Value 2"
    },
    {
      field: "Item 2",
      value: "Value 2"
    },
    {
      field: "Item 3",
      value: "Value 3"
    }
  ]
} %>

With edit on individual items (preview)

The link text can be optionally modified using the ‘link_text’ parameter, as for the edit link in previous examples.

Title, summary and body

Title: Ethical standards for public service providers; Change Title
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",
      edit: {
        href: "edit-title",
        text: "Edit",
        data_attributes: {
          gtm: "edit-title"
        }
      }
    },
    {
      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"
      }
    }
  ]
} %>

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 %>

Summary list

How it looks (preview) (preview all)

Title, summary and body

How to call this component

GOV.UK Design System

Accessibility acceptance criteria

Other examples

Without title (preview)

Without borders (preview)

Title, summary and body

With edit on section (preview)

Title, summary and body

With delete on section (preview)

Title, summary and body

With edit and delete on section (preview)

Title, summary and body

With custom section heading (preview)

Title, summary and body

With custom link on section (preview)

Items

With edit on individual items (preview)

Title, summary and body

With block (preview)

Topics