:: HexaBit :: UI Card

Please wait...

###### Choose Theme

###### General Settings

- Report Panel Usag
- Email Redirect
- Notifications
- Auto Updates

###### Account Settings

- Offline
- Location Permission
- Notifications

###### Recent

- Ava Alexander Just now Lorem ipsum Veniam aliquip culpa laboris minim tempor
- Debra Stewart 38min ago Many desktop publishing packages and web page editors
- Susie Willis 2hr ago Contrary to belief, Lorem Ipsum is not simply random text
- Folisise Chosielie 2hr ago There are many of passages of available, but the majority
- Marshall Nichols 1day ago It is a long fact that a reader will be distracted

## Card Layout

Create New

##### Card title

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

Go somewhere

##### Card title

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

Go somewhere

##### Card title

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

Go somewhere

##### Card title

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

Go somewhere

##### 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 card has supporting text below as a natural lead-in to additional content.

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 card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

##### Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

##### Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

##### Card title

This card has a regular title and short paragraphy of text below it.

Last updated 3 mins ago

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

##### Card title

This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

Last updated 3 mins ago

##### 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 link Another link

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

##### 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 link Another link

#### Text alignment

##### Special title treatment

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

Go somewhere

##### Special title treatment

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

Go somewhere

##### Special title treatment

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

Go somewhere

#### Card styles with Background and color

Cards include various options for customizing their backgrounds, borders, and color.

Header

##### Primary card title

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

Header

##### Secondary card title

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

Header

##### Success card title

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

Header

##### Danger card title

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

Header

##### Warning card title

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

Header

##### Info card title

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

Header

##### Light card title

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

Header

##### Dark card title

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

#### Card Border

Use border utilities to change just the `border-color` of a card. Note that you can put `.text-{color}` classes on the parent `.card` or a subset of the card’s contents as shown below.

Header

##### Primary card title

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

Header

##### Secondary card title

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

Header

##### Success card title

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

Header

##### Danger card title

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

Header

##### Warning card title

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

Header

##### Info card title

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

Header

##### Light card title

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

Header

##### Dark card title

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

#### Header and footer

Add an optional header and/or footer within a card.

Featured

##### Special title treatment

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

Go somewhere

    <div class="card">
        <div class="card-header">
            Featured
        </div>
        <div class="card-body">
            <h5 class="card-title">Special title treatment</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>

##### Featured

##### Special title treatment

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

Go somewhere

    <div class="card">
        <h5 class="card-header">Featured</h5>
        <div class="card-body">
            <h5 class="card-title">Special title treatment</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>

Featured

##### Special title treatment

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

Go somewhere

    <div class="card text-center">
        <div class="card-header">
            Featured
        </div>
        <div class="card-body">
            <h5 class="card-title">Special title treatment</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
        <div class="card-footer text-muted">
            2 days ago
        </div>
    </div>

Quote

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

##### Special title treatment

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

Go somewhere

##### Special title treatment

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

Go somewhere

    <div class="row">
        <div class="col-sm-6">
            <div class="card">
            <div class="card-body">
                <h5 class="card-title">Special title treatment</h5>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="card">
            <div class="card-body">
                <h5 class="card-title">Special title treatment</h5>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
            </div>
        </div>
    </div>

#### Navigation

##### Special title treatment

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

Go somewhere

    <div class="card text-center">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs">
            <li class="nav-item">
                <a class="nav-link active" href="#">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
            </ul>
        </div>
        <div class="card-body">
            <h5 class="card-title">Special title treatment</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>

##### Special title treatment

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

Go somewhere

    <div class="card text-center">
        <div class="card-header">
            <ul class="nav nav-pills card-header-pills">
            <li class="nav-item">
                <a class="nav-link active" href="#">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
            </ul>
        </div>
        <div class="card-body">
            <h5 class="card-title">Special title treatment</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>

#### Image caps

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

    <div class="card mb-3">
        <img class="card-img-top" src=".../100px180/" alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="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.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
        </div>
        <div class="card">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="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.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
        <img class="card-img-bottom" src=".../100px180/" alt="Card image cap">
    </div>