# Boomerang UI Kit

## Cards

Our cards provide a flexible and extensible content container with multiple variants and options.

Open Bootstrap Docs

### Example

#### Card title

Some quick example text....

Go somewhere

    <div class="card" style="width: 18rem;">
        <img class="card-img-top" src="holder.js/600x400?auto=yes" alt="Card image cap" class="img-fluid">
        <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">Some quick example text....</p>
            <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
        </div>
    </div>

### Metadata

##### Special title treatment

###### 2 hrs ago

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

Go somewhere

##### Special title treatment

- 50
- 750

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

Go somewhere

    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-body">
                    <h5 class="heading heading-5 strong-600">Special title treatment</h5>
                    <h6 class="text-muted mb-4">2 hrs ago</h6>
                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card">
                <div class="card-body">
                    <h5 class="heading heading-5 strong-600">Special title treatment</h5>
                    <ul class="list-inline mb-4">
                        <li class="list-inline-item pr-2">
                            <a href="#"><i class="fas fa-heart mr-1"></i> 50</a>
                        </li>
                        <li class="list-inline-item">
                            <i class="fas fa-eye text-muted mr-1"></i> 750
                        </li>
                    </ul>
                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
    </div>

##### Special title treatment

###### 2 hrs ago

With supporting text below...

Go somewhere

##### Special title treatment

###### 2 hrs ago

With supporting text below...

Go somewhere

    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <h5 class="heading heading-5 strong-600">Special title treatment</h5>
                    <h6 class="heading heading-sm strong-400 text-muted mb-4">
                        2 hrs ago
                    </h6>
                    <p class="card-text">With supporting text below...</p>
                    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
                </div>
                <div class="card-footer">
                    <div class="row align-items-center">
                        <div class="col">
                            <span class="avatar avatar-sm bg-purple">JD</span>
                            <span class="avatar-content">David Wally</span>
                        </div>
                        <div class="col text-right text-xs-right">
                            <ul class="list-inline mb-0">
                                <li class="list-inline-item pr-2">
                                    <a href="#"><i class="fas fa-heart mr-1"></i> 50</a>
                                </li>
                                <li class="list-inline-item">
                                    <i class="fas fa-eye text-muted mr-1"></i> 750
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <h5 class="heading heading-5 strong-600">Special title treatment</h5>
                    <h6 class="heading heading-sm strong-400 text-muted mb-4">
                        2 hrs ago
                    </h6>
                    <p class="card-text">With supporting text below...</p>
                    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
                </div>
                <div class="card-footer">
                    <div class="row align-items-center">
                        <div class="col">
                            <span class="avatar avatar-sm bg-purple">JD</span>
                            <span class="avatar-content">David Wally</span>
                        </div>
                        <div class="col text-right text-xs-right">
                            <ul class="list-inline mb-0">
                                <li class="list-inline-item pr-2">
                                    2 hrs ago
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

### Actions

#### Favorite post

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

#### Love & bookmark post

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

    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col-8">
                            <h4 class="heading h5 mb-0">Favorite post</h4>
                        </div>
                        <div class="col-4">
                            <div class="card-icon-actions text-right">
                                <a href="#" class="favorite active" data-toggle="tooltip" data-original-title="Save to favorites"><i class="fas fa-star"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </div>
                <div class="card-footer">
                    <div class="row align-items-center">
                        <div class="col-6">
                            <a href="#" class="btn btn-sm btn-primary">Action button</a>
                        </div>
                        <div class="col-6 text-right">
                            <span class="text-muted">2 hrs ago</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col-8">
                            <h4 class="heading h5 mb-0">Love &amp; bookmark post</h4>
                        </div>
                        <div class="col-4">
                            <div class="card-icon-actions text-right">
                                <a href="#" class="favorite" data-toggle="tooltip" data-original-title="Save as favorite"><i class="fas fa-star"></i></a>
                                <a href="#" class="love active" data-toggle="tooltip" data-original-title="Love this"><i class="fas fa-heart"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </div>
                <div class="card-footer">
                    <div class="row align-items-center">
                        <div class="col-6">
                            <a href="#" class="btn btn-sm btn-primary">Action button</a>
                        </div>
                        <div class="col-6 text-right">
                            <span class="text-muted">2 hrs ago</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

