salla-loyalty-hero
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
<salla-loyalty> renders this component for you. You rarely use it directly.
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
In HTML or JSX, use the tag <salla-loyalty-hero> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaLoyaltyHero } from '@salla.sa/twilight-components-react/loyalty-hero';Example
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>
);
}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
| 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
Used inside: <salla-loyalty-program>.