0
# Card Components
1

2
Flexible content containers with headers, bodies, footers, and various styling options for organizing and displaying information.
3

4
## Capabilities
5

6
### Card
7

8
Main card container component with flexible styling and content organization options.
9

10
```python { .api }
11
class Card:
12
    """
13
    Flexible content container with Bootstrap card styling.
14
    
15
    Args:
16
        children: Card content (CardHeader, CardBody, CardFooter, etc.)
17
        id (str): Component identifier
18
        style (dict): Inline CSS styles
19
        class_name (str): Additional CSS classes
20
        color (str): Card color - "primary", "secondary", "success", "info", "warning", "danger", "light", "dark"
21
        outline (bool): Use outline style instead of solid background
22
        inverse (bool): Invert text colors for dark backgrounds
23
        body (bool): Automatically wrap children in CardBody
24
    """
25
    def __init__(self, children=None, id=None, style=None, class_name=None,
26
                 color=None, outline=False, inverse=False, body=False, **kwargs): ...
27
```
28

29
### CardHeader
30

31
Header section component for cards with title and navigation elements.
32

33
```python { .api }
34
class CardHeader:
35
    """
36
    Header section for cards.
37
    
38
    Args:
39
        children: Header content (text, components)
40
        id (str): Component identifier
41
        style (dict): Inline CSS styles
42
        class_name (str): Additional CSS classes
43
    """
44
    def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...
45
```
46

47
### CardBody
48

49
Main content area component for cards with padding and typography styling.
50

51
```python { .api }
52
class CardBody:
53
    """
54
    Main content area for cards with default padding.
55
    
56
    Args:
57
        children: Body content
58
        id (str): Component identifier
59
        style (dict): Inline CSS styles
60
        class_name (str): Additional CSS classes
61
    """
62
    def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...
63
```
64

65
### CardFooter
66

67
Footer section component for cards with actions and secondary information.
68

69
```python { .api }
70
class CardFooter:
71
    """
72
    Footer section for cards.
73
    
74
    Args:
75
        children: Footer content
76
        id (str): Component identifier
77
        style (dict): Inline CSS styles
78
        class_name (str): Additional CSS classes
79
    """
80
    def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...
81
```
82

83
### CardImg
84

85
Image component optimized for card layouts with responsive sizing.
86

87
```python { .api }
88
class CardImg:
89
    """
90
    Image component for cards with responsive sizing.
91
    
92
    Args:
93
        src (str): Image source URL
94
        alt (str): Alt text for accessibility
95
        id (str): Component identifier
96
        style (dict): Inline CSS styles
97
        class_name (str): Additional CSS classes
98
        top (bool): Position image at top of card
99
        bottom (bool): Position image at bottom of card
100
    """
101
    def __init__(self, src=None, alt=None, id=None, style=None, class_name=None,
102
                 top=False, bottom=False, **kwargs): ...
103
```
104

105
### CardImgOverlay
106

107
Overlay component for placing content over card images.
108

109
```python { .api }
110
class CardImgOverlay:
111
    """
112
    Content overlay for card images.
113
    
114
    Args:
115
        children: Overlay content
116
        id (str): Component identifier
117
        style (dict): Inline CSS styles
118
        class_name (str): Additional CSS classes
119
    """
120
    def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...
121
```
122

123
### CardLink
124

125
Link component styled for use within cards.
126

127
```python { .api }
128
class CardLink:
129
    """
130
    Link component styled for cards.
131
    
132
    Args:
133
        children: Link text or content
134
        href (str): Link URL
135
        id (str): Component identifier
136
        style (dict): Inline CSS styles
137
        class_name (str): Additional CSS classes
138
        external_link (bool): Open link in new tab
139
        target (str): Link target
140
    """
141
    def __init__(self, children=None, href=None, id=None, style=None, class_name=None,
142
                 external_link=False, target=None, **kwargs): ...
143
```
144

145
### CardGroup
146

147
Container for grouping multiple cards with connected borders.
148

149
```python { .api }
150
class CardGroup:
151
    """
152
    Container for grouping cards with connected styling.
153
    
154
    Args:
155
        children: Card components to group
156
        id (str): Component identifier
157
        style (dict): Inline CSS styles
158
        class_name (str): Additional CSS classes
159
    """
160
    def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...
161
```
162

