Display content within a styled container, providing structure and visual hierarchy. The Card component enhances user navigation and organizes information effectively by utilizing different elevation levels.

Usage

Import

import { Card, CardBody, CardHeader, CardTitle } from '@passfort/castle'
content_copy
Copy

Structure

Organize content within the Card using CardHeader, CardTitle, and CardBody for a clear and consistent layout.

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
  </CardHeader>
  <CardBody>
    <Text>Level 1</Text>
  </CardBody>
</Card>
<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
  </CardHeader>
  <CardBody>
    <Text>Level 1</Text>
  </CardBody>
</Card>
content_copy
Copy
live example

Level

Use the level prop to adjust the elevation of the card, affecting its shadow and depth appearance. This helps in distinguishing between different sections or importance levels within the application.

<Stack spacing={6}>
  <Card level={1}>
    <CardBody>
      <Text>Level 1</Text>
    </CardBody>
  </Card>

  <Card level={2}>
    <CardBody>
      <Text>Level 2</Text>
    </CardBody>
  </Card>

  <Card level={3}>
    <CardBody>
      <Text>Level 3</Text>
    </CardBody>
  </Card>

  <Card level={4}>
    <CardBody>
      <Text>Level 4</Text>
    </CardBody>
  </Card>
</Stack>
<Stack spacing={6}>
  <Card level={1}>
    <CardBody>
      <Text>Level 1</Text>
    </CardBody>
  </Card>

  <Card level={2}>
    <CardBody>
      <Text>Level 2</Text>
    </CardBody>
  </Card>

  <Card level={3}>
    <CardBody>
      <Text>Level 3</Text>
    </CardBody>
  </Card>

  <Card level={4}>
    <CardBody>
      <Text>Level 4</Text>
    </CardBody>
  </Card>
</Stack>
content_copy
Copy
live example