@purpurds/card

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

import * as CardStories from "./src/card.stories"; import { Card } from "./src/card"; import packageInfo from "./package.json";

Card

Version {packageInfo.version}

Showcase

Properties

Card

Badge

ContentContainer

Content

FeatureList

LinkArrow

Overline

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 { Card } from "@purpurds/purpur";

export const MyComponent = () => {
  return (
    <Card href="/?path=/docs/components-card--docs" screenReaderText="Browse to tips and tricks">
      <Card.ContentContainer>
        <Card.Badge variant="information" text="Best hit" />
        <Card.Content>
          <Card.Overline overline="TELIA" />
          <Card.FeatureList listItems={["test 1", "test 2", "test 3"]} />
          <Card.LinkArrow size="md" variant="secondary" iconOnly />
        </Card.Content>
      </Card.ContentContainer>
    </Card>
  );
};