163
## Usage Examples
164

165
### Basic Card
166

167
```python
168
import dash_bootstrap_components as dbc
169
from dash import html
170

171
basic_card = dbc.Card([
172
    dbc.CardHeader("Card Header"),
173
    dbc.CardBody([
174
        html.H4("Card Title", className="card-title"),
175
        html.P("This is some card content with text.", className="card-text"),
176
        dbc.Button("Action", color="primary"),
177
    ]),
178
    dbc.CardFooter("Card footer text"),
179
])
180
```
181

182
### Card with Auto Body
183

184
```python
185
# Card with automatic body wrapper
186
auto_body_card = dbc.Card([
187
    html.H4("Card Title", className="card-title"),
188
    html.P("Content automatically wrapped in CardBody.", className="card-text"),
189
    dbc.Button("Button", color="primary"),
190
], body=True)
191
```
192

193
### Colored Cards
194

195
```python
196
# Cards with different colors
197
colored_cards = html.Div([
198
    dbc.Row([
199
        dbc.Col([
200
            dbc.Card([
201
                dbc.CardBody([
202
                    html.H5("Primary Card", className="card-title"),
203
                    html.P("Card with primary color.", className="card-text"),
204
                ])
205
            ], color="primary", inverse=True),
206
        ], width=4),
207
        dbc.Col([
208
            dbc.Card([
209
                dbc.CardBody([
210
                    html.H5("Success Outline", className="card-title"),
211
                    html.P("Card with success outline.", className="card-text"),
212
                ])
213
            ], color="success", outline=True),
214
        ], width=4),
215
        dbc.Col([
216
            dbc.Card([
217
                dbc.CardBody([
218
                    html.H5("Warning Card", className="card-title"),
219
                    html.P("Card with warning color.", className="card-text"),
220
                ])
221
            ], color="warning"),
222
        ], width=4),
223
    ])
224
])
225
```
226

227
### Card with Image
228

229
```python
230
# Card with top image
231
image_card = dbc.Card([
232
    dbc.CardImg(src="/static/images/placeholder.jpg", top=True),
233
    dbc.CardBody([
234
        html.H4("Image Card", className="card-title"),
235
        html.P("A card with an image at the top.", className="card-text"),
236
        dbc.Button("View Details", color="primary"),
237
    ]),
238
])
239

240
# Card with image overlay
241
overlay_card = dbc.Card([
242
    dbc.CardImg(src="/static/images/hero.jpg"),
243
    dbc.CardImgOverlay([
244
        html.H4("Overlay Title", className="card-title text-white"),
245
        html.P("Text overlaid on the image.", className="card-text text-white"),
246
        dbc.Button("Learn More", color="light", outline=True),
247
    ]),
248
])
249
```
250

251
### Interactive Card
252

253
```python
254
from dash import callback, Input, Output
255

256
# Card with interactive content
257
interactive_card = dbc.Card([
258
    dbc.CardHeader([
259
        html.H5("Dashboard Stats", className="mb-0"),
260
    ]),
261
    dbc.CardBody([
262
        html.H2(id="stats-value", children="Loading...", className="text-primary"),
263
        html.P("Total users this month", className="card-text text-muted"),
264
        dbc.Button("Refresh", id="refresh-btn", color="primary", size="sm"),
265
    ]),
266
])
267

268
@callback(
269
    Output("stats-value", "children"),
270
    [Input("refresh-btn", "n_clicks")],
271
    prevent_initial_call=True
272
)
273
def update_stats(n_clicks):
274
    import random
275
    return f"{random.randint(1000, 9999):,}"
276
```
277

278
### Card Deck/Group
279

