Card

The Card component is an enhanced Box component that primarily includes border styles. Additionally, you can apply various decorative patterns to the card by specifying one of the following options: 'none' | 'right' | 'bottomLeft' | 'bottomRight' | 'bottom' | 'topRight' | 'topLeft'.

The Card component can also be made clickable. To do this, set the isClickable prop, which will render the Card as a Chakra UI LinkBox. This requires using the LinkOverlay component as a child or wrapping it around the title or content.

<Card p={4} mb={4}>
  <p>I'm a Card with padding of `4`</p>
</Card>

<Card p={4} isClickable pattern="topRight">
  <LinkOverlay href="#">I'm a LinkOverlay</LinkOverlay>
  <p>I'm a clickable Card with padding of `4` and a `topRight` pattern</p>
</Card>

To use the Card component in your application, import and use it as shown below:

import { Card } from '@internal/components';

export const MyComponent = () => {
  return (
    <Card>
      <p>My Card content</p>
    </Card>
  );
};

The SpotlightCard component adds an interactive spotlight effect that follows your mouse on hover. Use this card as a wrapper. If padding is needed, include a nested Box or Flex component with the desired padding properties.

Similar to the standard Card, the SpotlightCard accepts a pattern prop and can also be made clickable using the isClickable prop.

<SpotlightCard>
  <Box p={4}>
    <p>I'm a SpotlightCard with padding of `4`</p>
  </Box>
</SpotlightCard>

<SpotlightCard isClickable pattern="topRight">
  <Box p={4}>
    <p>I'm a clickable SpotlightCard with padding of `4` and a `topRight` pattern</p>
  </Box>
</SpotlightCard>

To use the SpotlightCard in your application, import and use it as follows:

import { SpotlightCard } from '@internal/components';

export const MyComponent = () => {
  return (
    <SpotlightCard>
      <Box p={4}>
        <p>I'm a SpotlightCard</p>
      </Box>
    </SpotlightCard>
  );
};

You can also import the CardPattern component to apply various decorative patterns to a section of your design. The available variants are 'right' | 'bottomLeft' | 'bottomRight' | 'bottom' | 'topRight' | 'topLeft'.

import { CardPattern } from '@internal/components';

export const MyComponent = () => {
  return (
    <Box>
      <CardPattern variant="bottomRight">
        <p>Lorem ipsum</p>
      </CardPattern>
    </Box>
  );
};

By using these components, you can create consistent, styled containers throughout your application, enhancing both the design and user experience.