@paprika/card

Description

The Card component is a customizable content container.

Installation

yarn add @paprika/card

or with npm:

npm install @paprika/card

Props

Card

| Prop | Type | required | default | Description | | ----------- | --------------------------------------------------------------------------------------------- | -------- | -------------------- | ------------------------------------------------------------------ | | children | node | false | null | Body content of the card. | | isFullWidth | bool | false | false | If the width of the card should span it's parent container (100%). | | isActive | bool | false | false | If the card is in an "active" or "selected" state. | | size | [ Card.types.size.AUTO, Card.types.size.SMALL, Card.types.size.MEDIUM, Card.types.size.LARGE] | false | Card.types.size.AUTO | Size of the card (font size, min-height, padding, etc). |

Card.Content

| Prop | Type | required | default | Description | | -------- | ---- | -------- | ------- | ---------------- | | children | node | false | null | Primary content. |

Card.Footer

| Prop | Type | required | default | Description | | -------- | ---- | -------- | ------- | -------------------------- | | children | node | false | null | Body content of the footer |

Card.Header

| Prop | Type | required | default | Description | | -------- | ---- | -------- | ------- | ---------------- | | children | node | false | null | Primary content. |

Card.Metadata

| Prop | Type | required | default | Description | | -------- | ---- | -------- | ------- | ---------------- | | children | node | false | null | Primary content. |

Card.Text

| Prop | Type | required | default | Description | | ------------- | ------ | -------- | ------- | ------------------------------------------------ | | children | node | false | null | Body content of the Text. | | maxTextLength | number | false | 95 | Sets the maximum text length visible on the card |

Card.Title

| Prop | Type | required | default | Description | | -------- | ---- | -------- | ------- | -------------------------- | | children | node | false | null | Body content of the Title. |

Card

The <Card> component is a customizable content container. It comes with subcomponents that allow for quick and easy creation of various card types for different use cases. Additionally any other child elements can be passed into the Card.

Usage

To create a card simply add the <Card></Card> element. You can set the card to one the of three preset sizes (small, medium, and large) or alternatively you can add a isFullWidth or isAutoHeight property to the card. You can then add several children elements of your choice or use one of the many subcomponents to create your card.

Note: When using the size property the width and height are fixed therefore consideration will have to be given to size of content passed into the Card.

<Card size="medium">
  <Card.Header>
    <Avatar>E</Avatar>
  </Card.Header>
  <Card.Content>
    <Card.Title>Example</Card.Title>
    <Card.Metadata>metadata</Card.Metadata>
    <div style={{ width: "100%", height: "24px" }} />
    <Card.Text>This is an example of a medium sized Card</Card.Text>
    <div style={{ width: "100%", height: "24px" }} />
    <Card.Metadata>Created by Kaan</Card.Metadata>
    <Card.Metadata>Last updated by Karen</Card.Metadata>
  </Card.Content>
  <Card.Footer>
    <div
      style={{
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
      }}
    >
      <span>150 attributes</span>
      <span>10 questions</span>
    </div>
  </Card.Footer>
</Card>

Links

• Storybook Showcase
• GitHub source code
• Create GitHub issue
• CHANGELOG