<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Filters</title>
<meta name="description" content="Filters can be used to enable the user to view a single set of data in a different lens">
<link rel="stylesheet" href="../tabs.css">
<!--
This <style> and <link> is only used for the example code, is no needed for the real case use
-->
<style>
html, body {
margin: 0;
padding: 0;
font-size: 10px;
background-color: #fff;
}
body {
background: none;
}
h2.bb-docs {
font-size: 1.8rem;
font-family: sans-serif;
font-weight: lighter;
color: #666;
margin: -1px 0 0;
background-color: #f5f5f5;
padding: 0.4rem 0.4rem 0.4rem 3rem;
border: solid 1px #e8e8e8;
}
body[role="application"] ul.bb-tablist[data-type="filter"] {
margin: 10px 0;
}
</style>
</head>
<body role="application">
<section role="region">
<h2 class="bb-docs">Default position - Default Filters</h2>
<ul role="tablist" class="bb-tablist" data-type="filter">
<li id="filter1-1" role="presentation"><a href="#filter1-1" role="tab">Action 01</a></li>
<li id="filter1-2" role="presentation"><a href="#filter1-2" role="tab">Action 02</a></li>
</ul>
<ul role="tablist" data-type="filter" class="skin-grey bb-tablist">
<li id="filter2-1" role="presentation"><a href="#filter2-1" role="tab">Action 01</a></li>
<li id="filter2-2" role="presentation"><a href="#filter2-2" role="tab">Action 02</a></li>
<li id="filter2-3" role="presentation"><a href="#filter2-3" role="tab">Action 02</a></li>
</ul>
<br />
<br />
<br />
<br />
<h2 class="bb-docs">Default position - Grey Filters</h2>
<ul role="tablist" data-type="filter" class="bottom bb-tablist">
<li id="filter-bottom1-1" role="presentation"><a href="#filter-bottom1-1" role="tab">Action 01</a></li>
<li id="filter-bottom1-2" role="presentation"><a href="#filter-bottom1-2" role="tab">Action 02</a></li>
</ul>
<ul role="tablist" data-type="filter" class="skin-grey bottom bb-tablist">
<li id="filter-bottom2-1" role="presentation"><a href="#filter-bottom2-1" role="tab">Action 01</a></li>
<li id="filter-bottom2-2" role="presentation"><a href="#filter-bottom2-2" role="tab">Action 02</a></li>
<li id="filter-bottom2-3" role="presentation"><a href="#filter-bottom2-3" role="tab">Action 02</a></li>
</ul>
</section>
</body>
</html>