Card

Card container with border, border radius, and optional press handling.

Basic Usage

import { Card, Typography } from '@multinaire/ui';

<Card>
  <Typography>Card content</Typography>
</Card>

Props

Prop	Type	Default	Description
isLoading	boolean	false	Show a loading skeleton in place of the card content
flex	number	—	Flex grow value
margin	SpacingProps	—	Outer margin. Accepts a number for uniform margin, or an object for per-side control
padding	SpacingProps	—	Inner padding. Accepts a number for uniform padding, or an object for per-side control
width	DimensionValue	—	Fixed width of the card
height	DimensionValue	—	Fixed height of the card
borderRadius	number	theme medium	Corner radius in pixels. Defaults to the theme's medium radius
style	ViewStyle	—	Additional styles applied to the card
selected	boolean	false	When true, the card border color changes to the theme's primary color
backgroundColor	ColorKeys	—	Background color key from the active theme palette
borderColor	ColorKeys	backgroundVariant	Border color key from the active theme palette. Overrides the default backgroundVariant border. Ignored when selected is true
badge	ReactElement	—	Badge component rendered as an overlay on the card
testID	string	—	Test identifier for UI automation
onPress	() => void	—	Press handler. When omitted the card renders as a plain View (fixes web ScrollView scroll freeze)

Examples

Basic Card

<Card padding={16}>
  <Typography type="heading">Card Title</Typography>
  <Typography color="neutral">Card description</Typography>
</Card>

Pressable Card

<Card onPress={() => handleCardPress()}>
  <Typography>Tap me</Typography>
</Card>

Selected State

<Card selected={isSelected} onPress={() => setIsSelected(!isSelected)}>
  <Typography>Selectable card</Typography>
</Card>

Custom Colors

<Card backgroundColor="backgroundVariant" borderColor="primary">
  <Typography>Custom styled card</Typography>
</Card>

Card with Badge

<Card
  badge={<Badge type="primary" title="New" />}
  padding={16}
>
  <Typography>Card with badge overlay</Typography>
</Card>

Loading Card

<Card isLoading width={200} height={100} />

Custom Sizing

<Card
  width="100%"
  height={150}
  margin={{ bottom: 16 }}
  borderRadius={12}
>
  <Typography>Full width card</Typography>
</Card>

Notes

• When onPress is not provided, the card renders as an Animated.View instead of a pressable. This prevents the card from blocking scroll in a ScrollView on web.
• When onPress is provided, the card renders as a Pressable and animates its opacity on hover (web/desktop) and press.