Image
Buy Now
avatar
dash ui - admin dashboard template
Unlimited Access

Upgrade your plan from a Free trial, to select Business Plan. Start Now

Upgrade Now

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 as="h3">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 as="h3">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>

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 as="h3">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 as="h3">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' }}  className="mb-3">
    <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 mb-3">
    <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 as="h3">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 as="h3">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 as="h3">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>