DFE-Digital/govuk-components

View on GitHub
guide/content/components/summary-list.slim

Summary

Maintainability
Test Coverage
---
title: Summary list
---

p
  | Use the summary list to summarise information, such as a user’s
    responses at the end of a form.

== render('/partials/example.*',
  caption: "A summary list with various entries",
  code: summary_list_normal) do

  markdown:
    Summary lists contain one or more rows with keys and values. Rows can
    optionally contain actions which are links to other pages.

    The keys and values can either be set using the `text` argument or by
    passing a block of HTML.

    Actions need `text` to set the link text and `href` for the link target.
    When the same action text is used multiple times, like ‘Change’ in the
    example below, we can provide the `visually_hidden_text` argument to
    describe what we’re changing.

    The summary list expects rows to have actions, rows without actions
    will automatically have the class `govuk-summary-list__row--no-actions`
    applied to maintain consistent alignment.

    The visually hidden text will be rendered immediately after the link.

== render('/partials/example.*',
  caption: "Summary lists without actions",
  code: summary_list_without_actions) do

  markdown:
    When there are no user actions and the summary list is only used to
    display static information, the actions column can be hidden entirely
    using `actions: false`. Doing this makes the values column wider
    consuming the remaining space.

== render('/partials/example.*',
  caption: "Summary lists with missing information",
  code: summary_list_with_missing_information) do

  markdown:
    If a row has missing information, include a link to add the information within the value column instead of as an action.

== render('/partials/example.*',
  caption: "Building a summary list directly from data",
  code: summary_list_from_rows,
  data: summary_list_from_rows_data) do

  markdown:
    Summary lists can also be generated by passing an array of hashes to
    `rows:`.

    The format matches the [Nunjucks macros][0] except for setting key and
    value contents using the `html` argument. Use blocks directly for custom
    HTML.

    [0]: https://design-system.service.gov.uk/components/summary-list/

== render('/partials/example.*',
  caption: "Summary cards",
  code: summary_list_card,
  data: summary_list_card_data) do

  markdown:
    If you’re showing multiple summary lists on a page, you can show each list
    within a summary card. This lets you visually separate each summary list
    and give each a title and some actions.

    Use summary cards when you need to show:

    * multiple summary lists that all describe the same type of thing, such as people
    * actions that will apply to all the items in a list

markdown:
  Arbitrary HTML content can be passed into the `govuk_summary_card` block and it will
  render in the place of a summary list.

== render('/partials/related-navigation.*', links: summary_list_info)