@purpurds/promotion-card
v4.6.0
Published
import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
Downloads
1,017
Readme
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>
);
};