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

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