Cards In Columns
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
Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns.
Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are
ordered from top to bottom and left to right. To assign the number of columns you can use $wdpk-card-columns-count
variable in Sass
The same code below can be seen to understand how Bootstap Classes as well as the WoodPecker® variables can be combined together to create unlimited possibilities with Cards.
Card title that wraps to a new line
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
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-columns">
<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 that wraps to a new line</h5>
<p class = "card-text">This is a longer card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.</p>
</div>
</div>
<div class = "card wdpk-card p-3">
<blockquote class = "blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante.</p>
<footer class = "blockquote-footer">
<small class = "text-muted">
Someone famous in <cite title = "Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</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 bg-primary text-white text-center p-3">
<blockquote class = "blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class = "blockquote-footer">
<small class = "text-white">
Someone famous in <cite title = "Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class = "card wdpk-card text-center">
<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">
<img src="/assets/images/card-image.jpg" class="card-img-top" alt = "Card image cap"/>
</div>
<div class = "card wdpk-card p-3 text-right">
<blockquote class = "blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante.</p>
<footer class = "blockquote-footer">
<small class = "text-muted">
Someone famous in <cite title = "Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class = "card wdpk-card">
<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 */
