Component

Summary Card Component

An extension of Summary List Component

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 "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 "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 "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 "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 "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 "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 "components/summary_card", {
  title: "Title",
  rows: [
    {
      key: "key",
      value: "value",
      actions: [
        {
          label: "View",
          href: "#1",
          opens_in_new_tab: true
        }
      ]
    }
  ]
} %>