@purpurds/promotion-card NPM | npm.io

7.4.0 • Published 6 months ago

Install

Weekly downloads

-

License

AGPL-3.0-only

Repository

Last release

6 months ago

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>
  );
};

classnames @purpurds/badge @purpurds/button @purpurds/card @purpurds/heading @purpurds/paragraph @purpurds/tokens @purpurds/icon @purpurds/cta-link

@teliafi/fi-ds @purpurds/purpur

10 months ago

1 year ago

1 year ago

10 months ago

1 year ago

10 months ago

1 year ago

9 months ago

10 months ago

1 year ago

10 months ago

1 year ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

7 months ago

7 months ago

9 months ago

9 months ago

9 months ago

1 year ago

1 year ago

9 months ago

1 year ago

1 year ago

1 year ago

10 months ago

11 months ago

7 months ago

7 months ago

6 months ago

8 months ago

7 months ago

7 months ago

7 months ago

8 months ago

9 months ago

1 year ago

8 months ago

8 months ago

9 months ago

11 months ago

9 months ago

11 months ago

5.28.1-pr-15202-12117482163

1 year ago

7 months ago

8 months ago

8 months ago

1 year ago

8 months ago

8 months ago

8 months ago

8 months ago

5.28.1-pr-15202-12116853740

1 year ago

10 months ago

10 months ago

10 months ago

9 months ago

11 months ago

7 months ago

8 months ago

10 months ago

1 year ago

8 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago