Jumbotron
Jumbtron is a Content Hero Unit that can be use for Call to Action Component or a Slides for Full Width and Full Screen Slider etc..
Sass Customize
in order to edit the Hero Units you can use the css class's to overide the theme or you can edit it with sass Tornado Folder/SCSS/elements/_jumbtron.scss and do not forget to compile the main files of the framework Tornado Folder/SCSS/tornado.scss and tornado-rtl.scss.
in order to use the Jumbtron Unit First Create a div element with class name jumbtron and if you wanna make fixed width along with the containers just add to it class name container then inside the jumbtron section Create Another div With Class name jumbtron-content it's support the container class too , after that you can place you conent elements as you want ••• see the Example below.
Jumbotron / Hero Unit Title
In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
pharetra vitae, orci. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor.
Learn More Details
<!-- Jumbtron -->
<div class="jumbtron">
<div class="jumbtron-content container">
<!-- Content Divide -->
<div class="row align-center-y">
<!-- Image/icons Content -->
<div class="col-12 col-m-4 col-l-2">
<img src="img/icon.png" alt="icon image">
</div>
<!-- Text Content -->
<div class="col-12 col-m-8 col-l-10">
<h2 class="tx-uppercase">Jumbotron / Hero Unit Title</h2>
<p>In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. </p>
</div>
<!-- Action Content -->
<div class="action-area">
<p>pharetra vitae, orci. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor.</p>
<a href="#" class="btn primary tx-capitalize">Learn More Details</a>
</div>
</div>
<!-- // Content Divide -->
</div>
</div>
<!-- // Jumbtron -->
Jumbtron Unit #2
Jumbotron / Hero Unit Title
In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Learn More Contact US
<!-- Jumbtron-->
<div class="jumbtron">
<div class="jumbtron-content container tx-align-center">
<!-- Content -->
<h2 class="tx-uppercase">Jumbotron / Hero Unit Title</h2>
<p>In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. </p>
<a href="#" class="btn primary tx-uppercase">Learn More</a>
<a href="#" class="btn warning tx-uppercase">Contact US</a>
<!-- // Content -->
</div>
</div>
<!-- // Jumbtron-->
Jumbtron Unit Colored
Jumbotron / Hero Unit Title
In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
pharetra vitae, orci. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor.
Learn More Details
<!-- Jumbtron -->
<div class="jumbtron primary">
<div class="jumbtron-content container">
<!-- Content Divide -->
<div class="row align-center-y">
<!-- Image/icons Content -->
<div class="col-12 col-m-4 col-l-2">
<img src="img/icon.png" alt="icon image">
</div>
<!-- Text Content -->
<div class="col-12 col-m-8 col-l-10">
<h2 class="tx-uppercase">Jumbotron / Hero Unit Title</h2>
<p>In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. </p>
</div>
<!-- Action Content -->
<div class="action-area">
<p>pharetra vitae, orci. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor.</p>
<a href="#" class="btn light tx-capitalize">Learn More Details</a>
</div>
</div>
<!-- // Content Divide -->
</div>
</div>
<!-- // Jumbtron -->
Jumbtron Unit Colored #2
Jumbotron / Hero Unit Title
In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Learn More Contact US
<!-- Jumbtron -->
<div class="jumbtron success">
<div class="jumbtron-content container tx-align-center">
<!-- Content -->
<h2 class="tx-uppercase">Jumbotron / Hero Unit Title</h2>
<p>In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. </p>
<a href="#" class="btn light tx-uppercase">Learn More</a>
<a href="#" class="btn dark tx-uppercase">Contact US</a>
<!-- // Content -->
</div>
</div>
<!-- // Jumbtron-->
Utilities
Jumbtron Unit Class Name's Utilities for Layout and Coloring.
| Class Name | element | description |
|---|---|---|
| jumbtron | jumbtron wrapper | The Main Wrapper of The Unit |
| jumbtron-content | Content wrapper | The Jumbtron Content Wrapper |
| action-area | Interaction Elements Wrapper | for Creating Interaction Elements Aligned Like a Paragraph and Button. |
| Coloring Class's | ||
| primary | jumbtron wrapper | Coloring The Unit With The Primary Color Theme. |
| secondary | jumbtron wrapper | Coloring The Unit With The Secondary Color Theme. |
| dark | jumbtron wrapper | Coloring The Unit With The Dark Color Theme. |
| success | jumbtron wrapper | Coloring The Unit With The Success Green Color. |
| danger | jumbtron wrapper | Coloring The Unit With The Danger Red Color. |
| info | jumbtron wrapper | Coloring The Unit With The info skyblue Color. |
| warning | jumbtron wrapper | Coloring The Unit With The Warning Yellow Color. |