Cards Groups
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper mauris, vitae imperdiet tortor. Cras aliquet gravida lacus eu auctor
You can Create Card Groups Using Bootstrap Classes
Use card groups to render cards as a single, attached element with equal width and height
columns. The wdpk-card clas ensure that the card inherits the properties defined by
you in WoodPecker 'Sass' variables
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
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
<div class = "card-group">
<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">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">
<small class = "text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
<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">This card has supporting text below as a natural lead-in to
additional content.</p>
<p class = "card-text">
<small class = "text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
<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">This is a wider card with supporting text below as a natural
lead-in to additional content. This card has even longer content
than the first to show that equal height action.</p>
<p class = "card-text">
<small class = "text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
</div>
/* No Changes Made To Default Variables */
/* No Changes Made To Default Javascript */
Card Groups With Footer
When using card groups with footers, their content will automatically line up.
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.
Card title
This card has supporting text below as a natural lead-in to additional content.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
<div class = "card-group">
<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">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>
</div>
<div class = "card-footer">
<small>Last updated 3 mins ago</small>
</div>
</div>
<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">This card has supporting text below as a natural lead-in to
additional content.</p>
</div>
<div class = "card-footer">
<small>Last updated 3 mins ago</small>
</div>
</div>
<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">This is a wider card with supporting text below as a natural
lead-in to additional content. This card has even longer content
than the first to show that equal height action.</p>
</div>
<div class = "card-footer">
<small>Last updated 3 mins ago</small>
</div>
</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.