# salla-review-card (https://docs.salla.dev/twilight/react/web-components/salla-review-card)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

A card for one customer review: images (a swipeable slider when there are several), reviewer name with a verified
mark, 5 star rating, review text, and a link to the reviewed product with its image and name. Used by
`salla-reviews-page` for each review, and usable anywhere a single review should be shown, such as a home page
testimonials block.

Images: when the review has 2 or more images (`review.images`, an array of URLs) they are shown as a slider with
dots, which can be swiped or tapped. Otherwise the product images are used, as a slider if there are 2 or more, or
as one image. The product's sold count (`review.product.sold_quantity`) is shown only when the store setting
`store.settings.product.total_sold_enabled` is on. The slider dots are buttons with an English
`aria-label` ("Go to slide N").

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-review-card>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaReviewCard } from '@salla.sa/twilight-components-react/review-card';
```

## Example [#example]

```tsx
import { SallaReviewCard } from '@salla.sa/twilight-components-react/review-card';

export function Example() {
  return (
    <SallaReviewCard
      review={{
      name: 'Sara',
      stars: 5,
      has_order: true,
      content: 'Great quality and fast delivery.',
      images: [],
      product: { name: 'Cotton shirt', url: '/p/shirt', sold_quantity: 40, image: { url: '/img/shirt.jpg', alt: '' }, images: [] },
      }}
    />
  );
}
```

```ts
const card = document.createElement('salla-review-card');
card.review = {
  name: 'Sara',
  stars: 5,
  has_order: true,
  content: 'Great quality and fast delivery.',
  images: [],
  product: { name: 'Cotton shirt', url: '/p/shirt', sold_quantity: 40, image: { url: '/img/shirt.jpg', alt: '' }, images: [] },
};
document.body.appendChild(card);
```

## Properties [#properties]

| Property | Attribute | Description                                                                                                                                                                                                                                                                                                                                                                                                      | Type                                                                                                                                                                                                                                                                                                                                                                                 | Default |
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- |
| `review` | `review`  | The review to render. Uses `name`, `stars` (a number from 0 to 5), `has_order` (shows the verified mark), `content` (the review text, inserted as HTML, so it must be trusted or escaped), `images` (array of image URLs) and `product` (`{ name, url, image, images, sold_quantity }`, where images are `{ url, alt }`). `product` is read when the component loads, so set it before the element is connected. | `{ id?: number; replies?: Record<string, unknown>[]; content?: string; type?: string; avatar?: string; name?: string; stars?: number; is_pending?: boolean; has_order?: boolean; likes_count?: number; customer_id?: number; city?: string; date?: number; images?: string[]; text?: string; can_update?: boolean; product?: Product; shipping?: unknown; created_at?: CreatedAt; }` |         |

## Related [#related]

Used inside: [`<salla-reviews-page>`](https://docs.salla.dev/twilight/react/web-components/salla-reviews-page).