0
# Card Components
1

2
Bootstrap card components for displaying content in flexible containers with headers, bodies, footers, and various styling options.
3

4
## Capabilities
5

6
### Card
7

8
Bootstrap card container component providing flexible content container with padding and styling.
9

10
```javascript { .api }
11
/**
12
 * Bootstrap card container component
13
 * @param props.inverse - Use inverse color scheme (deprecated)
14
 * @param props.color - Card background color theme
15
 * @param props.outline - Use outline card style
16
 * @param props.body - Apply card-body padding to direct children
17
 * @param props.tag - HTML element to render as (default: 'div')
18
 * @param props.className - Additional CSS classes
19
 * @param props.cssModule - CSS Module mapping object
20
 * @param props.children - Card content components
21
 */
22
function Card(props: {
23
  inverse?: boolean;
24
  color?: string;
25
  outline?: boolean;
26
  body?: boolean;
27
  tag?: React.ElementType;
28
  className?: string;
29
  cssModule?: object;
30
  children?: React.ReactNode;
31
}): JSX.Element;
32
```
33

34
### CardBody
35

36
Card body component providing the main content area with proper padding.
37

38
```javascript { .api }
39
/**
40
 * Card body content area with padding
41
 * @param props.tag - HTML element to render as (default: 'div')
42
 * @param props.className - Additional CSS classes
43
 * @param props.cssModule - CSS Module mapping object
44
 * @param props.children - Card body content
45
 */
46
function CardBody(props: {
47
  tag?: React.ElementType;
48
  className?: string;
49
  cssModule?: object;
50
  children?: React.ReactNode;
51
}): JSX.Element;
52
```
53

54
### CardHeader
55

56
Card header component for titles and header content.
57

58
```javascript { .api }
59
/**
60
 * Card header component
61
 * @param props.tag - HTML element to render as (default: 'div')
62
 * @param props.className - Additional CSS classes
63
 * @param props.cssModule - CSS Module mapping object
64
 * @param props.children - Header content
65
 */
66
function CardHeader(props: {
67
  tag?: React.ElementType;
68
  className?: string;
69
  cssModule?: object;
70
  children?: React.ReactNode;
71
}): JSX.Element;
72
```
73

74
### CardFooter
75

76
Card footer component for action buttons and secondary content.
77

78
```javascript { .api }
79
/**
80
 * Card footer component
81
 * @param props.tag - HTML element to render as (default: 'div')
82
 * @param props.className - Additional CSS classes
83
 * @param props.cssModule - CSS Module mapping object
84
 * @param props.children - Footer content
85
 */
86
function CardFooter(props: {
87
  tag?: React.ElementType;
88
  className?: string;
89
  cssModule?: object;
90
  children?: React.ReactNode;
91
}): JSX.Element;
92
```
93

94
### CardTitle, CardSubtitle, CardText
95

96
Text components for card content with appropriate typography styling.
97

98
```javascript { .api }
99
/**
100
 * Card title component with heading styling
101
 */
102
function CardTitle(props: {
103
  tag?: React.ElementType;
104
  className?: string;
105
  cssModule?: object;
106
  children?: React.ReactNode;
107
}): JSX.Element;
108

109
/**
110
 * Card subtitle component with muted styling
111
 */
112
function CardSubtitle(props: {
113
  tag?: React.ElementType;
114
  className?: string;
115
  cssModule?: object;
116
  children?: React.ReactNode;
117
}): JSX.Element;
118

119
/**
120
 * Card text component with paragraph styling
121
 */
122
function CardText(props: {
123
  tag?: React.ElementType;
124
  className?: string;
125
  cssModule?: object;
126
  children?: React.ReactNode;
127
}): JSX.Element;
128
```
129

130
### CardImg
131

132
Card image component with positioning options.
133

134
```javascript { .api }
135
/**
136
 * Card image component
137
 * @param props.top - Position image at top of card
138
 * @param props.bottom - Position image at bottom of card
139
 * @param props.tag - HTML element to render as (default: 'img')
140
 * @param props.className - Additional CSS classes
141
 * @param props.cssModule - CSS Module mapping object
142
 */
143
function CardImg(props: {
144
  top?: boolean;
145
  bottom?: boolean;
146
  tag?: React.ElementType;
147
  className?: string;
148
  cssModule?: object;
149
  [key: string]: any;
150
}): JSX.Element;
151
```
152

153
## Usage Examples
154

155
### Basic Card
156

157
```jsx
158
import { 
159
  Card, 
160
  CardBody, 
161
  CardTitle, 
162
  CardSubtitle, 
163
  CardText, 
164
  Button 
165
} from 'reactstrap';
166

167
function BasicCard() {
168
  return (
169
    <Card style={{ width: '18rem' }}>
170
      <CardBody>
171
        <CardTitle tag="h5">Card title</CardTitle>
172
        <CardSubtitle tag="h6" className="mb-2 text-muted">
173
          Card subtitle
174
        </CardSubtitle>
175
        <CardText>
176
          Some quick example text to build on the card title and make up the 
177
          bulk of the card's content.
178
        </CardText>
179
        <Button color="primary">Go somewhere</Button>
180
      </CardBody>
181
    </Card>
182
  );
183
}
184
```
185

186
### Card with Image
187

188
```jsx
189
import { Card, CardImg, CardImgOverlay, CardTitle, CardText } from 'reactstrap';
190

191
function ImageCard() {
192
  return (
193
    <Card>
194
      <CardImg top width="100%" src="/path/to/image.jpg" alt="Card image cap" />
195
      <CardBody>
196
        <CardTitle tag="h5">Card Title</CardTitle>
197
        <CardText>Card content goes here</CardText>
198
      </CardBody>
199
    </Card>
200
  );
201
}
202
```