@paprika/card

@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