Cards

The @jumbo framework provides several card and overlay primitives used throughout the dashboard pages: JumboCard, JumboCardFeatured, JumboBackdrop, and JumboOverlay. All are exported from @jumbo/components.

JumboCard

JumboCard is an opinionated wrapper around MUI's Card that enforces consistent padding, border radius, and shadow styles across dashboard widgets.

Props

Prop	Type	Default	Description
`title`	`string`	—	Card header title
`subheader`	`string`	—	Card header subheader text
`avatar`	`ReactNode`	—	Avatar slot in the card header
`action`	`ReactNode`	—	Action slot in the card header (top-right)
`sx`	`SxProps`	—	MUI sx overrides on the root Card
`children`	`ReactNode`	—	Card body content

Basic usage

tsx

import { JumboCard } from '@jumbo/components/JumboCard';
 
export function RevenueCard() {
  return (
    <JumboCard
      title="Revenue This Year"
      subheader="Updated just now"
      action={<IconButton><MoreVertIcon /></IconButton>}
    >
      <RevenueChart />
    </JumboCard>
  );
}

JumboCardFeatured

JumboCardFeatured is a variant with a full-bleed background image or gradient, typically used for hero-style metric cards:

Props

Prop	Type	Default	Description
`bgColor`	`string`	—	CSS gradient or color for the card background
`textColor`	`string`	`'white'`	Text color override
`sx`	`SxProps`	—	MUI sx overrides
`children`	`ReactNode`	required	Card body content

Basic usage

tsx

import { JumboCardFeatured } from '@jumbo/components/JumboCardFeatured';
 
export function MetricCard({ value, label }: { value: string; label: string }) {
  return (
    <JumboCardFeatured bgColor="linear-gradient(135deg, #7352C7 0%, #3F1D9B 100%)">
      <Typography variant="h2" color="inherit">{value}</Typography>
      <Typography variant="body2" color="inherit" sx={{ opacity: 0.8 }}>{label}</Typography>
    </JumboCardFeatured>
  );
}

JumboBackdrop

JumboBackdrop renders a semi-transparent overlay over a positioned parent, useful for loading states inside card containers:

Props

Prop	Type	Default	Description
`open`	`boolean`	required	Controls visibility
`sx`	`SxProps`	—	MUI sx overrides
`children`	`ReactNode`	—	Content rendered inside the backdrop (e.g. a spinner)

Usage

tsx

import { JumboBackdrop } from '@jumbo/components/JumboBackdrop';
import { CircularProgress } from '@mui/material';
 
export function LoadingCard({ isLoading, children }) {
  return (
    <div style={{ position: 'relative' }}>
      {children}
      <JumboBackdrop open={isLoading}>
        <CircularProgress color="inherit" />
      </JumboBackdrop>
    </div>
  );
}

JumboOverlay

JumboOverlay provides a full-coverage overlay with a customizable message — used for "feature locked" states or access control indicators within card boundaries:

Props

Prop	Type	Default	Description
`open`	`boolean`	required	Controls visibility
`message`	`string`	—	Text shown in the overlay center
`sx`	`SxProps`	—	MUI sx overrides

tsx

import { JumboOverlay } from '@jumbo/components/JumboOverlay';
 
<JumboCard title="Premium Chart">
  <AdvancedChart />
  <JumboOverlay open={!isPremium} message="Upgrade to unlock this feature" />
</JumboCard>

Positioning requirement

Both JumboBackdrop and JumboOverlay position themselves relative to the nearest ancestor with position: relative or position: absolute. Ensure the parent card or container has an explicit position set.