Jumbotron

When you want to highlight a big section of the page to draw attention, you might want to use hero element.

Default

Default Jumbotron is as follow:

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Vitae tempus quam pellentesque nec nam aliquam sem. Volutpat diam ut venenatis tellus in metus vulputate eu. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus.


<div class="cdt-jumbotron center" style="background: #eee">
    <div class="content center">
        <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
        <p class="cdt-sub-header">Vitae tempus quam pellentesque nec nam aliquam sem. Volutpat diam ut venenatis tellus in metus vulputate eu. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus.</p>
        <button class="cdt-btn cdt-btn-primary cdt-btn-round cdt-btn-large cdt-btn-rounded" href="#">Call to action</button>
    </div>
</div>

Kodhus library supports 2 variations of Jumbotron when it comes to shape:

Rounded

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Vitae tempus quam pellentesque nec nam aliquam sem. Volutpat diam ut venenatis tellus in metus vulputate eu. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus.

<div class="cdt-jumbotron center rounded" style="background: #eee">
  <div class="content center">
      <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
      <p class="cdt-sub-header">Vitae tempus quam pellentesque nec nam aliquam sem. Volutpat diam ut venenatis tellus in metus vulputate eu. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus.</p>
      <button class="cdt-btn cdt-btn-primary cdt-btn-round cdt-btn-large cdt-btn-rounded" href="#">Call to action</button>
  </div>
</div>

Tilted

Tilted version has 2 variations, right and left

Tilted right

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Vitae tempus quam pellentesque nec nam aliquam sem. Volutpat diam ut venenatis tellus in metus vulputate eu. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus.

<div class="cdt-jumbotron center">
  <div class="cdt-bg-tilt-right" style="background-color: #eee"></div>
  <div class="content center">
      <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
      <p class="cdt-sub-header">Vitae tempus quam pellentesque nec nam aliquam sem. Volutpat diam ut venenatis tellus in metus vulputate eu. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus.</p>
      <button class="cdt-btn cdt-btn-primary cdt-btn-round cdt-btn-large cdt-btn-rounded" href="#">Call to action</button>
  </div>
</div>


Tilted left

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Vitae tempus quam pellentesque nec nam aliquam sem. Volutpat diam ut venenatis tellus in metus vulputate eu. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus.

<div class="cdt-jumbotron center">
  <div class="cdt-bg-tilt-left" style="background-color: #eee"></div>
  <div class="content center">
      <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
      <p class="cdt-sub-header">Vitae tempus quam pellentesque nec nam aliquam sem. Volutpat diam ut venenatis tellus in metus vulputate eu. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus.</p>
      <button class="cdt-btn cdt-btn-primary cdt-btn-round cdt-btn-large cdt-btn-rounded" href="#">Call to action</button>
  </div>
</div>