Card

The Card component is a flexible container for displaying content and actions in a single topic. It supports various visual styles, loading states, and interactive behaviors.

Import

import { Card } from '@lazy-panda-ui/lazy-panda-ui';

Usage

Basic Card

import { Card } from '@lazy-panda-ui/lazy-panda-ui';

function Example() {
  return (
    <Card>
      <Text>Basic card content</Text>
    </Card>
  );
}

Different Variants

import { Card } from '@lazy-panda-ui/lazy-panda-ui';

function Example() {
  return (
    <>
      <Card variant="elevated">
        <Text>Elevated card with shadow</Text>
      </Card>

      <Card variant="outlined">
        <Text>Outlined card with border</Text>
      </Card>

      <Card variant="filled">
        <Text>Filled card with background</Text>
      </Card>

      <Card variant="tonal">
        <Text>Tonal card with themed background</Text>
      </Card>
    </>
  );
}

Interactive Card

import { Card } from '@lazy-panda-ui/lazy-panda-ui';

function Example() {
  const handlePress = () => {
    console.log('Card pressed');
  };

  return (
    <Card
      onPress={handlePress}
      variant="elevated"
      elevation={3}
    >
      <Text>Press me!</Text>
    </Card>
  );
}

Loading State

import { Card } from '@lazy-panda-ui/lazy-panda-ui';

function Example() {
  return (
    <Card loading>
      <Text>This content is loading...</Text>
    </Card>
  );
}

Different Sizes

import { Card } from '@lazy-panda-ui/lazy-panda-ui';

function Example() {
  return (
    <>
      <Card size="small">
        <Text>Small card</Text>
      </Card>

      <Card size="medium">
        <Text>Medium card</Text>
      </Card>

      <Card size="large">
        <Text>Large card</Text>
      </Card>
    </>
  );
}

Custom Loading Component

import { Card } from '@lazy-panda-ui/lazy-panda-ui';

function Example() {
  return (
    <Card
      loading
      LoadingComponent={<CustomSpinner />}
    >
      <Text>Content with custom loader</Text>
    </Card>
  );
}

Props

Main Props

Prop	Type	Default	Description
children	React.ReactNode	Required	Content to be rendered inside the card
variant	'elevated' | 'outlined' | 'filled' | 'tonal'	'elevated'	Visual variant of the card
size	'small' | 'medium' | 'large'	'medium'	Size of the card that determines padding
elevation	number	2	Elevation level for shadow (only applies to 'elevated' variant)
disabled	boolean	false	Whether the card is disabled
loading	boolean	false	Whether to show a loading indicator
onPress	() => void	-	Called when the card is pressed

Style Props

Prop	Type	Description
containerStyle	ViewStyle	Additional styles for the container
contentStyle	ViewStyle	Additional styles for the content wrapper
loadingOverlayStyle	ViewStyle	Additional styles for the loading overlay

Custom Components

Prop	Type	Description
LoadingComponent	React.ReactNode	Custom loading indicator component

Accessibility Props

Prop	Type	Description
accessibilityRole	AccessibilityRole	Role for screen readers
accessibilityLabel	string	Accessibility label
accessibilityHint	string	Additional description for screen readers
testID	string	Test ID for testing

Theme Customization

Customize Card via theme.card tokens using ThemeProvider:

import { ThemeProvider, createTheme, defaultTheme } from '@lazy-panda-ui/lazy-panda-ui/theme';

const theme = createTheme(defaultTheme, {
  card: {
    sizes: { medium: { padding: 20 } },
    borderRadius: 10,
    disabledOpacity: 0.5,
    variants: {
      elevated: {
        backgroundColor: defaultTheme.colors.surface,
        shadow: { ...defaultTheme.card.variants.elevated.shadow, elevation: 4, radius: 6 },
      },
      outlined: { backgroundColor: '#fff', borderWidth: 1, borderColor: '#E5E5EA' },
      filled: { backgroundColor: defaultTheme.colors.surfaceVariant },
      tonal: { backgroundColor: defaultTheme.colors.primaryContainer },
    },
    loadingOverlay: { opacity: 0.75, backgroundColor: defaultTheme.colors.surface },
    ripple: { color: defaultTheme.colors.onSurface },
  },
});

export function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* your app */}
    </ThemeProvider>
  );
}