siimple 3.2.0 siimple.xyz
Layout
A collection of CSS classes for laying your project.
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.