Cards

xPider's cards provide a flexible and extensible content container with multiple variants and options.

Open Bootstrap Docs

Example

Card image cap
Card title

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

Go somewhere

                                    <div class="card">
                                    <img class="card-img-top" src="img/blog-post-1.jpg" alt="Card image cap">
                                    <div class="card-body">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text pb-30">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                        <a href="#" class="btn btn-primary">Go somewhere</a>
                                    </div>
                                </div>
                                

Pricing Table

$19

Billed Monthly

No one cares about products. People care about ideas. Is a product an idea? Noup. Is a brand? A good one is.

Try 14 days free trial

$19

Billed Monthly

No one cares about products. People care about ideas. Is a product an idea? Noup. Is a brand? A good one is.

Try 14 days free trial

                                        <div class="card text-center">
                                        <div class="header pt-30 pb-30 border-bottom-light">
                                            <h2 class="h1-font color-primary">$19</h2>
                                            <h6>Billed Monthly</h6>
                                        </div>
                                        <div class="card-body pb-40 pt-30 pr-30 pl-30">
                                            <p class="pb-40">No one cares about products. People care about ideas. Is a product an idea? Noup. Is a brand? A good one is.</p>
                                            <a href="#" class="btn btn--outline btn-3d-hover btn-splash-hover">
                                                <span class="btn__text">Try 14 days free trial</span>
                                            </a>
                                        </div>
                                    </div>
                                

Card Focused


                                        <div class="card card--focused text-center">
                                        <div class="header pt-30 pb-30 border-bottom-light">
                                            <h2 class="h1-font color-primary">$19</h2>
                                            <h6>Billed Monthly</h6>
                                        </div>
                                        <div class="card-body pb-40 pt-30 pr-30 pl-30">
                                            <p class="pb-40">No one cares about products. People care about ideas. Is a product an idea? Noup. Is a brand? A good one is.</p>
                                            <a href="#" class="btn btn--outline btn-3d-hover btn-splash-hover">
                                                <span class="btn__text">Try 14 days free trial</span>
                                            </a>
                                        </div>
                                    </div>
                                

Testimonial

Life before Company was very chaotic — we got a lot of phone calls, a lot of mistyped orders. So with Company, the ability to see the order directly from the customer makes it so streamlined.


                                        <div class="card">
                                        <blockquote class="card-body blockquote pb-30">
                                            <p class="color-light-secondary-2">Some quick example text....</p>
                                        </blockquote>
                                        <div class="card-footer d-flex align-items-center">
                                            <span class="avatar mr-10"><img src="img/testimonial-1.png" alt="testimonial"></span>
                                            <span class="body-font-size font-w-600">Martin Jones, Creative Cons</span>
                                        </div>
                                    </div>