Variable CardConst

Type Declaration

• • (props: CardPropsExtend): Element

  • A customized Material UI Card component with header and content sections.

    Parameters

    • props: CardPropsExtend

      The properties for the Card component

    Returns Element

    A rendered Card component

    Component

    Example

    // Basic usage
    <Card
      title="Card Title"
      contentCard={<p>Card content goes here</p>}
    />
    
    // With custom heading level
    <Card
      title="Important Section"
      headerComponent="h2"
      contentCard={<div>Important content</div>}
    />
    
    // With custom styling
    <Card
      title="Styled Card"
      sx={{
        maxWidth: 345,
        margin: 2
      }}
      contentCard={<Typography>Custom styled card content</Typography>}
    />
    Copy

    Note

    For performance optimization in cases of frequent parent re-renders, consider wrapping this component with React.memo at the consumption level.

    See

    https://mui.com/material-ui/react-card/