Component

Summary Card List

Similar to the Summary Card Component, but renders an ordered list in place of a descriptive list with a key value pair.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Title

1. value1
2. value2

How to call this component

<%= render "components/summary_card_list", {
  title: "Title",
  rows: [
    {
      text: "value1"
    },
    {
      text: "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

1. value1
2. value2

<%= render "components/summary_card_list", {
  id: "custom_id",
  title: "Title",
  rows: [
    {
      text: "value1"
    },
    {
      text: "value2"
    }
  ]
} %>

With actions (preview)

1. value1
2. value2

<%= render "components/summary_card_list", {
  title: "Title",
  rows: [
    {
      text: "value1"
    },
    {
      text: "value2"
    }
  ],
  summary_card_actions: [
    {
      label: "View",
      href: "#1"
    },
    {
      label: "Edit",
      href: "#2"
    }
  ]
} %>

With destructive action (preview)

1. value1
2. value2

<%= render "components/summary_card_list", {
  title: "Title",
  rows: [
    {
      text: "value1"
    },
    {
      text: "value2"
    }
  ],
  summary_card_actions: [
    {
      label: "Delete",
      href: "#1",
      destructive: true
    }
  ]
} %>

With row actions (preview)

Title

1. value1
   View Edit
2. value2
   View Edit

<%= render "components/summary_card_list", {
  title: "Title",
  rows: [
    {
      text: "value1",
      actions: [
        {
          label: "View",
          href: "#1"
        },
        {
          label: "Edit",
          href: "#2"
        }
      ]
    },
    {
      text: "value2",
      actions: [
        {
          label: "View",
          href: "#1"
        },
        {
          label: "Edit",
          href: "#2"
        }
      ]
    }
  ]
} %>

With row destructive action (preview)

Title

1. value
   View Edit Delete

<%= render "components/summary_card_list", {
  title: "Title",
  rows: [
    {
      text: "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

1. value
   View

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