280
```python
281
# Group of cards with equal height
282
card_group = dbc.CardGroup([
283
    dbc.Card([
284
        dbc.CardImg(src="/static/images/card1.jpg", top=True),
285
        dbc.CardBody([
286
            html.H5("Card 1", className="card-title"),
287
            html.P("First card content.", className="card-text"),
288
        ]),
289
        dbc.CardFooter(html.Small("Last updated 3 mins ago", className="text-muted")),
290
    ]),
291
    dbc.Card([
292
        dbc.CardImg(src="/static/images/card2.jpg", top=True),
293
        dbc.CardBody([
294
            html.H5("Card 2", className="card-title"),
295
            html.P("Second card with longer content text.", className="card-text"),
296
        ]),
297
        dbc.CardFooter(html.Small("Last updated 5 mins ago", className="text-muted")),
298
    ]),
299
    dbc.Card([
300
        dbc.CardImg(src="/static/images/card3.jpg", top=True),
301
        dbc.CardBody([
302
            html.H5("Card 3", className="card-title"),
303
            html.P("Third card content.", className="card-text"),
304
        ]),
305
        dbc.CardFooter(html.Small("Last updated 10 mins ago", className="text-muted")),
306
    ]),
307
])
308
```
309

310
### Card Grid Layout
311

312
```python
313
# Responsive card grid
314
card_grid = dbc.Row([
315
    dbc.Col([
316
        dbc.Card([
317
            dbc.CardBody([
318
                html.H5("Feature 1", className="card-title"),
319
                html.P("Description of feature 1.", className="card-text"),
320
                dbc.CardLink("Learn More", href="#"),
321
            ])
322
        ])
323
    ], xs=12, sm=6, md=4, className="mb-4"),
324
    dbc.Col([
325
        dbc.Card([
326
            dbc.CardBody([
327
                html.H5("Feature 2", className="card-title"),
328
                html.P("Description of feature 2.", className="card-text"),
329
                dbc.CardLink("Learn More", href="#"),
330
            ])
331
        ])
332
    ], xs=12, sm=6, md=4, className="mb-4"),
333
    dbc.Col([
334
        dbc.Card([
335
            dbc.CardBody([
336
                html.H5("Feature 3", className="card-title"),
337
                html.P("Description of feature 3.", className="card-text"),
338
                dbc.CardLink("Learn More", href="#"),
339
            ])
340
        ])
341
    ], xs=12, sm=6, md=4, className="mb-4"),
342
])
343
```
344

345
### Card with Tabs
346

347
```python
348
# Card containing tabbed content
349
tabbed_card = dbc.Card([
350
    dbc.CardHeader([
351
        dbc.Tabs([
352
            dbc.Tab(label="Overview", tab_id="overview"),
353
            dbc.Tab(label="Details", tab_id="details"),
354
            dbc.Tab(label="Settings", tab_id="settings"),
355
        ], id="card-tabs", active_tab="overview"),
356
    ]),
357
    dbc.CardBody([
358
        html.Div(id="card-tab-content"),
359
    ]),
360
])
361

362
@callback(
363
    Output("card-tab-content", "children"),
364
    [Input("card-tabs", "active_tab")]
365
)
366
def render_card_tab_content(active_tab):
367
    if active_tab == "overview":
368
        return html.P("Overview content goes here.")
369
    elif active_tab == "details":
370
        return html.P("Detailed information content.")
371
    elif active_tab == "settings":
372
        return html.P("Settings and configuration options.")
373
    return html.P("Select a tab to view content.")
374
```
375

376
### Profile Card
377

378
```python
379
# User profile card example
380
profile_card = dbc.Card([
381
    dbc.CardImg(src="/static/images/avatar.jpg", top=True, style={"width": "100px", "height": "100px", "border-radius": "50%", "margin": "20px auto", "display": "block"}),
382
    dbc.CardBody([
383
        html.H4("John Doe", className="card-title text-center"),
384
        html.P("Software Engineer", className="card-text text-center text-muted"),
385
        html.Hr(),
386
        html.Div([
387
            html.Small("Email: john.doe@example.com", className="text-muted d-block"),
388
            html.Small("Phone: (555) 123-4567", className="text-muted d-block"),
389
            html.Small("Location: San Francisco, CA", className="text-muted d-block"),
390
        ]),
391
    ]),
392
    dbc.CardFooter([
393
        dbc.ButtonGroup([
394
            dbc.Button("Message", color="primary", size="sm"),
395
            dbc.Button("Call", color="success", size="sm"),
396
            dbc.Button("Email", color="info", size="sm"),
397
        ], className="w-100"),
398
    ]),
399
], style={"width": "300px"})
400
```