@purpurds/promotion-card v5.24.1

import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";

import * as PromotionCardStories from "./src/promotion-card.stories"; import packageInfo from "./package.json";

PromotionCard

Version {packageInfo.version}

Showcase

Properties

Installation

Via NPM

Add the dependency to your consumer app like "@purpurds/purpur": "^x.y.z"

In MyApp.tsx

import "@purpurds/purpur/styles";

In MyComponent.tsx

import { PromotionCard } from "@purpurds/purpur";

export const MyComponent = () => {
  return (
    <PromotionCard
      variant="primary"
      badgeText="Buy now"
      badgeIcon={<IconOffering size="sm" />}
      title="Promotion title"
      hasGradient
      decorativeImage={
        <img
          src="https://www.telia.se/images/i15skfqwpurk/5YYelnwdIJGush05RYsE6A/04d4eeb571bca6d5c72b557f6da92c92/Telia_Company_Reinvention_69.jpg?fit=scale&w=536&fm=jpg&q=70"
          alt="Lorem ipsum dolor sit amet consectetur adipisicing elit"
        />
      }
    >
      <Paragraph>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi corporis amet
        exercitationem atque consequuntur.
      </Paragraph>
      <Button variant="primary">Ask us</Button>
    </PromotionCard>
  );
};