Card

import { Card, Icon } from "@lualtek/react-components";
 
export default () => {
  return (
    <Card left={<Icon source="chat" />} right={<Icon source="dashboard" />}>
      Lorem ipsum dolor sit.
    </Card>
  );
};

export type CardProps = Pick<
  StackProps,
  "wrap" | "columnGap" | "rowGap" | "vAlign" | "hAlign"
> & {
  /**
   * Set the padding on each side of the card.
   * @default 24
   */
  padding?: false | TokensTypes["space"];
 
  /**
   * Content rendered inside the card on the left side, before children.
   */
  left?: ReactNode;
 
  /**
   * Content rendered inside the card on the right side, after children.
   */
  right?: ReactNode;
 
  /**
   * Add a border to the card to increase its visual weight and contrast.
   */
  bordered?: boolean;
 
  /**
   * Define the edge radius of the card.
   * @default 16
   */
  radius?: false | TokensTypes["radius"];
 
  /**
   * Change the background color of the card.
   */
  dimmed?: 0 | 1 | 2;
 
  /**
   * Make the card vibrant. Add tranlucent background.
   * @default false
   */
  vibrant?: boolean;
 
  /**
   * Change the background color of the card when it is hovered.
   * @default false
   */
  highlightOnHover?: boolean;
 
  /**
   * Set the component to render as different element
   * @default 'div'.
   */
  as?: JSX.IntrinsicElements | React.ComponentType<unknown>;
};