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:

Introducing Codity advanced respnsive UI library

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.


<div class="cdt-jumbotron center" style="background: #eee;">
  <div class="cdt-6">
    <h1>Introducing Codity advanced respnsive UI library</h1>
    <p class="cdt-sub-header">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <button class="cdt-btn cdt-btn-primary cdt-btn-round cdt-btn-large" href="#">Call to action</button>
  </div>
</div>
      
    

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

Rounded

Introducing Codity advanced respnsive UI library

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

<div class="cdt-jumbotron center rounded" style="background: #eee;">
  <div class="cdt-6">
    <h1>Introducing Codity advanced respnsive UI library</h1>
    <p class="cdt-sub-header">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <button class="cdt-btn cdt-btn-primary cdt-btn-round cdt-btn-large" href="#">Call to action</button>
  </div>
</div>
    
  
Tilted

Tilted version has 2 variations, right and left

Tilted right

Introducing Codity advanced respnsive UI library

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

<div class="cdt-jumbotron center">
  <div class="cdt-bg-tilt-right" style="background-color: #eee"></div>
  <div class="cdt-6">
    <h1>Introducing Codity advanced respnsive UI library</h1>
    <p class="cdt-sub-header">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <button class="cdt-btn cdt-btn-primary cdt-btn-round cdt-btn-large" href="#">Call to action</button>
  </div>
</div>
    
  

Tilted left

Introducing Codity advanced respnsive UI library

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

<div class="cdt-jumbotron center">
  <div class="cdt-bg-tilt-left" style="background-color: #eee"></div>
  <div class="cdt-6">
    <h1>Introducing Codity advanced respnsive UI library</h1>
    <p class="cdt-sub-header">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <button class="cdt-btn cdt-btn-primary cdt-btn-round cdt-btn-large" href="#">Call to action</button>
  </div>
</div>