Card

Card provides a bordered container with optional header, body, and footer sections.

Code

import { Card } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <Card>
      <Card.Header>Header</Card.Header>
      <Card.Body>Body</Card.Body>
      <Card.Footer>Footer</Card.Footer>
    </Card>
  );
}

No Header

Code

import { Card } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <Card>
      <Card.Body>Body</Card.Body>
      <Card.Footer>Footer</Card.Footer>
    </Card>
  );
}

No Footer

Code

import { Card } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <Card>
      <Card.Header>Header</Card.Header>
      <Card.Body>Body</Card.Body>
    </Card>
  );
}

Only Body

Code

import { Card } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <Card>
      <Card.Body>Body</Card.Body>
    </Card>
  );
}

API

Card

Props

children

children?: React.ReactNode

className

className?: string

sx

sx?: StyleProps