Discount Card

A component for displaying discount cards with various appearances.

Importing

To use the discount card component, first you need to register the component inside the page. You can register the component manually by importing the register function:

Web (Option 1)

import { register } from "@tapsioss/web-components/discount-card";

register(); // Now the discount card component is ready to use!

Web (Option 2)

import { registerDiscountCard } from "@tapsioss/web-components";

registerDiscountCard(); // Now the discount card component is ready to use!

Also you can automatically register the component by importing it with the following approach:

Web

import "@tapsioss/web-components/discount-card/element";

TIP

If you want to use all the component in your app, you can call registerAll at the root of your project.

import { registerAll } from "@tapsioss/web-components";

registerAll(); // All the components are now available

In the React package, you can easily add the component using the following code:

React

import { DiscountCard } from "@tapsioss/react-components";

Component Usage

Web

<tapsi-discount-card></tapsi-discount-card>

React

<DiscountCard />

Properties

Name	Attribute Name	Description	Type	Default Value
headerTitle	header-title	The header title of the discount card.	string	""
variant	variant	The variant of the discount card.	| "clay" | "whisper" | "azure" | "flame" | "grayscale" | "none"	"none"
title	title	The title to use for the discount card. Represents the title of the discount card.	string	""
description	description	The description of the discount card.	string	""
badgeText	badge-text	The name/text to display in the badge.	string	""
expiryDateLabel	expiry-date-label	The label for the expiry date of the discount.	string	""
expiring	expiring	Check if discount is expiring and if expiring is true then turn expiry date label into red color.	boolean	false

Slots

Name	Value	Description
ACTION	action	The slot for header icon.
THUMBNAIL	thumbnail	The slot for header icon.
HEADER_ICON	header-icon	The slot for header icon.

TIP

The value of slots are available for developer as JavaScript Variables:

Web

// Option 1
import { DiscountCardSlots } from "@tapsioss/web-components";

// Option 2
import { Slots } from "@tapsioss/web-components/discount-card";

React

// Option 1
import { DiscountCardSlots } from "@tapsioss/react-components";

// Option 2
import { Slots } from "@tapsioss/react-components/DiscountCard";