Search
Find
Layout overview
Introduction to layout components of siimple
Box
A simple layout component to highlight something
Content
A responsive component to center content horizontally
Footer
A basic component for displaying content in the bottom of your page
Jumbotron
A lightweight component for showcasing content
Navbar
A horizontally navigation component
Jumbotron
A lightweight component for showcasing content
The jumbotron is a pretty simple element. It contains up to three elements: a title, a subtitle and a detail (just like the box). To create a jumbotron just add the class
siimple-jumbotron to a div. As in the box example, you can add the title using the class siimple-jumbotron-title, the subtitle with siimple-jumbotron-subtitle and the detail with siimple-jumbotron-detail:
Welcome page
This is the subtitle
And this is the detail of the jumbotron element
<div class="siimple-jumbotron">
<div class="siimple-jumbotron-title">Welcome page</div>
<div class="siimple-jumbotron-subtitle">This is the subtitle</div>
<div class="siimple-jumbotron-detail">And this is the detail of the jumbotron element</div>
</div>
Sizing
You can set the jumbotron size adding the
siimple-jumbotron--[SIZE] class.
Welcome page
This is the subtitle
<div class="siimple-jumbotron siimple-jumbotron--fluid">
<div class="siimple-jumbotron-title">Welcome page</div>
<div class="siimple-jumbotron-subtitle">This is the subtitle</div>
</div>
Coloring
Customize your jumbotron by adding the class
siimple-jumbotron--[COLOR]. Check available colors in the theming section.
Welcome page
This is the subtitle
And this is the detail of the jumbotron element
<div class="siimple-jumbotron siimple-jumbotron--primary siimple-jumbotron--fluid">
<div class="siimple-jumbotron-title">Welcome page</div>
<div class="siimple-jumbotron-subtitle">This is the subtitle</div>
<div class="siimple-jumbotron-detail">And this is the detail of the jumbotron element</div>
</div>
The legacy colors API for the jumbotron component are sill supported but will be removed in a future major release of siimple. Upgrade to the new colors api introduced in
v3.1.0.
Welcome page
This is the subtitle
<div class="siimple-jumbotron siimple-jumbotron--purple siimple-jumbotron--fluid">
<div class="siimple-jumbotron-title">Welcome page</div>
<div class="siimple-jumbotron-subtitle">This is the subtitle</div>
</div>
Found a mistake or want to help improve this documentation?
Suggest changes.