Cards
Geek's cards provide a flexible and extensible content container with multiple variants and options.
Basic Example
Below is an example of a basic card with mixed content and a fixed width.
Some quick example text to build on the card title and make up the bulk of the card's content.
<Card style={{ width: '18rem' }}><Card.Img variant="top" src="https://fakeimg.pl/640x360/?text=Image Placeholder" /><Card.Body><Card.Title>Card Title</Card.Title><Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text><Button variant="primary">Go somewhere</Button></Card.Body></Card>
Card Body
Use <Card.Body>
to pad content inside a <Card>
.
<Card><Card.Body>This is some text within a card body.</Card.Body></Card>
Titles, text, and links
Using <Card.Title>
, <Card.Subtitle>
, and <Card.Text>
inside the <Card.Body>
will line them up nicely. <Card.Link>
s are used to line up links next to each other.
<Card.Text>
outputs <p>
tags around the content, so you can use multiple <Card.Text>
s to create separate paragraphs.
Some quick example text to build on the card title and make up the bulk of the card's content.
Card LinkAnother Link<Card style={{ width: '18rem' }}><Card.Body><Card.Title>Card Title</Card.Title><Card.Subtitle className="mb-2 text-muted">Card Subtitle</Card.Subtitle><Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text><Card.Link href="#">Card Link</Card.Link><Card.Link href="#">Another Link</Card.Link></Card.Body></Card>
List Groups
Create lists of content in a card with a flush list group.
<Card style={{ width: '18rem' }}><ListGroup variant="flush"><ListGroup.Item>Cras justo odio</ListGroup.Item><ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item><ListGroup.Item>Vestibulum at eros</ListGroup.Item></ListGroup></Card>
<Card style={{ width: '18rem' }}><Card.Header>Featured</Card.Header><ListGroup variant="flush"><ListGroup.Item>Cras justo odio</ListGroup.Item><ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item><ListGroup.Item>Vestibulum at eros</ListGroup.Item></ListGroup></Card>
Images
<Card.Img>
with variant="top"
places an image to the top of the card. With <Card.Text>
, text can be added to the card. Text within <Card.Text>
can also be styled with the standard HTML tags.
Some quick example text to build on the card title and make up the bulk of the card's content.
<Card style={{ width: '18rem' }}><Card.Img variant="top" src="https://fakeimg.pl/640x360/?text=Image Placeholder" /><Card.Body><Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text></Card.Body></Card>
Kitchen sink
Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
Some quick example text to build on the card title and make up the bulk of the card's content.
<Card style={{ width: '18rem' }}><Card.Img variant="top" src="https://fakeimg.pl/640x360/?text=Image Placeholder" /><Card.Body><Card.Title>Card Title</Card.Title><Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text></Card.Body><ListGroup className="list-group-flush"><ListGroupItem>Cras justo odio</ListGroupItem><ListGroupItem>Dapibus ac facilisis in</ListGroupItem><ListGroupItem>Vestibulum at eros</ListGroupItem></ListGroup><Card.Body><Card.Link href="#">Card Link</Card.Link><Card.Link href="#">Another Link</Card.Link></Card.Body></Card>
With supporting text below as a natural lead-in to additional content.
<Card><Card.Header>Featured</Card.Header><Card.Body><Card.Title>Special title treatment</Card.Title><Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text><Button variant="primary">Go somewhere</Button></Card.Body></Card>
With supporting text below as a natural lead-in to additional content.
<Card className="text-center"><Card.Header>Featured</Card.Header><Card.Body><Card.Title>Special title treatment</Card.Title><Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text><Button variant="primary">Go somewhere</Button></Card.Body><Card.Footer className="text-muted">2 days ago</Card.Footer></Card>
Text alignment
You can quickly change the text alignment of any card—in its entirety or specific parts—with our text align classes.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
<Card style={{ width: '18rem' }}><Card.Body><Card.Title>Special title treatment</Card.Title><Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text><Button variant="primary">Go somewhere</Button></Card.Body></Card><Card style={{ width: '18rem' }} className="text-center"><Card.Body><Card.Title>Special title treatment</Card.Title><Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text><Button variant="primary">Go somewhere</Button></Card.Body></Card><Card style={{ width: '18rem' }} className="text-end"><Card.Body><Card.Title>Special title treatment</Card.Title><Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text><Button variant="primary">Go somewhere</Button></Card.Body></Card>
Images
Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.
Image caps
Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
<Card><Card.Img variant="top" src="https://fakeimg.pl/640x360/?text=Image Placeholder" /><Card.Body><Card.Title>Card title</Card.Title><Card.Text>This is a wider card with supporting text below as a natural lead-in toadditional content. This content is a little bit longer.</Card.Text><Card.Text><small className="text-muted">Last updated 3 mins ago</small></Card.Text></Card.Body></Card><br /><Card><Card.Body><Card.Title>Card title</Card.Title><Card.Text>This is a wider card with supporting text below as a natural lead-in toadditional content. This content is a little bit longer.</Card.Text><Card.Text><small className="text-muted">Last updated 3 mins ago</small></Card.Text></Card.Body><Card.Img variant="bottom" src="https://fakeimg.pl/640x360/?text=Image Placeholder" /></Card>
Image overlays
Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.
<Card className="bg-dark text-white"><Card.Img variant="bottom" src="https://fakeimg.pl/640x360/?text=Image Placeholder" /><Card.ImgOverlay><Card.Title>Card title</Card.Title><Card.Text>This is a wider card with supporting text below as a natural lead-in toadditional content. This content is a little bit longer.</Card.Text><Card.Text>Last updated 3 mins ago</Card.Text></Card.ImgOverlay></Card>