Card

Container that groups related content and actions.

Usage#

Demo#

import { Button, Card, CardBody, CardButtons, CardFooter, CardHeader, CardHeading } from "pigment-ui";

function CardDemo() {
  return (
    <Card>
      <CardHeader>
        <CardHeading>Lorem ipsum dolor sit amet.</CardHeading>
      </CardHeader>
      
      <CardBody>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam architecto blanditiis commodi culpa dicta distinctio dolor
          dolorem ducimus eveniet id illo illum impedit, iste itaque iusto, libero magnam minima minus nesciunt nostrum numquam omnis optio
          perspiciatis quae quisquam quod repellat rerum sed suscipit ut, velit veniam vero voluptatibus voluptatum?
        </p>
      </CardBody>
      
      <CardFooter>
        <CardButtons>
          <Button variant="light">Cancel</Button>
          <Button>Click me</Button>
        </CardButtons>
      </CardFooter>
    </Card>
  );
}

With separator#

In this case, you will need to use <Separator /> component between <CardHeader />, <CardBody /> and <CardFooter /> components.

import { Button, Card, CardBody, CardButtons, CardFooter, CardHeader, CardHeading, Separator } from "pigment-ui";

function CardWithSeparator() {
  return (
    <Card>
      <CardHeader>
        <CardHeading>Lorem ipsum dolor sit amet.</CardHeading>
      </CardHeader>

      <Separator />

      <CardBody>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam architecto blanditiis commodi culpa dicta distinctio dolor
          dolorem ducimus eveniet id illo illum impedit, iste itaque iusto, libero magnam minima minus nesciunt nostrum numquam omnis optio
          perspiciatis quae quisquam quod repellat rerum sed suscipit ut, velit veniam vero voluptatibus voluptatum?
        </p>
      </CardBody>

      <Separator />

      <CardFooter>
        <CardButtons>
          <Button variant="light">Cancel</Button>
          <Button>Click me</Button>
        </CardButtons>
      </CardFooter>
    </Card>
  );
}

Has shadow#

import { Button, Card, CardBody, CardButtons, CardFooter, CardHeader, CardHeading, Separator } from "pigment-ui";

function CardHasShadow() {
  return (
    <Card hasShadow={false}>
      <CardHeader>
        <CardHeading>Lorem ipsum dolor sit amet.</CardHeading>
      </CardHeader>

      <Separator />

      <CardBody>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam architecto blanditiis commodi culpa dicta distinctio dolor
          dolorem ducimus eveniet id illo illum impedit, iste itaque iusto, libero magnam minima minus nesciunt nostrum numquam omnis optio
          perspiciatis quae quisquam quod repellat rerum sed suscipit ut, velit veniam vero voluptatibus voluptatum?
        </p>
      </CardBody>

      <Separator />

      <CardFooter>
        <CardButtons>
          <Button variant="light">Cancel</Button>
          <Button>Click me</Button>
        </CardButtons>
      </CardFooter>
    </Card>
  );
}

Style slots#

type CardStyleSlots = "base" | "header" | "body" | "footer" | "heading" | "buttons";

type CardStyleProps = {
  classNames?: { [slot in keyof CardStyleSlots]?: string };
  styles?: { [slot in keyof CardStyleSlots]?: CSSProperties };
};

import { Button, Card, CardBody, CardButtons, CardFooter, CardHeader, CardHeading, Separator } from "pigment-ui";

function CardStyleSlots() {
  return (
    <Card classNames={{ base: "bg-default-300", heading: "underline", buttons: "justify-start" }}>
      <CardHeader>
        <CardHeading>Lorem ipsum dolor sit amet.</CardHeading>
      </CardHeader>

      <Separator />

      <CardBody>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam architecto blanditiis commodi culpa dicta distinctio dolor
          dolorem ducimus eveniet id illo illum impedit, iste itaque iusto, libero magnam minima minus nesciunt nostrum numquam omnis optio
          perspiciatis quae quisquam quod repellat rerum sed suscipit ut, velit veniam vero voluptatibus voluptatum?
        </p>
      </CardBody>

      <Separator />

      <CardFooter>
        <CardButtons>
          <Button variant="light">Cancel</Button>
          <Button>Click me</Button>
        </CardButtons>
      </CardFooter>
    </Card>
  );
}

Edit this page

Calendar Checkbox