# salla-loyalty-hero (https://docs.salla.dev/twilight/react/web-components/salla-loyalty-hero)



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

<Callout title="Used inside salla-loyalty">
  [`<salla-loyalty>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty) renders this component for you. You rarely use it directly.
</Callout>

The top banner of the loyalty program page: program name and description over an optional background image,
with room for an action button and a points summary. Used inside salla-loyalty-program; a theme rarely places it directly.
While `name` or `description` is empty, a grey placeholder pill is shown in its place. With an `image`, the text is white over a dark overlay.

## Use it [#use-it]

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

```tsx
import { SallaLoyaltyHero } from '@salla.sa/twilight-components-react/loyalty-hero';
```

## Example [#example]

```tsx
import { SallaLoyaltyHero } from '@salla.sa/twilight-components-react/loyalty-hero';

export function Example() {
  return (
    <SallaLoyaltyHero name="Salla Rewards" description="Earn points on every order" image="/images/loyalty-cover.jpg">
      <button slot="action" type="button">Log in</button>
      <div slot="crosspoint">You have 120 points</div>
    </SallaLoyaltyHero>
  );
}
```

```html
<salla-loyalty-hero name="Salla Rewards" description="Earn points on every order" image="/images/loyalty-cover.jpg">
  <button slot="action" type="button">Log in</button>
  <div slot="crosspoint">You have 120 points</div>
</salla-loyalty-hero>
```

## Properties [#properties]

| Property      | Attribute     | Description                                                                 | Type     | Default |
| ------------- | ------------- | --------------------------------------------------------------------------- | -------- | ------- |
| `description` | `description` | Program description, shown under the name.                                  | `string` |         |
| `image`       | `image`       | URL of the background image. When empty, the banner has a plain background. | `string` |         |
| `name`        | `name`        | Program name, shown as the main heading.                                    | `string` |         |

## Slots [#slots]

| Slot         | Description                                                                               |
| ------------ | ----------------------------------------------------------------------------------------- |
| `action`     | Content placed in the banner next to the name and description, such as a login button.    |
| `crosspoint` | Content shown in the footer strip under the banner, such as the shopper's points balance. |

## Related [#related]

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