# Comparison card

> The card show_comparison renders, two or three options side by side on the same traits, with the one the assistant recommends.

The comparison card puts two or three options side by side on the same traits, marks the one the assistant recommends, and says why. The assistant shows it with `show_comparison` when the user asks to compare.

![The sheet panel on Orders. The user asked to compare orders 1042 and 1043, and a comparison card shows both on customer, items, total and status, recommending Acme's order.](https://superassist.app/_astro/comparison-light.DGRLfLrG.webp)

## Usage

`AssistedProvider` lends `show_comparison` on every page. There is nothing to set up. See [Show a table, a spec or a comparison](https://superassist.app/how-to/show-structured-answers.md).

## What the model sees

`show_comparison` is described as:

```txt wrap
Show the user two or three options side by side on the same traits, with the one you recommend and why. For structured answers the user can scan, like comparing two orders.
```

| Parameter     | Type                                                                                                                        | Required |
| ------------- | --------------------------------------------------------------------------------------------------------------------------- | -------- |
| `traits`      | One or more strings, the traits' names                                                                                      | Yes      |
| `options`     | Two or three of `{ name: string; headline: string; traits: string[] }`, `traits` the option's value for each trait in order | Yes      |
| `recommended` | `string`, the name of the recommended option                                                                                | Yes      |
| `reason`      | `string`, one sentence on why                                                                                               | Yes      |

The call answers `Showed the user a comparison.` It changes nothing on the page.

## Props

None. The package renders it in place of the `show_comparison` call. Replace it with `cards.comparison` on `AssistedProvider`, see [Swap a card](https://superassist.app/how-to/swap-a-card.md). The card carries `data-slot="comparison-card"`.

## See also

- [Table card](https://superassist.app/components/cards/table-card.md) for more than three records.