Card

The Card component is used to render a reusable card component which can be used to group certain information about something or can be used to show overview about something

Usage#

The card component has three main section title, content and footer. The props header can be used to render a title, the footer prop which is of type ReactNode can be used to render the footer and the children of this component will be rendered as content

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

Footer

Code#

<Card header="Card Title" footer={<Text>Footer</Text>}>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  </div>
</Card>

Image Cards#

Card component can be rendered with a image by using a src prop which is of type string and the url for the image can be given here

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Footer

Code#

<Card
  header="Card Title"
  footer={<Text>Footer</Text>}
  src="https://upload.wikimedia.org/wikipedia/en/d/dc/MichaelScott.png"
>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
  </div>
</Card>

Dynamic Width#

The Card component width can be resized by using the width prop

Card Title

Footer

Footer actions#

Since footer is a react node we can render action button as normal JSX.Element

Card Title

API#

Prop	Type	Possible values	Default Value
header	`string`	Any String value	`""`
footer	`ReactNode`	-	-
src	`string`	Any String value	`""`
width	`number`	Any number value	`300`

Built by Akshay 🤙