Component

Summary card

An extension of the Summary list component. It can be used where there are multiple groups of lists to be displayed in their own discrete sections.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Title

key one
value1
key two
value2

How to call this component

<%= render "govuk_publishing_components/components/summary_card", {
  title: "Title",
  rows: [
    {
      key: "key one",
      value: "value1"
    },
    {
      key: "key two",
      value: "value2"
    }
  ]
} %>

Accessibility acceptance criteria

accept focus
be focusable with a keyboard
be usable with a keyboard
indicate when it has focus

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

With custom-id (preview)

Title

key one
value1
key two
value2

<%= render "govuk_publishing_components/components/summary_card", {
  id: "custom_id",
  title: "Title",
  rows: [
    {
      key: "key one",
      value: "value1"
    },
    {
      key: "key two",
      value: "value2"
    }
  ]
} %>

With actions (preview)

key one
value1
key two
value2

<%= render "govuk_publishing_components/components/summary_card", {
  title: "Title",
  rows: [
    {
      key: "key one",
      value: "value1"
    },
    {
      key: "key two",
      value: "value2"
    }
  ],
  summary_card_actions: [
    {
      label: "View",
      href: "#1"
    },
    {
      label: "Edit",
      href: "#2"
    }
  ]
} %>

With destructive action (preview)

Title

Delete Title

key one
value1
key two
value2

<%= render "govuk_publishing_components/components/summary_card", {
  title: "Title",
  rows: [
    {
      key: "key one",
      value: "value1"
    },
    {
      key: "key two",
      value: "value2"
    }
  ],
  summary_card_actions: [
    {
      label: "Delete",
      href: "#1",
      destructive: true
    }
  ]
} %>

With row actions (preview)

Title

key one
value1: View key one

Edit key one
key two
value2: View key two

Edit key two

<%= render "govuk_publishing_components/components/summary_card", {
  title: "Title",
  rows: [
    {
      key: "key one",
      value: "value1",
      actions: [
        {
          label: "View",
          href: "#1"
        },
        {
          label: "Edit",
          href: "#2"
        }
      ]
    },
    {
      key: "key two",
      value: "value2",
      actions: [
        {
          label: "View",
          href: "#1"
        },
        {
          label: "Edit",
          href: "#2"
        }
      ]
    }
  ]
} %>

With row destructive action (preview)

Title

key
value: View key

Edit key

Delete key

<%= render "govuk_publishing_components/components/summary_card", {
  title: "Title",
  rows: [
    {
      key: "key",
      value: "value",
      actions: [
        {
          label: "View",
          href: "#1"
        },
        {
          label: "Edit",
          href: "#2"
        },
        {
          label: "Delete",
          href: "#3",
          destructive: true
        }
      ]
    }
  ]
} %>

With row action that opens in new tab (preview)

Title

key
value: View key (opens in new tab)

<%= render "govuk_publishing_components/components/summary_card", {
  title: "Title",
  rows: [
    {
      key: "key",
      value: "value",
      actions: [
        {
          label: "View",
          href: "#1",
          opens_in_new_tab: true
        }
      ]
    }
  ]
} %>

With row data attributes (preview)

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

Title

key one
value1

<%= render "govuk_publishing_components/components/summary_card", {
  title: "Title",
  rows: [
    {
      key: "key one",
      value: "value1",
      data: {
        module: "something"
      }
    }
  ]
} %>