coreui-free-react-admin-template

1
import React from 'react'
2
import {
3
  CButton,
4
  CCard,
5
  CCardBody,
6
  CCardFooter,
7
  CCardGroup,
8
  CCardHeader,
9
  CCardImage,
10
  CCardLink,
11
  CCardSubtitle,
12
  CCardText,
13
  CCardTitle,
14
  CListGroup,
15
  CListGroupItem,
16
  CNav,
17
  CNavItem,
18
  CNavLink,
19
  CCol,
20
  CRow,
21
} from '@coreui/react'
22
import { DocsExample } from 'src/components'
23

24
import ReactImg from 'src/assets/images/react.jpg'
25

26
const Cards = () => {
27
  return (
28
    <CRow>
29
      <CCol xs={12}>
30
        <CCard className="mb-4">
31
          <CCardHeader>
32
            <strong>Card</strong> <small>Example</small>
33
          </CCardHeader>
34
          <CCardBody>
35
            <p className="text-body-secondary small">
36
              Cards are built with as little markup and styles as possible but still manage to
37
              deliver a bunch of control and customization. Built with flexbox, they offer easy
38
              alignment and mix well with other CoreUI components. Cards have no top, left, and
39
              right margins by default, so use{' '}
40
              <a href="https://coreui.io/docs/utilities/spacing">spacing utilities</a> as needed.
41
              They have no fixed width to start, so they&#39;ll fill the full width of its parent.
42
            </p>
43
            <p className="text-body-secondary small">
44
              Below is an example of a basic card with mixed content and a fixed width. Cards have
45
              no fixed width to start, so they&#39;ll naturally fill the full width of its parent
46
              element.
47
            </p>
48
            <DocsExample href="components/card">
49
              <CCard style={{ width: '18rem' }}>
50
                <CCardImage orientation="top" src={ReactImg} />
51
                <CCardBody>
52
                  <CCardTitle>Card title</CCardTitle>
53
                  <CCardText>
54
                    Some quick example text to build on the card title and make up the bulk of the
55
                    card&#39;s content.
56
                  </CCardText>
57
                  <CButton color="primary" href="#">
58
                    Go somewhere
59
                  </CButton>
60
                </CCardBody>
61
              </CCard>
62
            </DocsExample>
63
          </CCardBody>
64
        </CCard>
65
      </CCol>
66
      <CCol xs={12}>
67
        <CCard className="mb-4">
68
          <CCardHeader>
69
            <strong>Card</strong> <small>Body</small>
70
          </CCardHeader>
71
          <CCardBody>
72
            <p className="text-body-secondary small">
73
              The main block of a card is the <code>&lt;CCardBody&gt;</code>. Use it whenever you
74
              need a padded section within a card.
75
            </p>
76
            <DocsExample href="components/card/#body">
77
              <CCard>
78
                <CCardBody>This is some text within a card body.</CCardBody>
79
              </CCard>
80
            </DocsExample>
81
          </CCardBody>
82
        </CCard>
83
      </CCol>
84
      <CCol xs={12}>
85
        <CCard className="mb-4">
86
          <CCardHeader>
87
            <strong>Card</strong> <small>Titles, text, and links</small>
88
          </CCardHeader>
89
          <CCardBody>
90
            <p className="text-body-secondary small">
91
              Card titles are managed by <code>&lt;CCardTitle&gt;</code> component. Identically,
92
              links are attached and collected next to each other by <code>&lt;CCardLink&gt;</code>{' '}
93
              component.
94
            </p>
95
            <p className="text-body-secondary small">
96
              Subtitles are managed by <code>&lt;CCardSubtitle&gt;</code> component. If the{' '}
97
              <code>&lt;CCardTitle&gt;</code> also, the <code>&lt;CCardSubtitle&gt;</code> items are
98
              stored in a <code>&lt;CCardBody&gt;</code> item, the card title, and subtitle are
99
              arranged rightly.
100
            </p>
101
            <DocsExample href="components/card/#titles-text-and-links">
102
              <CCard style={{ width: '18rem' }}>
103
                <CCardBody>
104
                  <CCardTitle>Card title</CCardTitle>
105
                  <CCardSubtitle className="mb-2 text-body-secondary">Card subtitle</CCardSubtitle>
106
                  <CCardText>
107
                    Some quick example text to build on the card title and make up the bulk of the
108
                    card&#39;s content.
109
                  </CCardText>
110
                  <CCardLink href="#">Card link</CCardLink>
111
                  <CCardLink href="#">Another link</CCardLink>
112
                </CCardBody>
113
              </CCard>
114
            </DocsExample>
115
          </CCardBody>
116
        </CCard>
117
      </CCol>
118
      <CCol xs={12}>
119
        <CCard className="mb-4">
120
          <CCardHeader>
121
            <strong>Card</strong> <small>Images</small>
122
          </CCardHeader>
123
          <CCardBody>
124
            <p className="text-body-secondary small">
125
              <code>.card-img-top</code> places a picture to the top of the card. With{' '}
126
              <code>.card-text</code>, text can be added to the card. Text within{' '}
127
              <code>.card-text</code> can additionally be styled with the regular HTML tags.
128
            </p>
129
            <DocsExample href="components/card/#images">
130
              <CCard style={{ width: '18rem' }}>
131
                <CCardImage orientation="top" src={ReactImg} />
132
                <CCardBody>
133
                  <CCardText>
134
                    Some quick example text to build on the card title and make up the bulk of the
135
                    card&#39;s content.
136
                  </CCardText>
137
                </CCardBody>
138
              </CCard>
139
            </DocsExample>
140
          </CCardBody>
141
        </CCard>
142
      </CCol>
143
      <CCol xs={12}>
144
        <CCard className="mb-4">
145
          <CCardHeader>
146
            <strong>Card</strong> <small>List groups</small>
147
          </CCardHeader>
148
          <CCardBody>
149
            <p className="text-body-secondary small">
150
              Create lists of content in a card with a flush list group.
151
            </p>
152
            <DocsExample href="components/card/#list-groups">
153
              <CRow>
154
                <CCol lg={4}>
155
                  <CCard>
156
                    <CListGroup flush>
157
                      <CListGroupItem>Cras justo odio</CListGroupItem>
158
                      <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
159
                      <CListGroupItem>Vestibulum at eros</CListGroupItem>
160
                    </CListGroup>
161
                  </CCard>
162
                </CCol>
163
                <CCol lg={4}>
164
                  <CCard>
165
                    <CCardHeader>Header</CCardHeader>
166
                    <CListGroup flush>
167
                      <CListGroupItem>Cras justo odio</CListGroupItem>
168
                      <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
169
                      <CListGroupItem>Vestibulum at eros</CListGroupItem>
170
                    </CListGroup>
171
                  </CCard>
172
                </CCol>
173
                <CCol lg={4}>
174
                  <CCard>
175
                    <CListGroup flush>
176
                      <CListGroupItem>Cras justo odio</CListGroupItem>
177
                      <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
178
                      <CListGroupItem>Vestibulum at eros</CListGroupItem>
179
                    </CListGroup>
180
                    <CCardFooter>Footer</CCardFooter>
181
                  </CCard>
182
                </CCol>
183
              </CRow>
184
            </DocsExample>
185
          </CCardBody>
186
        </CCard>
187
      </CCol>
188
      <CCol xs={12}>
189
        <CCard className="mb-4">
190
          <CCardHeader>
191
            <strong>Card</strong> <small>Kitchen sink</small>
192
          </CCardHeader>
193
          <CCardBody>
194
            <p className="text-body-secondary small">
195
              Combine and match many content types to build the card you need, or throw everything
196
              in there. Shown below are image styles, blocks, text styles, and a list group—all
197
              wrapped in a fixed-width card.
198
            </p>
199
            <DocsExample href="components/card/#kitchen-sink">
200
              <CCard style={{ width: '18rem' }}>
201
                <CCardImage orientation="top" src={ReactImg} />
202
                <CCardBody>
203
                  <CCardTitle>Card title</CCardTitle>
204
                  <CCardText>
205
                    Some quick example text to build on the card title and make up the bulk of the
206
                    card&#39;s content.
207
                  </CCardText>
208
                </CCardBody>
209
                <CListGroup flush>
210
                  <CListGroupItem>Cras justo odio</CListGroupItem>
211
                  <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
212
                  <CListGroupItem>Vestibulum at eros</CListGroupItem>
213
                </CListGroup>
214
                <CCardBody>
215
                  <CCardLink href="#">Card link</CCardLink>
216
                  <CCardLink href="#">Another link</CCardLink>
217
                </CCardBody>
218
              </CCard>
219
            </DocsExample>
220
          </CCardBody>
221
        </CCard>
222
      </CCol>
223
      <CCol xs={12}>
224
        <CCard className="mb-4">
225
          <CCardHeader>
226
            <strong>Card</strong> <small>Header and footer</small>
227
          </CCardHeader>
228
          <CCardBody>
229
            <p className="text-body-secondary small">
230
              Add an optional header and/or footer within a card.
231
            </p>
232
            <DocsExample href="components/card/#header-and-footer">
233
              <CCard>
234
                <CCardHeader>Header</CCardHeader>
235
                <CCardBody>
236
                  <CCardTitle>Special title treatment</CCardTitle>
237
                  <CCardText>
238
                    With supporting text below as a natural lead-in to additional content.
239
                  </CCardText>
240
                  <CButton color="primary" href="#">
241
                    Go somewhere
242
                  </CButton>
243
                </CCardBody>
244
              </CCard>
245
            </DocsExample>
246
            <p className="text-body-secondary small">
247
              Card headers can be styled by adding ex. <code>component=&#34;h5&#34;</code>.
248
            </p>
249
            <DocsExample href="components/card/#header-and-footer">
250
              <CCard>
251
                <CCardHeader as="h5">Header</CCardHeader>
252
                <CCardBody>
253
                  <CCardTitle>Special title treatment</CCardTitle>
254
                  <CCardText>
255
                    With supporting text below as a natural lead-in to additional content.
256
                  </CCardText>
257
                  <CButton color="primary" href="#">
258
                    Go somewhere
259
                  </CButton>
260
                </CCardBody>
261
              </CCard>
262
            </DocsExample>
263
            <DocsExample href="components/card/#header-and-footer">
264
              <CCard>
265
                <CCardHeader>Quote</CCardHeader>
266
                <CCardBody>
267
                  <blockquote className="blockquote mb-0">
268
                    <p>
269
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat
270
                      a ante.
271
                    </p>
272
                    <footer className="blockquote-footer">
273
                      Someone famous in <cite title="Source Title">Source Title</cite>
274
                    </footer>
275
                  </blockquote>
276
                </CCardBody>
277
              </CCard>
278
            </DocsExample>
279
            <DocsExample href="components/card/#header-and-footer">
280
              <CCard className="text-center">
281
                <CCardHeader>Header</CCardHeader>
282
                <CCardBody>
283
                  <CCardTitle>Special title treatment</CCardTitle>
284
                  <CCardText>
285
                    With supporting text below as a natural lead-in to additional content.
286
                  </CCardText>
287
                  <CButton color="primary" href="#">
288
                    Go somewhere
289
                  </CButton>
290
                </CCardBody>
291
                <CCardFooter className="text-body-secondary">2 days ago</CCardFooter>
292
              </CCard>
293
            </DocsExample>
294
          </CCardBody>
295
        </CCard>
296
      </CCol>
297
      <CCol xs={12}>
298
        <CCard className="mb-4">
299
          <CCardHeader>
300
            <strong>Card</strong> <small>Body</small>
301
          </CCardHeader>
302
          <CCardBody>
303
            <p className="text-body-secondary small">
304
              Cards assume no specific <code>width</code> to start, so they&#39;ll be 100% wide
305
              unless otherwise stated. You can adjust this as required with custom CSS, grid
306
              classes, grid Sass mixins, or services.
307
            </p>
308
            <h3>Using grid markup</h3>
309
            <p className="text-body-secondary small">
310
              Using the grid, wrap cards in columns and rows as needed.
311
            </p>
312
            <DocsExample href="components/card/#sizing">
313
              <CRow>
314
                <CCol sm={6}>
315
                  <CCard>
316
                    <CCardBody>
317
                      <CCardTitle>Special title treatment</CCardTitle>
318
                      <CCardText>
319
                        With supporting text below as a natural lead-in to additional content.
320
                      </CCardText>
321
                      <CButton color="primary" href="#">
322
                        Go somewhere
323
                      </CButton>
324
                    </CCardBody>
325
                  </CCard>
326
                </CCol>
327
                <CCol sm={6}>
328
                  <CCard>
329
                    <CCardBody>
330
                      <CCardTitle>Special title treatment</CCardTitle>
331
                      <CCardText>
332
                        With supporting text below as a natural lead-in to additional content.
333
                      </CCardText>
334
                      <CButton color="primary" href="#">
335
                        Go somewhere
336
                      </CButton>
337
                    </CCardBody>
338
                  </CCard>
339
                </CCol>
340
              </CRow>
341
            </DocsExample>
342
            <h3>Using utilities</h3>
343
            <p className="text-body-secondary small">
344
              Use some of{' '}
345
              <a href="https://coreui.io/docs/utilities/sizing/">available sizing utilities</a> to
346
              rapidly set a card&#39;s width.
347
            </p>
348
            <DocsExample href="components/card/#sizing">
349
              <CCard className="w-75">
350
                <CCardBody>
351
                  <CCardTitle>Card title</CCardTitle>
352
                  <CCardText>
353
                    With supporting text below as a natural lead-in to additional content.
354
                  </CCardText>
355
                  <CButton color="primary" href="#">
356
                    Go somewhere
357
                  </CButton>
358
                </CCardBody>
359
              </CCard>
360
              <CCard className="w-50">
361
                <CCardBody>
362
                  <CCardTitle>Card title</CCardTitle>
363
                  <CCardText>
364
                    With supporting text below as a natural lead-in to additional content.
365
                  </CCardText>
366
                  <CButton color="primary" href="#">
367
                    Go somewhere
368
                  </CButton>
369
                </CCardBody>
370
              </CCard>
371
            </DocsExample>
372
            <strong>Using custom CSS</strong>
373
            <p className="text-body-secondary small">
374
              Use custom CSS in your stylesheets or as inline styles to set a width.
375
            </p>
376
            <DocsExample href="components/card/#sizing">
377
              <CCard style={{ width: '18rem' }}>
378
                <CCardBody>
379
                  <CCardTitle>Special title treatment</CCardTitle>
380
                  <CCardText>
381
                    With supporting text below as a natural lead-in to additional content.
382
                  </CCardText>
383
                  <CButton color="primary" href="#">
384
                    Go somewhere
385
                  </CButton>
386
                </CCardBody>
387
              </CCard>
388
            </DocsExample>
389
          </CCardBody>
390
        </CCard>
391
      </CCol>
392
      <CCol xs={12}>
393
        <CCard className="mb-4">
394
          <CCardHeader>
395
            <strong>Card</strong> <small>Text alignment</small>
396
          </CCardHeader>
397
          <CCardBody>
398
            <p className="text-body-secondary small">
399
              You can instantly change the text arrangement of any card—in its whole or specific
400
              parts—with{' '}
401
              <a href="https://coreui.io/docs/utilities/text/#text-alignment">text align classes</a>
402
              .
403
            </p>
404
            <DocsExample href="components/card/#text-alignment">
405
              <CCard style={{ width: '18rem' }}>
406
                <CCardBody>
407
                  <CCardTitle>Special title treatment</CCardTitle>
408
                  <CCardText>
409
                    With supporting text below as a natural lead-in to additional content.
410
                  </CCardText>
411
                  <CButton color="primary" href="#">
412
                    Go somewhere
413
                  </CButton>
414
                </CCardBody>
415
              </CCard>
416
              <CCard className="text-center" style={{ width: '18rem' }}>
417
                <CCardBody>
418
                  <CCardTitle>Special title treatment</CCardTitle>
419
                  <CCardText>
420
                    With supporting text below as a natural lead-in to additional content.
421
                  </CCardText>
422
                  <CButton color="primary" href="#">
423
                    Go somewhere
424
                  </CButton>
425
                </CCardBody>
426
              </CCard>
427
              <CCard className="text-end" style={{ width: '18rem' }}>
428
                <CCardBody>
429
                  <CCardTitle>Special title treatment</CCardTitle>
430
                  <CCardText>
431
                    With supporting text below as a natural lead-in to additional content.
432
                  </CCardText>
433
                  <CButton color="primary" href="#">
434
                    Go somewhere
435
                  </CButton>
436
                </CCardBody>
437
              </CCard>
438
            </DocsExample>
439
          </CCardBody>
440
        </CCard>
441
      </CCol>
442
      <CCol xs={12}>
443
        <CCard className="mb-4">
444
          <CCardHeader>
445
            <strong>Card</strong> <small>Navigation</small>
446
          </CCardHeader>
447
          <CCardBody>
448
            <p className="text-body-secondary small">
449
              Add some navigation to a <code>&lt;CCardHeader&gt;</code> with our{' '}
450
              <code>&lt;CNav&gt;</code> component.
451
            </p>
452
            <DocsExample href="components/card/##navigation">
453
              <CCard className="text-center">
454
                <CCardHeader>
455
                  <CNav variant="tabs" className="card-header-tabs">
456
                    <CNavItem>
457
                      <CNavLink href="#" active>
458
                        Active
459
                      </CNavLink>
460
                    </CNavItem>
461
                    <CNavItem>
462
                      <CNavLink href="#">Link</CNavLink>
463
                    </CNavItem>
464
                    <CNavItem>
465
                      <CNavLink href="#" disabled>
466
                        Disabled
467
                      </CNavLink>
468
                    </CNavItem>
469
                  </CNav>
470
                </CCardHeader>
471
                <CCardBody>
472
                  <CCardTitle>Special title treatment</CCardTitle>
473
                  <CCardText>
474
                    With supporting text below as a natural lead-in to additional content.
475
                  </CCardText>
476
                  <CButton color="primary" href="#">
477
                    Go somewhere
478
                  </CButton>
479
                </CCardBody>
480
              </CCard>
481
            </DocsExample>
482
            <DocsExample href="components/card/##navigation">
483
              <CCard className="text-center">
484
                <CCardHeader>
485
                  <CNav variant="pills" className="card-header-pills">
486
                    <CNavItem>
487
                      <CNavLink href="#" active>
488
                        Active
489
                      </CNavLink>
490
                    </CNavItem>
491
                    <CNavItem>
492
                      <CNavLink href="#">Link</CNavLink>
493
                    </CNavItem>
494
                    <CNavItem>
495
                      <CNavLink href="#" disabled>
496
                        Disabled
497
                      </CNavLink>
498
                    </CNavItem>
499
                  </CNav>
500
                </CCardHeader>
501
                <CCardBody>
502
                  <CCardTitle>Special title treatment</CCardTitle>
503
                  <CCardText>
504
                    With supporting text below as a natural lead-in to additional content.
505
                  </CCardText>
506
                  <CButton color="primary" href="#">
507
                    Go somewhere
508
                  </CButton>
509
                </CCardBody>
510
              </CCard>
511
            </DocsExample>
512
          </CCardBody>
513
        </CCard>
514
      </CCol>
515
      <CCol xs={12}>
516
        <CCard className="mb-4">
517
          <CCardHeader>
518
            <strong>Card</strong> <small>Image caps</small>
519
          </CCardHeader>
520
          <CCardBody>
521
            <p className="text-body-secondary small">
522
              Similar to headers and footers, cards can include top and bottom &#34;image
523
              caps&#34;—images at the top or bottom of a card.
524
            </p>
525
            <DocsExample href="components/card/#image-caps">
526
              <CRow>
527
                <CCol lg={6}>
528
                  <CCard className="mb-3">
529
                    <CCardImage orientation="top" src={ReactImg} />
530
                    <CCardBody>
531
                      <CCardTitle>Card title</CCardTitle>
532
                      <CCardText>
533
                        This is a wider card with supporting text below as a natural lead-in to
534
                        additional content. This content is a little bit longer.
535
                      </CCardText>
536
                      <CCardText>
537
                        <small className="text-body-secondary">Last updated 3 mins ago</small>
538
                      </CCardText>
539
                    </CCardBody>
540
                  </CCard>
541
                </CCol>
542
                <CCol lg={6}>
543
                  <CCard className="mb-3">
544
                    <CCardBody>
545
                      <CCardTitle>Card title</CCardTitle>
546
                      <CCardText>
547
                        This is a wider card with supporting text below as a natural lead-in to
548
                        additional content. This content is a little bit longer.
549
                      </CCardText>
550
                      <CCardText>
551
                        <small className="text-body-secondary">Last updated 3 mins ago</small>
552
                      </CCardText>
553
                    </CCardBody>
554
                    <CCardImage orientation="bottom" src={ReactImg} />
555
                  </CCard>
556
                </CCol>
557
              </CRow>
558
            </DocsExample>
559
          </CCardBody>
560
        </CCard>
561
      </CCol>
562
      <CCol xs={12}>
563
        <CCard className="mb-4">
564
          <CCardHeader>
565
            <strong>Card</strong> <small>Card styles</small>
566
          </CCardHeader>
567
          <CCardBody>
568
            <p className="text-body-secondary small">
569
              Cards include various options for customizing their backgrounds, borders, and color.
570
            </p>
571
            <h3>Background and color</h3>
572
            <p className="text-body-secondary small">
573
              Use <code>color</code> property to change the appearance of a card.
574
            </p>
575
            <DocsExample href="components/card/#background-and-color">
576
              <CRow>
577
                {[
578
                  { color: 'primary', textColor: 'white' },
579
                  { color: 'secondary', textColor: 'white' },
580
                  { color: 'success', textColor: 'white' },
581
                  { color: 'danger', textColor: 'white' },
582
                  { color: 'warning' },
583
                  { color: 'info', textColor: 'white' },
584
                  { color: 'light' },
585
                  { color: 'dark', textColor: 'white' },
586
                ].map((item, index) => (
587
                  <CCol lg={4} key={index}>
588
                    <CCard color={item.color} textColor={item.textColor} className="mb-3">
589
                      <CCardHeader>Header</CCardHeader>
590
                      <CCardBody>
591
                        <CCardTitle>{item.color} card title</CCardTitle>
592
                        <CCardText>
593
                          Some quick example text to build on the card title and make up the bulk of
594
                          the card&#39;s content.
595
                        </CCardText>
596
                      </CCardBody>
597
                    </CCard>
598
                  </CCol>
599
                ))}
600
              </CRow>
601
            </DocsExample>
602
            <h3>Border</h3>
603
            <p className="text-body-secondary small">
604
              Use <a href="https://coreui.io/docs/utilities/borders/">border utilities</a> to change
605
              just the <code>border-color</code> of a card. Note that you can set{' '}
606
              <code>textColor</code> property on the <code>&lt;CCard&gt;</code> or a subset of the
607
              card&#39;s contents as shown below.
608
            </p>
609
            <DocsExample href="components/card/#border">
610
              <CRow>
611
                {[
612
                  { color: 'primary', textColor: 'primary' },
613
                  { color: 'secondary', textColor: 'secondary' },
614
                  { color: 'success', textColor: 'success' },
615
                  { color: 'danger', textColor: 'danger' },
616
                  { color: 'warning', textColor: 'warning' },
617
                  { color: 'info', textColor: 'info' },
618
                  { color: 'light' },
619
                  { color: 'dark' },
620
                ].map((item, index) => (
621
                  <CCol lg={4} key={index}>
622
                    <CCard textColor={item.textColor} className={`mb-3 border-${item.color}`}>
623
                      <CCardHeader>Header</CCardHeader>
624
                      <CCardBody>
625
                        <CCardTitle>{item.color} card title</CCardTitle>
626
                        <CCardText>
627
                          Some quick example text to build on the card title and make up the bulk of
628
                          the card&#39;s content.
629
                        </CCardText>
630
                      </CCardBody>
631
                    </CCard>
632
                  </CCol>
633
                ))}
634
              </CRow>
635
            </DocsExample>
636
            <h3>Top border</h3>
637
            <p className="text-body-secondary small">
638
              Use <a href="https://coreui.io/docs/utilities/borders/">border utilities</a> to change
639
              just the <code>border-color</code> of a card. Note that you can set{' '}
640
              <code>textColor</code> property on the <code>&lt;CCard&gt;</code> or a subset of the
641
              card&#39;s contents as shown below.
642
            </p>
643
            <DocsExample href="components/card/#top-border">
644
              <CRow>
645
                {[
646
                  { color: 'primary', textColor: 'primary' },
647
                  { color: 'secondary', textColor: 'secondary' },
648
                  { color: 'success', textColor: 'success' },
649
                  { color: 'danger', textColor: 'danger' },
650
                  { color: 'warning', textColor: 'warning' },
651
                  { color: 'info', textColor: 'info' },
652
                  { color: 'light' },
653
                  { color: 'dark' },
654
                ].map((item, index) => (
655
                  <CCol lg={4} key={index}>
656
                    <CCard
657
                      textColor={item.textColor}
658
                      className={`mb-3 border-top-${item.color} border-top-3`}
659
                    >
660
                      <CCardHeader>Header</CCardHeader>
661
                      <CCardBody>
662
                        <CCardTitle>{item.color} card title</CCardTitle>
663
                        <CCardText>
664
                          Some quick example text to build on the card title and make up the bulk of
665
                          the card&#39;s content.
666
                        </CCardText>
667
                      </CCardBody>
668
                    </CCard>
669
                  </CCol>
670
                ))}
671
              </CRow>
672
            </DocsExample>
673
          </CCardBody>
674
        </CCard>
675
      </CCol>
676
      <CCol xs={12}>
677
        <CCard className="mb-4">
678
          <CCardHeader>
679
            <strong>Card</strong> <small>Card groups</small>
680
          </CCardHeader>
681
          <CCardBody>
682
            <p className="text-body-secondary small">
683
              Use card groups to render cards as a single, attached element with equal width and
684
              height columns. Card groups start off stacked and use <code>display: flex;</code> to
685
              become attached with uniform dimensions starting at the <code>sm</code> breakpoint.
686
            </p>
687
            <DocsExample href="components/card/#card-groups">
688
              <CCardGroup>
689
                <CCard>
690
                  <CCardImage orientation="top" src={ReactImg} />
691
                  <CCardBody>
692
                    <CCardTitle>Card title</CCardTitle>
693
                    <CCardText>
694
                      This is a wider card with supporting text below as a natural lead-in to
695
                      additional content. This content is a little bit longer.
696
                    </CCardText>
697
                    <CCardText>
698
                      <small className="text-body-secondary">Last updated 3 mins ago</small>
699
                    </CCardText>
700
                  </CCardBody>
701
                </CCard>
702
                <CCard>
703
                  <CCardImage orientation="top" src={ReactImg} />
704
                  <CCardBody>
705
                    <CCardTitle>Card title</CCardTitle>
706
                    <CCardText>
707
                      This card has supporting text below as a natural lead-in to additional
708
                      content.
709
                    </CCardText>
710
                    <CCardText>
711
                      <small className="text-body-secondary">Last updated 3 mins ago</small>
712
                    </CCardText>
713
                  </CCardBody>
714
                </CCard>
715
                <CCard>
716
                  <CCardImage orientation="top" src={ReactImg} />
717
                  <CCardBody>
718
                    <CCardTitle>Card title</CCardTitle>
719
                    <CCardText>
720
                      This is a wider card with supporting text below as a natural lead-in to
721
                      additional content. This card has even longer content than the first to show
722
                      that equal height action.
723
                    </CCardText>
724
                    <CCardText>
725
                      <small className="text-body-secondary">Last updated 3 mins ago</small>
726
                    </CCardText>
727
                  </CCardBody>
728
                </CCard>
729
              </CCardGroup>
730
            </DocsExample>
731
            <p className="text-body-secondary small">
732
              When using card groups with footers, their content will automatically line up.
733
            </p>
734
            <DocsExample href="components/card/#card-groups">
735
              <CCardGroup>
736
                <CCard>
737
                  <CCardImage orientation="top" src={ReactImg} />
738
                  <CCardBody>
739
                    <CCardTitle>Card title</CCardTitle>
740
                    <CCardText>
741
                      This is a wider card with supporting text below as a natural lead-in to
742
                      additional content. This content is a little bit longer.
743
                    </CCardText>
744
                  </CCardBody>
745
                  <CCardFooter>
746
                    <small className="text-body-secondary">Last updated 3 mins ago</small>
747
                  </CCardFooter>
748
                </CCard>
749
                <CCard>
750
                  <CCardImage orientation="top" src={ReactImg} />
751
                  <CCardBody>
752
                    <CCardTitle>Card title</CCardTitle>
753
                    <CCardText>
754
                      This card has supporting text below as a natural lead-in to additional
755
                      content.
756
                    </CCardText>
757
                  </CCardBody>
758
                  <CCardFooter>
759
                    <small className="text-body-secondary">Last updated 3 mins ago</small>
760
                  </CCardFooter>
761
                </CCard>
762
                <CCard>
763
                  <CCardImage orientation="top" src={ReactImg} />
764
                  <CCardBody>
765
                    <CCardTitle>Card title</CCardTitle>
766
                    <CCardText>
767
                      This is a wider card with supporting text below as a natural lead-in to
768
                      additional content. This card has even longer content than the first to show
769
                      that equal height action.
770
                    </CCardText>
771
                  </CCardBody>
772
                  <CCardFooter>
773
                    <small className="text-body-secondary">Last updated 3 mins ago</small>
774
                  </CCardFooter>
775
                </CCard>
776
              </CCardGroup>
777
            </DocsExample>
778
          </CCardBody>
779
        </CCard>
780
      </CCol>
781
      <CCol xs={12}>
782
        <CCard className="mb-4">
783
          <CCardHeader>
784
            <strong>Card</strong> <small>Grid cards</small>
785
          </CCardHeader>
786
          <CCardBody>
787
            <p className="text-body-secondary small">
788
              Use the <code>CRow</code> component and set{' '}
789
              <code>&#123;xs|sm|md|lg|xl|xxl&#125;=&#123;&#123; cols: * &#125;&#125;</code> property
790
              to control how many grid columns (wrapped around your cards) you show per row. For
791
              example, here&#39;s <code>xs=&#123;&#123;cols: 1&#125;&#125;</code> laying out the
792
              cards on one column, and <code>md=&#123;&#123;cols: 1&#125;&#125;</code> splitting
793
              four cards to equal width across multiple rows, from the medium breakpoint up.
794
            </p>
795
            <DocsExample href="components/card/#grid-cards">
796
              <CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 2 }}>
