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.

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

Design
Code
This is some text within a card body.
<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.

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

Design
Code
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>

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

Design
Code

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.

Design
Code
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 LinkAnother Link
<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>
Design
Code
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>

Design
Code
Featured
Special title treatment

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

2 days ago
<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.

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

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

Design
Code
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>
Buy Now