0
# Cards & Surfaces
1

2
Layout components for organizing content including cards, surfaces, and dividers with Material Design elevation and styling.
3

4
## Capabilities
5

6
### Card
7

8
Container component for grouping related content with optional actions and elevation.
9

10
```typescript { .api }
11
function Card(props: CardProps): JSX.Element;
12

13
interface CardProps {
14
  children: React.ReactNode;
15
  mode?: 'elevated' | 'outlined' | 'contained';
16
  elevation?: MD3Elevation;
17
  style?: StyleProp<ViewStyle>;
18
  contentStyle?: StyleProp<ViewStyle>;
19
  theme?: ThemeProp;
20
}
21

22
namespace Card {
23
  function Title(props: CardTitleProps): JSX.Element;
24
  function Content(props: CardContentProps): JSX.Element;
25
  function Actions(props: CardActionsProps): JSX.Element;
26
  function Cover(props: CardCoverProps): JSX.Element;
27
}
28

29
interface CardTitleProps {
30
  title: React.ReactNode;
31
  subtitle?: React.ReactNode;
32
  left?: (props: { size: number }) => React.ReactNode;
33
  right?: (props: { size: number }) => React.ReactNode;
34
  leftStyle?: StyleProp<ViewStyle>;
35
  rightStyle?: StyleProp<ViewStyle>;
36
  titleStyle?: StyleProp<TextStyle>;
37
  subtitleStyle?: StyleProp<TextStyle>;
38
  style?: StyleProp<ViewStyle>;
39
  theme?: ThemeProp;
40
}
41

42
interface CardContentProps {
43
  children: React.ReactNode;
44
  index?: number;
45
  total?: number;
46
  siblings?: Array<string>;
47
  style?: StyleProp<ViewStyle>;
48
  theme?: ThemeProp;
49
}
50

51
interface CardActionsProps {
52
  children: React.ReactNode;
53
  style?: StyleProp<ViewStyle>;
54
  theme?: ThemeProp;
55
}
56

57
interface CardCoverProps {
58
  source: ImageSourcePropType;
59
  style?: StyleProp<ViewStyle>;
60
  theme?: ThemeProp;
61
}
62
```
63

64
**Usage Example:**
65

66
```typescript
67
import React from 'react';
68
import { Card, Button, Avatar } from 'react-native-paper';
69

70
<Card>
71
  <Card.Title
72
    title="Card Title"
73
    subtitle="Card Subtitle"
74
    left={(props) => <Avatar.Icon {...props} icon="folder" />}
75
  />
76
  <Card.Content>
77
    <Text>Card content</Text>
78
  </Card.Content>
79
  <Card.Cover source={{ uri: 'https://picsum.photos/700' }} />
80
  <Card.Actions>
81
    <Button>Cancel</Button>
82
    <Button>Ok</Button>
83
  </Card.Actions>
84
</Card>
85
```
86

87
### Surface
88

89
Basic container with Material Design elevation and theming.
90

91
```typescript { .api }
92
function Surface(props: SurfaceProps): JSX.Element;
93

94
interface SurfaceProps {
95
  children: React.ReactNode;
96
  elevation?: MD3Elevation;
97
  mode?: 'flat' | 'elevated';
98
  style?: StyleProp<ViewStyle>;
99
  theme?: ThemeProp;
100
}
101
```
102

103
### Divider
104

105
Visual separator line component.
106

107
```typescript { .api }
108
function Divider(props: DividerProps): JSX.Element;
109

110
interface DividerProps {
111
  bold?: boolean;
112
  horizontalInset?: boolean;
113
  leftInset?: boolean;
114
  style?: StyleProp<ViewStyle>;
115
  theme?: ThemeProp;
116
}
117
```
118

119
**Usage Examples:**
120

121
```typescript
122
import React from 'react';
123
import { Surface, Divider } from 'react-native-paper';
124
import { View, Text } from 'react-native';
125

126
// Surface with elevation
127
<Surface elevation={4} style={{ padding: 16 }}>
128
  <Text>Content with elevation</Text>
129
</Surface>
130

131
// Divider between items
132
<View>
133
  <Text>Item 1</Text>
134
  <Divider />
135
  <Text>Item 2</Text>
136
</View>
137
```
138

139
## Types
140

141
```typescript { .api }
142
type MD3Elevation = 0 | 1 | 2 | 3 | 4 | 5;
143

144
interface ImageSourcePropType {
145
  // React Native image source type
146
}
147
```