Default Cards
A card is a flexible and extensible content container in Boootstrap 4. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
What Does WoodPecker Add To Cards?
By using a single `.wdpk-card` to the the Default Bootstrap code you get granular
control over customization of each element of the card and all in the form of `SASS`
variables. For each project of your own you can customize the variables as per your needs to
generate a unique look and feel for the cards.
The Caption
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
A Call To Action
The Caption
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
A Call To Action
<div class = "col-lg-6 my-3">
<div class = "card wdpk-card">
<figure class = "imghvr-shutter-in-out-diag-1">
<img src="/assets/images/card-image.jpg" class="card-img-top" alt = "Card image cap"/>
<figcaption>
<div class = "text-center d-flex h-100">
<div class = "align-self-center">
<h5 >The Caption</h5>
<p class="text-sm-center mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<button class="btn btn-outline-light btn-sm">Read More</button>
</div>
</div>
</figcaption>
</figure>
<div class = "card-body">
<h5 class = "card-title">Card title</h5>
<p class = "card-text">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 wdpk-button">A Call To Action</a>
</div>
</div>
</div>
<div class = "col-lg-6 my-3">
<div class = "card wdpk-card">
<figure class = "imghvr-shutter-in-out-diag-1">
<img src="/assets/images/card-image.jpg" class="card-img-top" alt = "Card image cap"/>
<figcaption>
<div class = "text-center d-flex h-100">
<div class = "align-self-center">
<h5 >The Caption</h5>
<p class="text-sm-center mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<button class="btn btn-outline-light btn-sm">Read More</button>
</div>
</div>
</figcaption>
</figure>
<div class = "card-body">
<h5 class = "card-title">Card title</h5>
<p class = "card-text">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 wdpk-button">A Call To Action</a>
</div>
</div>
</div>
// =============================>
// Dark Theme Override
// If you you need to use the dark theme just uncomment the below line
// <============================
@import "../../../../sass/variables/variables-wdpk-dark";
/* No Changes Made To Default Javascript */
Default Cards With Header And Footer
The Caption
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
A Call To Action
The Caption
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
A Call To Action
<div class = "col-lg-6 my-3">
<div class = "card wdpk-card">
<div class = "card-header">
Card Header
</div>
<figure class = "imghvr-shutter-in-out-diag-1">
<img src="/assets/images/card-image.jpg" class="card-img-top" alt = "Card image cap"/>
<figcaption>
<div class = "text-center d-flex h-100">
<div class = "align-self-center">
<h5 >The Caption</h5>
<p class="text-sm-center mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<button class="btn btn-outline-light btn-sm">Read More</button>
</div>
</div>
</figcaption>
</figure>
<div class = "card-body">
<h5 class = "card-title">Card title</h5>
<p class = "card-text">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 wdpk-button">A Call To Action</a>
</div>
<div class = "card-footer">
Posted 2 Days Ago - Footer
</div>
</div>
</div>
<div class = "col-lg-6 my-3">
<div class = "card wdpk-card">
<div class = "card-header">
Card Header
</div>
<figure class = "imghvr-shutter-in-out-diag-1">
<img src="/assets/images/card-image.jpg" class="card-img-top" alt = "Card image cap"/>
<figcaption>
<div class = "text-center d-flex h-100">
<div class = "align-self-center">
<h5 >The Caption</h5>
<p class="text-sm-center mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<button class="btn btn-outline-light btn-sm">Read More</button>
</div>
</div>
</figcaption>
</figure>
<div class = "card-body">
<h5 class = "card-title">Card title</h5>
<p class = "card-text">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 wdpk-button">A Call To Action</a>
</div>
<div class = "card-footer">
Posted 2 Days Ago - Footer
</div>
</div>
</div>
// =============================>
// Dark Theme Override
// If you you need to use the dark theme just uncomment the below line
// <============================
@import "../../../../sass/variables/variables-wdpk-dark";
/* No Changes Made To Default Javascript */