Cards Info
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper mauris, vitae imperdiet tortor. Cras aliquet gravida lacus eu auctor
Info Cards
Important Information!
With supporting text below as a natural lead-in to additional content.
Take This ActionInfo Cards With Header And Footer
Important Information!
With supporting text below as a natural lead-in to additional content.
Take This Action
<div class = "col-lg-12 my-3">
<div class = "card wdpk-card">
<div class = "card-body">
<h1 class = "card-title">Important Information!</h1>
<p class = "card-text">With supporting text below as a natural lead-in to additional
content.</p>
<a href = "#" class = "btn btn-primary btn-lg btn-outline-light">Take This Action</a>
</div>
</div>
</div>
<div class = "col-lg-12 my-3">
<div class = "card wdpk-card">
<div class = "card-header">
This offer is only for you
</div>
<div class = "card-body">
<h1 class = "card-title">Important Information!</h1>
<p class = "card-text">With supporting text below as a natural lead-in to additional
content.</p>
<a href = "#" class = "btn btn-primary btn-lg btn-outline-light">Take This Action</a>
</div>
<div class = "card-footer">
Last 2 hours left
</div>
</div>
</div>
$wdpk-white: #fff !default;
$wdpk-gray-100: #f8f9fa !default;
$wdpk-gray-200: #e9ecef !default;
$wdpk-primary-color: #0056c6 !default;
$wdpk-card-title-font-size: 1.8rem !default;
$wdpk-card-text-align: center !default;
$wdpk-card-title-font-color: $wdpk-white !default;
$wdpk-card-body-font-color: $wdpk-gray-200 !default;
$wdpk-card-header-font-color: $wdpk-white !default;
$wdpk-card-footer-font-color: $wdpk-white !default;
$wdpk-card-body-background: (
backgroundType: color,
gradientType: linear,
color1: $wdpk-primary-color,
color2: $wdpk-primary-color,
degree: 0deg,
backgroundImage: url(../../assets/images/background-black.jpg),
backgroundRepeat: repeat-x,
backgroundHorPos: center,
backgroundVerPos: center,
backgroundSize: initial
) !default;
$wdpk-card-header-background: (
backgroundType: color,
gradientType: linear,
color1: scale_color($wdpk-primary-color, $lightness:40%),
color2: $wdpk-primary-color,
degree: 0deg,
backgroundImage: url(../../assets/images/background-black.jpg),
backgroundRepeat: repeat-x,
backgroundHorPos: center,
backgroundVerPos: center,
backgroundSize: initial
) !default;
$wdpk-card-footer-background: (
backgroundType: color,
gradientType: linear,
color1: scale_color($wdpk-primary-color, $lightness:40%),
color2: $wdpk-primary-color,
degree: 0deg,
backgroundImage: url(../../assets/images/background-black.jpg),
backgroundRepeat: repeat-x,
backgroundHorPos: center,
backgroundVerPos: center,
backgroundSize: initial
) !default;
/* 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.