### Commentable

JD

##### Bettie Mavis

New York, US

###### 23 likes

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

    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header py-4">
                    <div class="d-flex align-items-center">
                        <span class="avatar avatar-sm bg-purple">JD</span>
                        <div class="avatar-content">
                            <h5 class="h6 mb-0">Bettie Mavis</h5>
                            <small class="d-block text-muted">New York, US</small>
                        </div>
                    </div>
                </div>
                <div class="card-image">
                    <img src="holder.js/600x400?auto=yes" class="img-fluid">
                </div>
                <div class="card-body">
                    <div class="row mb-1">
                        <div class="col">
                            <div class="card-icon-actions card-icon-actions-lg">
                                <a href="#" class="love active"><i class="fas fa-heart"></i></a>
                                <a href="#"><i class="fas fa-comment"></i></a>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card-icon-actions card-icon-actions-lg text-right">
                                <a href="#"><i class="fas fa-bookmark"></i></a>
                            </div>
                        </div>
                    </div>
                    <h6 class="heading h6 mb-3">23 likes</h6>
                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                </div>
                <div class="card-footer">
                    <div class="row ">
                        <div class="col-10">
                            <form class="card-comment-box" role="form">
                                <textarea rows="1" class="form-control textarea-autosize" placeholder="Add a comment..."></textarea>
                            </form>
                        </div>
                        <div class="col-2 text-right">
                            <div class="card-icon-actions card-icon-actions-lg">
                                <a href="#" data-toggle="dropdown" aria-expanded="false">
                                    <i class="fas fa-ellipsis-h"></i>
                                </a>
                                <div class="dropdown-menu py-0 text-center">
                                    <a class="dropdown-item" href="#">Got to post</a>
                                    <a class="dropdown-item" href="#">Repost inappropriate</a>
                                    <a class="dropdown-item" href="#">Embed</a>
                                    <a class="dropdown-item" href="#">Cancel</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

### List groups

#### Simple list group

- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros

#### Add team members

JD
Johnyy Depp 10:05 PM

Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor

TC
Tom Cruise 11:30 PM

Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor

WS
Will Smith 15:45 PM

Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor

    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header py-4">
                    <h4 class="heading h5 font-weight-500 mb-0">Simple list group</h4>
                </div>
                <div class="list-group">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">Cras justo odio</li>
                        <li class="list-group-item">Dapibus ac facilisis in</li>
                        <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header py-4">
                    <div class="d-flex align-items-center">
                        <h4 class="heading h5 mb-0">Add team members</h4>
                    </div>
                </div>
                <div class="list-group">
                    <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                        <div class="list-group-img">
                            <span class="avatar bg-purple">JD</span>
                        </div>
                        <div class="list-group-content">
                            <div class="list-group-heading">Johnyy Depp <small>10:05 PM</small></div>
                            <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
                        </div>
                    </a>
                    <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                        <div class="list-group-img">
                            <span class="avatar bg-pink">TC</span>
                        </div>
                        <div class="list-group-content">
                            <div class="list-group-heading">Tom Cruise <small>11:30 PM</small></div>
                            <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
                        </div>
                    </a>
                    <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
                        <div class="list-group-img">
                            <span class="avatar bg-blue">WS</span>
                        </div>
                        <div class="list-group-content">
                            <div class="list-group-heading">Will Smith <small>15:45 PM</small></div>
                            <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipiscing eiusmod tempor</p>
                        </div>
                    </a>
                </div>
                <div class="card-footer">
                    <form class="card-comment-box" role="form">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <input class="form-control" placeholder="e.g @willsmith">
                            </div>
                            <div class="col-4 text-right">
                                <button type="button" class="btn btn-sm btn-success btn-icon-only rounded-circle">
                                    <span class="btn-inner--icon"><i class="fas fa-check"></i></span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

