Filter summary example

Default

How it looks (preview)

Selected filters

Remove filter
Remove filter
Remove filter

How to call this example

<%= render "components/filter_summary", {
  reset_link_href: "#",
  reset_link_text: "Clear all filters",
  heading_level: 3,
  heading_text: "Selected filters",
  filters: [
    {
      label: "Filter 1",
      value: "Value 1",
      remove_href: "#",
      visually_hidden_prefix: "Remove filter"
    },
    {
      label: "Filter 2",
      value: "Value 2",
      remove_href: "#",
      visually_hidden_prefix: "Remove filter"
    },
    {
      label: "Filter 3",
      value: "Value that is so long that the styling needs to handle it correctly",
      remove_href: "#",
      visually_hidden_prefix: "Remove filter"
    }
  ]
} %>