Cards Images
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper mauris, vitae imperdiet tortor. Cras aliquet gravida lacus eu auctor
Image Cards
<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>
</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>
</div>
/* No Changes Made To Default Variables */
/* No Changes Made To Default Javascript */
Image Cards With Hover Effects
All the Image Hover Effects can be used along with the cards.
The Caption
Lorem ipsum dolor sit amet, consectetur adipiscing elit
The Caption
Lorem ipsum dolor sit amet, consectetur adipiscing elit
<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-secondary btn-sm">Read More</button>
</div>
</div>
</figcaption>
</figure>
</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-secondary btn-sm">Read More</button>
</div>
</div>
</figcaption>
</figure>
</div>
</div>
/* No Changes Made To Default Variables */
/* No Changes Made To Default Javascript */
WoodPecker® is a modular design system crafted to make creating layouts easy for the developers. Now instead of fucussing on the low level detail of developing these modules, you can simple use the existing modules to create fantasstic layouts.