MultinaireCard

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

Basic Usage

import { MultinaireCard, MultinaireText } from '@multinaire/multinaire-design';

<MultinaireCard>
  <MultinaireText>Card content</MultinaireText>
</MultinaireCard>

Props

Prop	Type	Default	Description
isLoading	boolean	false	Show loading skeleton
flex	number	-	Flex value
margin	SpacingProps	-	Margin spacing
padding	SpacingProps	-	Padding (default from theme)
width	DimensionValue	-	Card width
height	DimensionValue	-	Card height
borderRadius	number	-	Corner radius (default from theme)
selected	boolean	false	Show selected state with primary border
style	ViewStyle	-	Additional styles
onPress	() => void	-	Press handler

Examples

Basic Card

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

Pressable Card

<MultinaireCard onPress={() => handleCardPress()}>
  <MultinaireText>Tap me</MultinaireText>
</MultinaireCard>

Selected State

<MultinaireCard selected={isSelected} onPress={() => setIsSelected(!isSelected)}>
  <MultinaireText>Selectable card</MultinaireText>
</MultinaireCard>

Loading Card

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

Custom Sizing

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