797
                <CCol xs>
798
                  <CCard>
799
                    <CCardImage orientation="top" src={ReactImg} />
800
                    <CCardBody>
801
                      <CCardTitle>Card title</CCardTitle>
802
                      <CCardText>
803
                        This is a wider card with supporting text below as a natural lead-in to
804
                        additional content. This content is a little bit longer.
805
                      </CCardText>
806
                    </CCardBody>
807
                    <CCardFooter>
808
                      <small className="text-body-secondary">Last updated 3 mins ago</small>
809
                    </CCardFooter>
810
                  </CCard>
811
                </CCol>
812
                <CCol xs>
813
                  <CCard>
814
                    <CCardImage orientation="top" src={ReactImg} />
815
                    <CCardBody>
816
                      <CCardTitle>Card title</CCardTitle>
817
                      <CCardText>
818
                        This is a wider card with supporting text below as a natural lead-in to
819
                        additional content. This content is a little bit longer.
820
                      </CCardText>
821
                    </CCardBody>
822
                    <CCardFooter>
823
                      <small className="text-body-secondary">Last updated 3 mins ago</small>
824
                    </CCardFooter>
825
                  </CCard>
826
                </CCol>
827
                <CCol xs>
828
                  <CCard>
829
                    <CCardImage orientation="top" src={ReactImg} />
