Example
<div class="top-bar">
<div style="background-image: url('/img/header/dual-brand-multi.png');" class="header-top-strip"></div>
<div class="container">
<ul>
<li>
<a href="#">
<span class="icon icon-user"></span>
<span class="link-text">Homeowner</span>
</a>
</li>
<li>
<a href="#">
<span class="icon icon-wrench"></span>
<span class="link-text">Professional</span>
</a>
</li>
<li>
<a href="#">
<span class="icon icon-cog"></span>
<span class="link-text">WAI</span>
</a>
</li>
</ul>
<ul class="pull-right">
<li>
<div class="user-badge gold">
<span class="name">A/C 12345673</span>
<span class="member-level">User Level</span>
</div>
</li>
<li>
<a href="http://wb.dev/login">
<span class="icon icon-power-off"></span>
<span class="link-text">Log in</span>
</a>
</li>
</div>
</div>
Example
<div class="top-bar">
<div style="background-image: url('/img/header/dual-brand-multi.png');" class="header-top-strip"></div>
<div class="container">
<ul>
<li>
<a class="logo logo-alt" href='#'>
<span class="text-hide">Worcester Bosch Logo</span>
</a>
</li>
<li>
<a href="#">
<span class="icon icon-home"></span>
<span class="link-text">Website</span>
</a>
</li>
<li>
<a href="#">
<span class="icon icon-wrench"></span>
<span class="link-text">Professional</span>
</a>
</li>
</ul>
</div>
</div>
Example
<nav class="menu-collapsed-open" role="navigation">
<div class="menu-body">
<div class="menu-header">
<button type="button" class="btn btn-default js-menu-toggle menu-toggle">
<span class="sr-only">Toggle menu</span>
<i class="icon icon-bars"></i> Menu
</button>
<a class="menu-brand" href="/">
<div class="text-hide logo">Worcester Bosch Logo</div>
</a>
</div>
<div class="js-raised-search menu-raised-search menu-raised-search-hide">
<a class="js-raised-search-close btn btn-link pull-left">
<span class="text-muted">
<span class="icon icon-close"></span>
Close
</span>
</a>
<form>
<div class="input-group">
<input
type="text"
id="search"
name="search"
class="form-control"
placeholder="Search for products, documents and information"
>
<div class="input-group-btn">
<button class="btn btn-default">
<span class="icon icon-search"></span>
Search
</button>
</div>
</div>
</form>
</div>
<ul class="js-menu menu">
<li class="menu-search">
<div class="input-group">
<span class="input-group-addon">
<span class="icon icon-search"></span>
</span>
<label class="sr-only" for="search">Search</label>
<input type="text" id="search" name="search" class="form-control" placeholder="Search for products, documents and information">
</div>
</li>
<li>
<a href="http://wb.dev">Home</a>
</li>
<li class="active menu-open">
<a href="http://wb.dev/products" class="js-menu-dropdown">
Products
<div class="menu-visible-collapsed pull-right">
<b class="caret"></b>
</div>
</a>
<ul class="menu-sub">
<li>
<a href="http://wb.dev/products/boilers">Boilers</a>
</li>
<li class="active">
<a href="http://wb.dev/products/cylinders">Cylinders</a>
</li>
</ul>
</li>
<li>
<a class="js-raised-search-open" href="#"><span class="icon icon-search"></span> Search</a>
</li>
</ul>
</div>
</nav>
<div class="menu menu-sub-below" data-menu-parent="http://wb.dev/products">
<div class="menu-body">
<ul>
<li>
<a href="http://wb.dev/products/boilers">Boilers</a>
</li>
<li class="active">
<a href="http://wb.dev/products/cylinders">Cylinders</a>
</li>
</ul>
</div>
</div>
Example
<nav class="menu-collapsed-open" role="navigation">
<div class="menu-body">
<div class="menu-header">
<button type="button" class="btn btn-default js-menu-toggle menu-toggle">
<span class="sr-only">Toggle menu</span>
<i class="icon icon-bars"></i> Menu
</button>
<a class="menu-brand" href="/">
<div class="text-hide logo">Worcester Bosch Logo</div>
</a>
</div>
<div class="js-raised-search menu-raised-search menu-raised-search-hide">
<a class="js-raised-search-close btn btn-link pull-left">
<span class="text-muted">
<span class="icon icon-close"></span>
Close
</span>
</a>
<form>
<div class="input-group">
<input
type="text"
id="search"
name="search"
class="form-control"
placeholder="Search for products, documents and information"
>
<div class="input-group-btn">
<button class="btn btn-default">
<span class="icon icon-search"></span>
Search
</button>
</div>
</div>
</form>
</div>
<ul class="js-menu menu">
<li class="menu-search">
<div class="input-group">
<span class="input-group-addon">
<span class="icon icon-search"></span>
</span>
<label class="sr-only" for="search">Search</label>
<input type="text" id="search" name="search" class="form-control" placeholder="Search for products, documents and information">
</div>
</li>
<li>
<a href="http://wb.dev">Home</a>
</li>
<li class="active menu-open">
<a href="http://wb.dev/products" class="js-menu-dropdown">
Products
<div class="menu-visible-collapsed pull-right">
<b class="caret"></b>
</div>
</a>
<ul class="menu-sub">
<li>
<a href="http://wb.dev/products/boilers">Boilers</a>
</li>
<li class="active">
<a href="http://wb.dev/products/cylinders">Cylinders</a>
</li>
</ul>
</li>
<li>
<a class="js-raised-search-open" href="#"><span class="icon icon-search"></span> Search</a>
</li>
</ul>
</div>
</nav>
<div class="menu menu-sub-below" data-menu-parent="http://wb.dev/products">
<div class="menu-body">
<ul>
<li>
<a href="http://wb.dev/products/boilers">Boilers</a>
</li>
<li class="active">
<a href="http://wb.dev/products/cylinders">Cylinders</a>
</li>
</ul>
</div>
</div>
Example
<nav class="menu-erp menu-collapsed-open" role="menu">
<div class="menu-body">
<div class="menu-header">
<button type="button" class="btn btn-default js-menu-toggle menu-toggle">
<span class="sr-only">Toggle menu</span>
<i class="icon icon-bars"></i> Menu
</button>
<a class="menu-brand" href="/">
<h1>ErP Label Generator</h1>
<p>by Worcester Bosch Group</p>
</a>
</div>
<ul class="js-menu menu">
<li class="menu-search">
<div class="input-group">
<span class="input-group-addon">
<span class="icon icon-search"></span>
</span>
<label class="sr-only" for="search">Search</label>
<input type="text" id="search" name="search" class="form-control" placeholder="Search for products, documents and information">
</div>
</li>
<li>
<a href="http://wb.dev">Home</a>
</li>
<li class="active menu-open">
<a href="http://wb.dev/products" class="js-menu-dropdown">
Products
<div class="menu-visible-collapsed pull-right">
<b class="caret"></b>
</div>
</a>
<ul class="menu-sub">
<li>
<a href="http://wb.dev/products/boilers">Boilers</a>
</li>
<li class="active">
<a href="http://wb.dev/products/cylinders">Cylinders</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
Example
<nav class="menu-erp menu-collapsed-open" role="menu">
<div class="menu-body">
<div class="menu-header">
<button type="button" class="btn btn-default js-menu-toggle menu-toggle">
<span class="sr-only">Toggle menu</span>
<i class="icon icon-bars"></i> Menu
</button>
<a class="menu-brand" href="/">
<h1>ErP Label Generator</h1>
<p>by Worcester Bosch Group</p>
</a>
</div>
<ul class="js-menu menu">
<li class="menu-search">
<div class="input-group">
<span class="input-group-addon">
<span class="icon icon-search"></span>
</span>
<label class="sr-only" for="search">Search</label>
<input type="text" id="search" name="search" class="form-control" placeholder="Search for products, documents and information">
</div>
</li>
<li>
<a href="http://wb.dev">Home</a>
</li>
<li class="active menu-open">
<a href="http://wb.dev/products" class="js-menu-dropdown">
Products
<div class="menu-visible-collapsed pull-right">
<b class="caret"></b>
</div>
</a>
<ul class="menu-sub">
<li>
<a href="http://wb.dev/products/boilers">Boilers</a>
</li>
<li class="active">
<a href="http://wb.dev/products/cylinders">Cylinders</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
Example
<nav class="breadcrumbs-bar">
<div class="container">
<ol class="breadcrumb">
<li><a href="/">Home</a></li>
<li>Products</li>
<li>Boilers</li>
<li class="active">lower-case product name</li>
</ol>
</div>
</nav>
<div class="hero hero-img">
<img src="http://www.worcester-bosch.co.uk/img/hero/consumer/home.jpg">
<a href="#" class="hero-bubble">
<div class="bubble bubble-sm bubble-semi bubble-secondary">
<div class="bubble-outer">
<div class="bubble-inner">
<div class="bubble-text">
<h2 class="bubble-title">Need some Help?</h2>
<p class="bubble-subtitle">Speak to our dedicated support team now</p>
</div>
</div>
</div>
</div>
</a>
</div>
Example
<div class="hero">
</div><div class="hero">
<div class="hero-body">
<iframe class="hero-iframe" src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d9749.407456435938!2d-2.2174852499999997!3d52.34590325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2suk!4v1422544945160"></iframe>
<a href="#" class="hero-bubble">
<div class="bubble bubble-sm bubble-semi">
<div class="bubble-outer">
<div class="bubble-inner">
<div class="bubble-text">
<h2 class="bubble-title">Need some Help?</h2>
<p class="bubble-subtitle">Speak to our dedicated support team now</p>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
Example
<div class="subnav">
<div class="subnav-body">
<h1 class="subnav-title">Worcester Bosch Style</h1>
<ul class="breadcrumb">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">lower case thing</a>
</li>
<li>
<a href="#">Type</a>
</li>
<li>
<a href="#">Tables</a>
</li>
<li class="active">
Forms
</li>
</ul>
</div>
</div>
Example
<div class="subnav">
<div class="subnav-body">
<h1 class="subnav-title">Worcester Bosch Style</h1>
<ul class="breadcrumb">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">lower case thing</a>
</li>
<li>
<a href="#">Type</a>
</li>
<li>
<a href="#">Tables</a>
</li>
<li class="active">
Forms
</li>
</ul>
</div>
</div>
Example
<div style="background: #eee; padding: 20px; padding-bottom: 100px;">
<nav class="navbar navbar-filter">
<div class="container">
<div class="navbar-form navbar-left">
<div class="form-group">
<label for="boilerType">
<strong class="icon icon-boiler"></strong>
Boiler Type:
</label>
<select data-filter-source="boilerType" class="form-control form-control-silent" name="boilerType" id="boilerType">
<option value="combi">Combi</option>
<option value="metal">Metal</option>
<option value="gear">Gear</option>
<option value="solid">Solid</option>
<option value="fires">Fires</option>
<option value="nukes">Nukes</option>
<option value="no">No</option>
<option value="way">Way</option>
</select>
</div>
</div>
<ul class="nav navbar-nav">
<li class="dropdown hide">
<a
href="#"
class="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-expanded="false"
data-filter-toggle="boilerType"
>
<label>
<strong class="icon icon-boiler"></strong>
Boiler Type:
</label>
<span data-filter-selected="boilerType"></span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-form"><input class="form-control" type="text" data-filter-input="boilerType"></li>
<li class="divider"></li>
<div data-filter-row="boilerType" class="hide">
<li>
<a data-filter-target="boilerType" href=""></a>
</li>
</div>
</ul>
</li>
</ul>
</div>
</nav>
</div>