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.

Card Title

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>.

This is some text within a card body.
<Card>
<Card.Body>This is some text within a card body.</Card.Body>
</Card>

Card Title
Card Subtitle

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.

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros
<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>

Featured
Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros
<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.

Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros
<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>

Featured
Special title treatment

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>

Featured
Special title treatment

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.

Special title treatment

With supporting text below as a natural lead-in to additional content.

Special title treatment

With supporting text below as a natural lead-in to additional content.

Special title treatment

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.

Card title

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 title

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 to
additional 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 to
additional 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 title

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 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 to
additional content. This content is a little bit longer.
</Card.Text>
<Card.Text>Last updated 3 mins ago</Card.Text>
</Card.ImgOverlay>
</Card>