Cards
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper mauris, vitae imperdiet tortor. Cras aliquet gravida lacus eu auctor
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.
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
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">
<img src="/assets/images/card-image.jpg" class="card-img-top" alt = "Card image cap"/>
<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">
<img src="/assets/images/card-image.jpg" class="card-img-top" alt = "Card image cap"/>
<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>
/* No Changes Made To Default Variables */
/* No Changes Made To Default Javascript */
Default Cards With Header And Footer
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
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>
<img src="/assets/images/card-image.jpg" class="card-img-top" alt = "Card image cap"/>
<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>
<img src="/assets/images/card-image.jpg" class="card-img-top" alt = "Card image cap"/>
<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>
/* No Changes Made To Default Variables */
/* No Changes Made To Default Javascript */