830
                    <CCardBody>
831
                      <CCardTitle>Card title</CCardTitle>
832
                      <CCardText>
833
                        This is a wider card with supporting text below as a natural lead-in to
834
                        additional content. This content is a little bit longer.
835
                      </CCardText>
836
                    </CCardBody>
837
                    <CCardFooter>
838
                      <small className="text-body-secondary">Last updated 3 mins ago</small>
839
                    </CCardFooter>
840
                  </CCard>
841
                </CCol>
842
                <CCol xs>
843
                  <CCard>
844
                    <CCardImage orientation="top" src={ReactImg} />
845
                    <CCardBody>
846
                      <CCardTitle>Card title</CCardTitle>
847
                      <CCardText>
848
                        This is a wider card with supporting text below as a natural lead-in to
849
                        additional content. This content is a little bit longer.
850
                      </CCardText>
851
                    </CCardBody>
852
                    <CCardFooter>
853
                      <small className="text-body-secondary">Last updated 3 mins ago</small>
854
                    </CCardFooter>
855
                  </CCard>
856
                </CCol>
857
              </CRow>
858
            </DocsExample>
859
            <p className="text-body-secondary small">
860
              Change it to <code>md=&#123;&#123; cols: 3&#125;&#125;</code> and you&#39;ll see the
