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



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

Embeds a single product card by product id, for example inside article or blog content.
It fetches the product when it loads and renders `custom-salla-product-card` if the theme registers it,
otherwise `salla-product-card`. Nothing is shown if the product cannot be loaded.
With `align="left"` or `"right"` it floats so text wraps around it, and its parent is made a `flow-root` so the float stays contained.

## Use it [#use-it]

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

```tsx
import { SallaProductCardEmbed } from '@salla.sa/twilight-components-react/product-card-embed';
```

## Example [#example]

```tsx
import { SallaProductCardEmbed } from '@salla.sa/twilight-components-react/product-card-embed';

export function Example() {
  return (
    <SallaProductCardEmbed productId="123" align="right" />
  );
}
```

```html
<salla-product-card-embed product-id="123" align="right"></salla-product-card-embed>
```

## Properties [#properties]

| Property    | Attribute    | Description                                                                                                                                                                                                      | Type                            | Default |
| ----------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ------- |
| `align`     | `align`      | Alignment of the card in the surrounding content: `left` floats it to the inline start side and `right` to the inline end side (so they swap in RTL), `center` centers it as a block. Not set means inline flow. | `"center" \| "left" \| "right"` |         |
| `productId` | `product-id` | Id of the product to show. It is fetched once when the component loads; nothing renders if it is empty.                                                                                                          | `number \| string`              |         |
| `source`    | `source`     | Tracking source for the embedded card. It is set as the card's `source` attribute and added as the `_svs` query parameter of the product link. Defaults to `embed-card`.                                         | `string`                        |         |