HTML5 template
Docs - Titlebars and Breadcrumbs
You can place your h1 tag just as the first tag in your content, as well as create special section for this - titlebar. Our titlebars could have breadcrumber, and it's position could be contolled by modifyers classes. Titlebar it's section, so you can change it's color scheme as usual. This block can have custom background or parallax background, and additional pattern background as well.
Connect sections.css to use titlebars or breadcrumbs.
Section block appearance could be changed using next modifyers:
- .pi-titlebar - makes titlebar
- .pi-titlebar-small - makes small titlebar
- .pi-titlebar-breadcrumb-right - add this if you want to use breadcrumb right
- .pi-titlebar-breadcrumb-top - add this if you want to use breadcrumb top
- .pi-breadcrumb-only - add this if you want to use breadcrumb without a title
<div class="pi-section-w pi-section-white"> <div class="pi-section pi-titlebar"> <h1>Titlebar</h1> </div> </div>
<div class="pi-section-w pi-section-white"> <div class="pi-section pi-titlebar pi-titlebar-small"> <h1>Titlebar Small</h1> </div> </div>
<div class="pi-section-w pi-section-grey"> <div class="pi-section pi-titlebar pi-titlebar-breadcrumb-right"> <h1>Titlebar with right breadcrumb</h1> <div class="pi-breadcrumb">You are here: <ul> <li><a href="#"><i class="icon-home"></i></a></li> <li><a href="#">Company</a></li> <li>About</li> </ul> </div> </div> </div>
<div class="pi-section-w pi-section-grey"> <div class="pi-section pi-titlebar pi-titlebar-breadcrumb-top"> <div class="pi-breadcrumb">You are here: <ul> <li><a href="#"><i class="icon-home"></i></a></li> <li><a href="#">Company</a></li> <li>About</li> </ul> </div> <h1>Titlebar with top breadcrumb</h1> </div> </div>
<div class="pi-section-w pi-section-grey"> <div class="pi-section pi-section-md pi-titlebar pi-breadcrumb-only"> <div class="pi-breadcrumb">You are here: <ul> <li><a href="#"><i class="icon-home"></i></a></a></li> <li><a href="#">Company</a></a></li> <li>About</li> </ul> </div> </div> </div>
