Card - rafty/ui Docs

A card is a generic container for grouping related UI elements and content.

This is a custom component crafted to adhere to our styling conventions, resulting in limited styling options and available props.

Anatomy

Import all parts and piece them together.

import { Card, CardFooter, CardContent, CardHeader } from "@rafty/ui";

<Card>
  <CardHeader />
  <CardContent />
  <CardFooter />
</Card>;

Usage

Customer dashboard

View a summary of all your customers over the last month. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, nam? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officia, eveniet culpa minima ipsa rem in mollitia inventore laboriosam necessitatibus itaque.

<Card>
  <CardHeader>
    Customer dashboard
  </CardHeader>
  <CardContent>
    View a summary of all your customers over the last month. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, nam? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officia, eveniet culpa minima ipsa rem in mollitia inventore laboriosam necessitatibus itaque.
  </CardContent>
  <CardFooter className="flex justify-between">
    <Button
      colorScheme="error"
      variant="outline"
    >
      Delete
    </Button>
    <Button variant="outline">
      View here
    </Button>
  </CardFooter>
</Card>

Size

There are 3 size options available: sm, md (default) & lg.

Customer dashboard

<Card size="sm">
  <CardHeader>
    Customer dashboard
  </CardHeader>
  <CardContent className="text-sm">
    View a summary of all your customers over the last month. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, nam? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officia, eveniet culpa minima ipsa rem in mollitia inventore laboriosam necessitatibus itaque.
  </CardContent>
  <CardFooter className="flex justify-between">
    <Button
      colorScheme="error"
      size="sm"
      variant="outline"
    >
      Delete
    </Button>
    <Button
      size="sm"
      variant="outline"
    >
      View here
    </Button>
  </CardFooter>
</Card>

Variant

There are 2 variant options available: outline (default) & elevated

Customer dashboard

<Card variant="elevated">
  <CardHeader>
    Customer dashboard
  </CardHeader>
  <CardContent>
    View a summary of all your customers over the last month. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, nam? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officia, eveniet culpa minima ipsa rem in mollitia inventore laboriosam necessitatibus itaque.
  </CardContent>
  <CardFooter className="flex justify-between">
    <Button
      colorScheme="error"
      variant="outline"
    >
      Delete
    </Button>
    <Button variant="outline">
      View here
    </Button>
  </CardFooter>
</Card>

Barebone

Pass isBarebone prop to remove all style in card

Customer dashboard

<Card
  className="dark:bg-secondary-800 space-y-4 rounded-lg bg-white p-4 shadow-md dark:text-white"
  isBarebone
>
  <CardHeader className="text-xl font-semibold">
    Customer dashboard
  </CardHeader>
  <CardContent>
    View a summary of all your customers over the last month. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, nam? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officia, eveniet culpa minima ipsa rem in mollitia inventore laboriosam necessitatibus itaque.
  </CardContent>
  <CardFooter className="flex justify-between">
    <Button
      colorScheme="error"
      variant="outline"
    >
      Delete
    </Button>
    <Button variant="outline">
      View here
    </Button>
  </CardFooter>
</Card>

API

Root

Property	Description	Type	Default
isBarebone	Removes style from whole component	`boolean`	false

Property	Description	Type	Default
isUnstyled	Removes Style from component	`boolean`	false

Property	Description	Type	Default
isUnstyled	Removes Style from component	`boolean`	false