react bootstrap card

1<Card style={{ width: '18rem' }}>
2  <Card.Img variant="top" src="holder.js/100px180" />
3  <Card.Body>
4    <Card.Title>Card Title</Card.Title>
5    <Card.Text>
6      Some quick example text
7    </Card.Text>
8    <Button variant="primary">Go somewhere</Button>
9  </Card.Body>
10</Card>

1<>
2  <Card bg="primary" text="white" style={{ width: '18rem' }}>
3    <Card.Header>Header</Card.Header>
4    <Card.Body>
5      <Card.Title>Primary Card Title</Card.Title>
6      <Card.Text>
7        Some quick example text to build on the card title and make up the bulk
8        of the card's content.
9      </Card.Text>
10    </Card.Body>
11  </Card>
12  <br />
13
14  <Card bg="secondary" text="white" style={{ width: '18rem' }}>
15    <Card.Header>Header</Card.Header>
16    <Card.Body>
17      <Card.Title>Secondary Card Title</Card.Title>
18      <Card.Text>
19        Some quick example text to build on the card title and make up the bulk
20        of the card's content.
21      </Card.Text>
22    </Card.Body>
23  </Card>
24  <br />
25
26  <Card bg="success" text="white" style={{ width: '18rem' }}>
27    <Card.Header>Header</Card.Header>
28    <Card.Body>
29      <Card.Title>Success Card Title</Card.Title>
30      <Card.Text>
31        Some quick example text to build on the card title and make up the bulk
32        of the card's content.
33      </Card.Text>
34    </Card.Body>
35  </Card>
36  <br />
37
38  <Card bg="danger" text="white" style={{ width: '18rem' }}>
39    <Card.Header>Header</Card.Header>
40    <Card.Body>
41      <Card.Title>Danger Card Title</Card.Title>
42      <Card.Text>
43        Some quick example text to build on the card title and make up the bulk
44        of the card's content.
45      </Card.Text>
46    </Card.Body>
47  </Card>
48  <br />
49
50  <Card bg="warning" text="white" style={{ width: '18rem' }}>
51    <Card.Header>Header</Card.Header>
52    <Card.Body>
53      <Card.Title>Warning Card Title</Card.Title>
54      <Card.Text>
55        Some quick example text to build on the card title and make up the bulk
56        of the card's content.
57      </Card.Text>
58    </Card.Body>
59  </Card>
60  <br />
61
62  <Card bg="info" text="white" style={{ width: '18rem' }}>
63    <Card.Header>Header</Card.Header>
64    <Card.Body>
65      <Card.Title>Info Card Title</Card.Title>
66      <Card.Text>
67        Some quick example text to build on the card title and make up the bulk
68        of the card's content.
69      </Card.Text>
70    </Card.Body>
71  </Card>
72  <br />
73
74  <Card bg="dark" text="white" style={{ width: '18rem' }}>
75    <Card.Header>Header</Card.Header>
76    <Card.Body>
77      <Card.Title>Dark Card Title</Card.Title>
78      <Card.Text>
79        Some quick example text to build on the card title and make up the bulk
80        of the card's content.
81      </Card.Text>
82    </Card.Body>
83  </Card>
84  <br />
85
86  <Card bg="light" style={{ width: '18rem' }}>
87    <Card.Header>Header</Card.Header>
88    <Card.Body>
89      <Card.Title>Light Card Title</Card.Title>
90      <Card.Text>
91        Some quick example text to build on the card title and make up the bulk
92        of the card's content.
93      </Card.Text>
94    </Card.Body>
95  </Card>
96  <br />
97</>