### Card with overlay

#### 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 text-white border-0 overflow-hidden">
        <img class="card-img" src="../assets/images/backgrounds/img-1.jpg" alt="Card image">
        <span class="mask bg-primary alpha-7"></span>
        <div class="card-img-overlay d-flex align-items-center">
            <div class="col-lg-8">
                <h4 class="heading h3 text-white">Card title</h4>
                <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">Last updated 3 mins ago</p>
            </div>
        </div>
    </div>

### Colored cards

# Theme as framework

We know how much you love Bootstrap components. That's why we've customized, and also, introduced dozens of completely new utilities, components, and plugins.

Learn more

# Even more components

We know how much you love Bootstrap components. That's why we've customized, and also, introduced dozens of completely new utilities, components, and plugins.

Learn more

    <div class="row">
        <div class="col-md-6">
            <div class="card bg-primary text-white px-4 py-4 border-0 mb-0">
                <div class="card-body">
                    <h1 class="heading h3 text-white">Theme as framework</h1>
                    <p class="mt-4">
                        We know how much you love Bootstrap components. That's why we've customized, and also, introduced dozens of completely new utilities, components, and plugins.
                    </p>
                    <a href="#" class="btn btn-secondary mt-4">Learn more</a>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card bg-secondary px-4 py-4 border-0 mb-0">
                <div class="card-body">
                    <h1 class="heading h3">Even more components</h1>
                    <p class="mt-4">
                        We know how much you love Bootstrap components. That's why we've customized, and also, introduced dozens of completely new utilities, components, and plugins.
                    </p>
                    <a href="#" class="btn btn-primary mt-4">Learn more</a>
                </div>
            </div>
        </div>
    </div>

### Pricing cards

#### Starter

# $19

per month

- Up to 5 users
- Basic support on Github
- Monthly updates
- Free cancelation

#### Small business

# $49

per month

- Up to 15 users
- Premium email support
- Weekly updates
- Free cancelation

    <div class="row">
        <div class="col-md-6">
            <div class="card card-pricing text-center px-3 mb-4">
                <div class="card-header py-4">
                    <h4 class="mb-4">Starter</h4>
                    <h1 class="display-4 text-primary text-center">$19</h1>
                    <span class="h6 text-muted">per month</span>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled mb-4">
                        <li>Up to 5 users</li>
                        <li>Basic support on Github</li>
                        <li>Monthly updates</li>
                        <li>Free cancelation</li>
                    </ul>
                    <button type="button" class="btn btn-primary mb-3">Start free trial</button>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card card-pricing popular text-center px-3 mb-4 z-depth-3">
                <div class="card-header py-4">
                    <h4 class="mb-4">Small business</h4>
                    <h1 class="display-4 text-primary text-center">$49</h1>
                    <span class="h6 text-muted">per month</span>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled mb-4">
                        <li>Up to 15 users</li>
                        <li>Premium email support</li>
                        <li>Weekly updates</li>
                        <li>Free cancelation</li>
                    </ul>
                    <button type="button" class="btn btn-primary mb-3">Start free trial</button>
                </div>
            </div>
        </div>
    </div>

### Icon cards

#### Latest Bootstrap framework (v4.0.0)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

#### Latest Bootstrap framework (v4.0.0)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

    <div class="row">
        <div class="col-md-6">
            <div class="card bg-primary">
                <div class="card-body py-5">
                    <div class="d-flex align-items-start">
                        <div class="icon icon-lg">
                            <i class="fab fa-twitter text-white"></i>
                        </div>
                        <div class="icon-text">
                            <h4 class="heading text-white">Latest Bootstrap framework <small>(v4.0.0)</small></h4>
                            <p class="text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card bg-dark">
                <div class="card-body py-5">
                    <div class="d-flex align-items-start">
                        <div class="icon icon-lg">
                            <i class="fab fa-twitter text-white"></i>
                        </div>
                        <div class="icon-text">
                            <h4 class="heading text-white">Latest Bootstrap framework <small>(v4.0.0)</small></h4>
                            <p class="text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>