Cards

The @jumbo framework ships three card components that handle common dashboard card patterns with consistent spacing, background color support, and header layout options.

Import

typescript

import {
  JumboCard,
  JumboCardQuick,
  JumboCardFeatured,
} from '@jumbo/components';
import type { JumboBgStyleProps, JumboHeaderProps } from '@jumbo/types';

Shared prop types

JumboHeaderProps

Used by all three card components to configure the card header region:

Prop	Type	Description
`title`	`ReactNode`	Card title
`subheader`	`ReactNode`	Secondary line below the title
`avatar`	`ReactNode`	Avatar or icon in the header leading slot
`action`	`ReactNode`	Content placed in the header trailing slot (e.g. a menu button)
`headerSx`	`SxProps<Theme>`	Additional MUI `sx` styles for the header
`reverse`	`boolean`	Swaps the avatar and title positions

JumboBgStyleProps

Controls card background appearance:

Prop	Type	Description
`bgColor`	`string \| string[]`	Single color or gradient color array (e.g. `['#7352C7', '#4E2F9E']`)
`bgImage`	`string`	Background image URL
`bgGradientDir`	`string`	Gradient direction, e.g. `'135deg'`

JumboCard

A general-purpose card with an optional styled header and background support.

Props

Prop	Type	Description
`...JumboHeaderProps`	—	Card header configuration
`...JumboBgStyleProps`	—	Background configuration
`contentWrapper`	`boolean`	Wraps children in a padded content area
`contentSx`	`SxProps<Theme>`	`sx` overrides for the content wrapper
`children`	`ReactNode`	Card body

Usage

tsx

<JumboCard
  title='Monthly Revenue'
  subheader='Compared to last month'
  action={<IconButton><MoreVertIcon /></IconButton>}
  bgColor={['#7352C7', '#4E2F9E']}
  bgGradientDir='135deg'
  contentWrapper
>
  <RevenueChart />
</JumboCard>

JumboCardQuick

A compact card pre-styled for metrics and KPI tiles. Renders an icon, a value, and a label in a single horizontal layout.

Props

Prop	Type	Description
`title`	`ReactNode`	Primary metric value
`subTitle`	`ReactNode`	Metric label
`icon`	`ReactNode`	Leading icon
`color`	`string`	Icon accent color
`...JumboBgStyleProps`	—	Background configuration
`children`	`ReactNode`	Optional additional content

Usage

tsx

<JumboCardQuick
  title='$48,295'
  subTitle='Total Revenue'
  icon={<AttachMoneyIcon />}
  color='#7352C7'
  bgColor='#FFFFFF'
/>

JumboCardFeatured

A card that visually promotes a single feature or call-to-action, with a large background and prominent text layout.

Props

Prop	Type	Description
`...JumboHeaderProps`	—	Card header configuration
`...JumboBgStyleProps`	—	Background configuration (typically `bgImage`)
`children`	`ReactNode`	Card body content

Usage

tsx

<JumboCardFeatured
  title='Upgrade to Pro'
  subheader='Unlock all premium features'
  bgImage='/assets/images/widgets/upgrade-bg.png'
>
  <Button variant='contained'>Upgrade now</Button>
</JumboCardFeatured>

Background color gradients

When bgColor is an array, getBackgroundColorStyle() from @jumbo/utilities/helpers builds a CSS linear-gradient. Pass a degree string alongside the colors to control direction: bgColor={['#7352C7', '135deg', '#4E2F9E']}.