861
              fourth card wrap.
862
            </p>
863
            <DocsExample href="components/card/#grid-cards">
864
              <CRow xs={{ cols: 1, gutter: 4 }} md={{ cols: 3 }}>
865
                <CCol xs>
866
                  <CCard>
867
                    <CCardImage orientation="top" src={ReactImg} />
868
                    <CCardBody>
869
                      <CCardTitle>Card title</CCardTitle>
870
                      <CCardText>
871
                        This is a wider card with supporting text below as a natural lead-in to
872
                        additional content. This content is a little bit longer.
873
                      </CCardText>
874
                    </CCardBody>
875
                    <CCardFooter>
876
                      <small className="text-body-secondary">Last updated 3 mins ago</small>
877
                    </CCardFooter>
878
                  </CCard>
879
                </CCol>
880
                <CCol xs>
881
                  <CCard>
882
                    <CCardImage orientation="top" src={ReactImg} />
883
                    <CCardBody>
884
                      <CCardTitle>Card title</CCardTitle>
885
                      <CCardText>
886
                        This is a wider card with supporting text below as a natural lead-in to
887
                        additional content. This content is a little bit longer.
888
                      </CCardText>
889
                    </CCardBody>
890
                    <CCardFooter>
891
                      <small className="text-body-secondary">Last updated 3 mins ago</small>
