Jumbotron Image Background
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper mauris, vitae imperdiet tortor. Cras aliquet gravida lacus eu auctor
Jumbotron With Background Image
The Bootstrap component with added super powers of WoodPecker®. A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.
<div class = "jumbotron wdpk-jumbotron">
<h1 class = "display-4">Hello, world!</h1>
<p class = "lead">This is a simple hero unit, a simple jumbotron-style component for calling
extra attention to featured content or information.</p>
<hr class = "my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger
container.</p>
<p class = "lead">
<a class = "btn btn-primary btn-lg" href = "#" role = "button">Learn more</a>
</p>
</div>
$wdpk-gradient-1: #0056c6 !default;
$wdpk-gradient-2: #0bc9cd !default;
$wdpk-gray-300: #dee2e6 !default;
$wdpk-gray-400: #ced4da !default;
$wdpk-jumbotron-bg-map: (
backgroundType: image,
gradientType: linear,
color1: $wdpk-gradient-1,
color2: $wdpk-gradient-2,
degree: 0deg,
backgroundImage: url(../../../../assets/images/background.jpeg),
backgroundRepeat: none,
backgroundHorPos: center,
backgroundVerPos: center,
backgroundSize: cover
) !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.