# All files / src/card Card.tsx

100% Statements 88/88
100% Branches 1/1
100% Functions 1/1
100% Lines 88/88

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    891x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    88x
    88x
    88x
    88x
    88x
    88x
    88x
    88x
    88x
    88x
    88x
    88x
    88x
    88x
    88x
    88x
    88x
    88x
    88x
    88x
    88x
    88x
    88x
    88x
    88x
    88x
    1x
     import { forwardRef, type HTMLAttributes } from "react";
    import { card, type CardClassNameOptions } from "./styles.js";

    declare module "react" {
      interface CSSProperties {
        "--rmd-card-background-color"?: string;
        "--rmd-card-color"?: string;
        "--rmd-card-secondary-color"?: string;
      }
    }

    /**
     * @since 6.0.0 Extends the {@link CardClassNameOptions} and removed the
     * deprecated `raiseable` prop
     */
    export interface CardProps
      extends HTMLAttributes<HTMLDivElement>,
        CardClassNameOptions {}

    /**
     * **Server Component**
     *
     * @example Simple Example
     * ```tsx
     * import {
     *   Button,
     *   Card,
     *   CardContent,
     *   CardFooter,
     *   CardHeader,
     *   CardTitle,
     *   CardSubtitle,
     *   Typography,
     * } from "@react-md/core";
     * import type { ReactElement } from "react";
     *
     * function Example(): ReactElement {
     *   return (
     *     <Card>
     *       <CardHeader>
     *         <CardTitle>Main Title</CardTitle>
     *         <CardSubtitle>A subtitle</CardSubtitle>
     *       </CardHeader>
     *       <CardContent>
     *         <Typography margin="none">
     *           Some paragraph of text.
     *         </Typography>
     *       </CardContent>
     *       <CardFooter>
     *         <Button>Action 1</Button>
     *         <Button>Action 2</Button>
     *       </CardFooter>
     *     </Card>
     *   );
     * }
     * ```
     *
     * @since 6.0.0 Removed the deprecated `raiseable` prop
     */
    export const Card = forwardRef<HTMLDivElement, CardProps>(
      function Card(props, ref) {
        const {
          children,
          className,
          bordered,
          raisable,
          fullWidth,
          interactable,
          ...remaining
        } = props;

        return (
          <div
            {...remaining}
            ref={ref}
            className={card({
              className,
              bordered,
              raisable,
              fullWidth,
              interactable,
            })}
          >
            {children}
          </div>
        );
      }
    );