892
                    </CCardFooter>
893
                  </CCard>
894
                </CCol>
895
                <CCol xs>
896
                  <CCard>
897
                    <CCardImage orientation="top" src={ReactImg} />
898
                    <CCardBody>
899
                      <CCardTitle>Card title</CCardTitle>
900
                      <CCardText>
901
                        This is a wider card with supporting text below as a natural lead-in to
902
                        additional content. This content is a little bit longer.
903
                      </CCardText>
904
                    </CCardBody>
905
                    <CCardFooter>
906
                      <small className="text-body-secondary">Last updated 3 mins ago</small>
907
                    </CCardFooter>
908
                  </CCard>
909
                </CCol>
910
                <CCol xs>
911
                  <CCard>
912
                    <CCardImage orientation="top" src={ReactImg} />
913
                    <CCardBody>
914
                      <CCardTitle>Card title</CCardTitle>
915
                      <CCardText>
916
                        This is a wider card with supporting text below as a natural lead-in to
917
                        additional content. This content is a little bit longer.
918
                      </CCardText>
919
                    </CCardBody>
920
                    <CCardFooter>
921
                      <small className="text-body-secondary">Last updated 3 mins ago</small>
922
                    </CCardFooter>
923
                  </CCard>
924
                </CCol>
925
              </CRow>
926
            </DocsExample>
927
          </CCardBody>
928
        </CCard>
929
      </CCol>
930
    </CRow>
931
  )
932
}
933

934
export default Cards
935