Card

Flexible container for grouping related content with optional headers and footers.

Installation

Add the component to your project using the following command:

Usage

Import

Import the component and its related parts.

import {
  Card,
  CardHeader,
  CardHeaderAction,
  CardTitle,
  CardDescription,
  CardBody,
  CardFooter
} from "components/selia/card";

Structure

The expected structure and composition of the component.

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
    <CardHeaderAction>
      <Button>Action</Button>
    </CardHeaderAction>
  </CardHeader>
  <CardBody>Card content</CardBody>
  <CardFooter>Card footer</CardFooter>
</Card>

Props

Each component part, its responsibility, and the props it exposes.

Examples

Description

You can add a description to the card by using the CardDescription component.

Action

You can add an action to the card by using the CardHeaderAction component.

Item

Here is an example of a card in conjunction with the Item component.

Login

Here is a login card example.