Function InfoCard

packages-internal/core-docs/src/InfoCard/InfoCard.tsx:54–114

(props: InfoCardProps)

}

export function InfoCard(props: InfoCardProps) {
  const {
    classNameDescription,
    classNameTitle,
    description,
    icon,
    link,
    svg,
    title,
    titleProps,
    ...other
  } = props;
  return (
    <Paper
      variant="outlined"
      component={link ? Link : 'div'}
      href={link}
      {...(link
        ? {
            noLinkStyle: true,
            // Fix overloading with prefetch={false}, only prefetch on hover.
            prefetch: false,
          }
        : {})}
      sx={(theme) => ({
        p: 2.5,
        height: '100%',
        background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
        ...theme.applyDarkStyles({
          bgcolor: alpha(theme.palette.primaryDark[800], 0.25),
          background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
          borderColor: 'primaryDark.700',
        }),
      })}
      {...other}
    >
      {svg && svg}
      {icon && <GlowingIconContainer icon={icon} />}
      <Typography
        component="h3"
        variant="body2"
        className={classNameTitle}
        {...titleProps}
        sx={[
          {
            fontWeight: 'semiBold',
            color: 'text.primary',
            mt: icon ? 2 : 0,
            mb: description ? 0.5 : 0,
          },
          ...(Array.isArray(titleProps?.sx) ? titleProps.sx : [titleProps?.sx]),
        ]}
      >
        {title}
      </Typography>
      <Typography variant="body2" sx={{ color: 'text.secondary' }} className={classNameDescription}>
        {description}
      </Typography>