gentux-style-guide
Version:
<http://gentuxdesign.com>
2,029 lines • 137 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow">
<title>Modules</title>
<meta name="description" content="">
<link rel="stylesheet" href="/css/all.css">
<!-- <link rel="stylesheet" href="/css/all-menguin.css"> -->
</head>
<nav class="navbar navbar-default navbar-main navbar-with-columns">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-inverted" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="visible-xs navbar-brand" href="/">
<img class="navbar-brand-logo-gt" src="/images/styleguide-required/gt-logo.svg" alt="Generation Tux Logo">
</a>
</div>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-inverted">
<div class="row">
<div class="col-sm-3 col-lg-2">
<a class="hidden-xs navbar-brand navbar-brand-gt" href="/">
<img class="navbar-brand-logo-gt" src="/images/styleguide-required/gt-logo.svg" alt="Generation Tux Logo">
<img class="navbar-brand-logo-full" src="/images/styleguide-required/generationtux-logo.svg" alt="Generation Tux Logo">
</a>
</div><!-- /col -->
<div class="col-sm-9 col-md-7 col-lg-8">
<ul class="nav navbar-nav">
<li class="h5 ">
<a href="/brand-guidelines/">Guide</a>
</li>
<li class="h5 ">
<a href="/brand-assets/">Assets</a>
</li>
<li class="dropdown">
<a
class="dropdown-toggle h5"
data-toggle="dropdown"
href="#!"
>
Developers <em class="caret"></em>
</a>
<ul class="dropdown-menu" role="menu">
<li class="h5 ">
<a href="/dev-intro/">Intro</a>
</li>
<li class="h5 ">
<a href="/atoms/">Atoms</a>
</li>
<li class="h5 uppercase active">
<a href="/modules/">Modules</a>
</li>
</ul>
</li>
</ul>
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<body>
<div class="bordered-bottom bordered-light
pt-5 pt-md-6
pb-4 pb-md-5
mb-5 mb-md-5">
<div class="container-fluid">
<div class="row">
<div class="
col-sm-7 col-sm-offset-3
col-lg-6 col-lg-offset-2
readable-line
">
<h1 class="domd mb-3">Modules</h1>
<p>
Modules are content blocks built up of atoms.
</p>
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /container -->
</div>
<div class="container-fluid">
<div class="row">
<div class="
col-sm-3
col-md-3
col-lg-2
sticky
">
<div class="row">
<div class="col-sm-12 mt-5">
<h5 class="mb-2">Module Types:</h5>
<ul>
<li class="small"><a href="#Navbar Bootstrap Default">Navbar Bootstrap Default</a></li>
<li class="small"><a href="#Navbar with Columns">Navbar with Columns</a></li>
<li class="small"><a href="#Navbar with Columns and Subpages">Navbar with Columns and Subpages</a></li>
<li class="small"><a href="#Hero Two Up Img Left">Hero Two Up Img Left</a></li>
<li class="small"><a href="#Hero No Img">Hero No Img</a></li>
<li class="small"><a href="#Content Two Up Img Right">Content Two Up Img Right</a></li>
<li class="small"><a href="#Content Two Up Img Left">Content Two Up Img Left</a></li>
<li class="small"><a href="#Content One Up">Content One Up</a></li>
<li class="small"><a href="#Accordion">Accordion</a></li>
<li class="small"><a href="#Blockquote">Blockquote</a></li>
<li class="small"><a href="#Breadcrumbs">Breadcrumbs</a></li>
<li class="small"><a href="#Modals">Modals</a></li>
<li class="small"><a href="#Panels">Panels</a></li>
<li class="small"><a href="#Typography In Use">Typography In Use</a></li>
</ul>
<div class="h5"><a href="#">Back to Top</a></div>
</div><!--/col-->
</div><!--/row-->
</div><!-- /col -->
<div class="
col-sm-9
">
<div id="Navbar Bootstrap Default" class="pt-5">
<h2 class="h5 bg-info d-inline-block p-3">Navbar Bootstrap Default</h2>
<div class="shadow-level-3 bordered bordered-info" style="position:relative;">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand h5" href="#">My Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div> <!-- /container -->
<div class="py-5 bg-gray-light">
<div class="row">
<div class="col-xs-12">
<div class="p-4">
<div class="row">
<div class="col-sm-12 mb-3">
<h3>Reference</h3>
</div>
<div class="col-sm-7">
<h4 class="mb-3">Markup:</h4>
<div class="copy-to-clipboard">
<div class="clipboard-content">
<figure class="highlight"><pre><code class="language-html" data-lang="html"> <span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-default"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-fluid"</span><span class="nt">></span>
<span class="c"><!-- Brand and toggle get grouped for better mobile display --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"navbar-header"</span><span class="nt">></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"navbar-toggle collapsed"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#bs-example-navbar-collapse-1"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Toggle navigation<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon-bar"</span><span class="nt">></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon-bar"</span><span class="nt">></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon-bar"</span><span class="nt">></span></span>
<span class="nt"></button></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"navbar-brand h5"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>My Brand<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="c"><!-- Collect the nav links, forms, and other content for toggling --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"bs-example-navbar-collapse-1"</span><span class="nt">></span>
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav navbar-nav"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link <span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>(current)<span class="nt"></span></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>Dropdown <span class="nt"><span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">></span></a></span>
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Something else here<span class="nt"></a></li></span>
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"separator"</span> <span class="na">class=</span><span class="s">"divider"</span><span class="nt">></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Separated link<span class="nt"></a></li></span>
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"separator"</span> <span class="na">class=</span><span class="s">"divider"</span><span class="nt">></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>One more separated link<span class="nt"></a></li></span>
<span class="nt"></ul></span>
<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><form</span> <span class="na">class=</span><span class="s">"navbar-form navbar-left"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Search"</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">></span>Submit<span class="nt"></button></span>
<span class="nt"></form></span>
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav navbar-nav navbar-right"</span><span class="nt">></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>Dropdown <span class="nt"><span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">></span></a></span>
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Something else here<span class="nt"></a></li></span>
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"separator"</span> <span class="na">class=</span><span class="s">"divider"</span><span class="nt">></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Separated link<span class="nt"></a></li></span>
<span class="nt"></ul></span>
<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></div></span><span class="c"><!-- /.navbar-collapse --></span>
<span class="nt"></div></span><span class="c"><!-- /.container-fluid --></span>
<span class="nt"></nav></span> </code></pre></figure>
</div>
<div class="clipboard-init btn btn-primary mt-3">Copy to Clipboard</div>
</div>
</div><!-- /col -->
<div class="col-sm-5">
<h4 class="mb-3">View Module on it's own page:</h4>
<a href="/modules/01-b-navbar-default.html" class="btn btn-primary">Open Module</a>
</div><!-- /col -->
</div><!--/row-->
</div><!--/shadow-->
</div><!--/col-->
</div><!-- /row -->
</div><!-- /container -->
<div id="Navbar with Columns" class="pt-5">
<h2 class="h5 bg-info d-inline-block p-3">Navbar with Columns</h2>
<div class="shadow-level-3 bordered bordered-info" style="position:relative;">
<nav class="navbar navbar-default navbar-main navbar-with-columns">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-inverted1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="visible-xs navbar-brand" href="/">
<img class="navbar-brand-logo-gt" src="/images/styleguide-required/gt-logo.svg" alt="Generation Tux Logo">
</a>
</div>
</div><!--/col-->
</div><!--/row-->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-inverted1">
<div class="row">
<div class="col-sm-2 col-lg-1">
<a class="hidden-xs navbar-brand navbar-brand-gt" href="/">
<img class="navbar-brand-logo-gt" src="/images/styleguide-required/gt-logo.svg" alt="Generation Tux Logo">
<img class="navbar-brand-logo-full" src="/images/styleguide-required/generationtux-logo.svg" alt="Generation Tux Logo">
</a>
</div><!-- /col -->
<div class="col-sm-10 col-lg-4 col-lg-push-7">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle h5" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">My Events <span class="badge">2</span> </a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle h5" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Patrick Hill <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /col -->
<div class="col-md-12 col-lg-7 col-lg-pull-4">
<ul class="nav navbar-nav main-nav-items main-nav-items-offset">
<li class="active"><a href="#" class="h5">Collection <span class="sr-only">(current)</span></a></li>
<li><a href="#" class="h5">How It Works</a></li>
<li><a href="#" class="h5">Help</a></li>
<li>
<form class="navbar-form navbar-form-search ml-sm-2">
<input type="text" class="form-control">
<button class="btn btn-link"><span class="glyphicon glyphicon-search"></span></button>
</form>
</li>
</ul>
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div> <!-- /container -->
<div class="py-5 bg-gray-light">
<div class="row">
<div class="col-xs-12">
<div class="p-4">
<div class="row">
<div class="col-sm-12 mb-3">
<h3>Reference</h3>
</div>
<div class="col-sm-7">
<h4 class="mb-3">Markup:</h4>
<div class="copy-to-clipboard">
<div class="clipboard-content">
<figure class="highlight"><pre><code class="language-html" data-lang="html"> <span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-default navbar-main navbar-with-columns"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-fluid"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-12"</span><span class="nt">></span>
<span class="c"><!-- Brand and toggle get grouped for better mobile display --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"navbar-header"</span><span class="nt">></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"navbar-toggle collapsed"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#bs-example-navbar-collapse-inverted1"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Toggle navigation<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon-bar"</span><span class="nt">></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon-bar"</span><span class="nt">></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon-bar"</span><span class="nt">></span></span>
<span class="nt"></button></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"visible-xs navbar-brand"</span> <span class="na">href=</span><span class="s">"/"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"navbar-brand-logo-gt"</span> <span class="na">src=</span><span class="s">"/images/styleguide-required/gt-logo.svg"</span> <span class="na">alt=</span><span class="s">"Generation Tux Logo"</span><span class="nt">></span>
<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"></div></span><span class="c"><!--/col--></span>
<span class="nt"></div></span><span class="c"><!--/row--></span>
<span class="c"><!-- Collect the nav links, forms, and other content for toggling --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"bs-example-navbar-collapse-inverted1"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-2 col-lg-1"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"hidden-xs navbar-brand navbar-brand-gt"</span> <span class="na">href=</span><span class="s">"/"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"navbar-brand-logo-gt"</span> <span class="na">src=</span><span class="s">"/images/styleguide-required/gt-logo.svg"</span> <span class="na">alt=</span><span class="s">"Generation Tux Logo"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"navbar-brand-logo-full"</span> <span class="na">src=</span><span class="s">"/images/styleguide-required/generationtux-logo.svg"</span> <span class="na">alt=</span><span class="s">"Generation Tux Logo"</span><span class="nt">></span>
<span class="nt"></a></span>
<span class="nt"></div></span><span class="c"><!-- /col --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-10 col-lg-4 col-lg-push-7"</span><span class="nt">></span>
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav navbar-nav navbar-right"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"dropdown-toggle h5"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>My Events <span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge"</span><span class="nt">></span>2<span class="nt"></span></span> <span class="nt"></a></span>
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Something else here<span class="nt"></a></li></span>
<span class="nt"></ul></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"dropdown-toggle h5"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>Patrick Hill <span class="nt"><span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">></span></a></span>
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Something else here<span class="nt"></a></li></span>
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"separator"</span> <span class="na">class=</span><span class="s">"divider"</span><span class="nt">></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Separated link<span class="nt"></a></li></span>
<span class="nt"></ul></span>
<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></div></span><span class="c"><!-- /col --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-12 col-lg-7 col-lg-pull-4"</span><span class="nt">></span>
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav navbar-nav main-nav-items main-nav-items-offset"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"h5"</span><span class="nt">></span>Collection <span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>(current)<span class="nt"></span></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"h5"</span><span class="nt">></span>How It Works<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"h5"</span><span class="nt">></span>Help<span class="nt"></a></li></span>
<span class="nt"><li></span>
<span class="nt"><form</span> <span class="na">class=</span><span class="s">"navbar-form navbar-form-search ml-sm-2"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-link"</span><span class="nt">><span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-search"</span><span class="nt">></span></button></span>
<span class="nt"></form></span>
<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></div></span><span class="c"><!-- /col --></span>
<span class="nt"></div></span><span class="c"><!-- /row --></span>
<span class="nt"></div></span><span class="c"><!-- /.navbar-collapse --></span>
<span class="nt"></div></span><span class="c"><!-- /.container-fluid --></span>
<span class="nt"></nav></span>
</code></pre></figure>
</div>
<div class="clipboard-init btn btn-primary mt-3">Copy to Clipboard</div>
</div>
</div><!-- /col -->
<div class="col-sm-5">
<h4 class="mb-3">View Module on it's own page:</h4>
<a href="/modules/01-c-navbar-columns.html" class="btn btn-primary">Open Module</a>
</div><!-- /col -->
</div><!--/row-->
</div><!--/shadow-->
</div><!--/col-->
</div><!-- /row -->
</div><!-- /container -->
<div id="Navbar with Columns and Subpages" class="pt-5">
<h2 class="h5 bg-info d-inline-block p-3">Navbar with Columns and Subpages</h2>
<div class="shadow-level-3 bordered bordered-info" style="position:relative;">
<nav class="navbar navbar-default navbar-main navbar-with-columns">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-with-subpages" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="visible-xs navbar-brand" href="/">
<img class="navbar-brand-logo-gt" src="/images/styleguide-required/gt-logo.svg" alt="Generation Tux Logo">
</a>
</div>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-with-subpages">
<div class="row">
<div class="col-sm-2 col-lg-1">
<a class="hidden-xs navbar-brand navbar-brand-gt" href="/">
<img class="navbar-brand-logo-gt" src="/images/styleguide-required/gt-logo.svg" alt="Generation Tux Logo">
<img class="navbar-brand-logo-full" src="/images/styleguide-required/generationtux-logo.svg" alt="Generation Tux Logo">
</a>
</div><!-- /col -->
<div class="col-sm-10 col-md-4 col-md-push-6 col-lg-4 col-lg-push-7">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle h5" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">My Events <span class="badge">2</span> </a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle h5" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Patrick Hill <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /col -->
<div class="col-sm-12 col-md-6 col-md-pull-4 col-lg-7 col-lg-pull-4">
<ul class="nav navbar-nav main-nav-items main-nav-items-offset-sm">
<li class="active"><a href="#" class="h5">Collection <span class="sr-only">(current)</span></a></li>
<li><a href="#" class="h5">How It Works</a></li>
<li><a href="#" class="h5">Help</a></li>
<li><a href="#" class="h5"><span class="glyphicon glyphicon-search"></span></a></li>
</ul>
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<nav class="navbar navbar-default navbar-sub navbar-with-columns">
<div class="container-fluid">
<span class="btn btn-hollow-default collapsed visible-xs mt-3 mb-3" data-toggle="collapse" data-target="#bs-example-navbar-collapse-subnav-inverted" aria-expanded="false">
Collection
<span class="caret"></span>
</span>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-subnav-inverted">
<div class="row">
<div class="col-sm-12 col-md-10 col-md-offset-2 col-lg-11 col-lg-offset-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#" class="small">Tuxedoes & Suits</a></li>
<li><a href="#" class="small">Shirts</a></li>
<li><a href="#" class="small">Vests & Cummerbunds</a></li>
<li><a href="#" class="small">Ties</a></li>
<li><a href="#" class="small">Accessories</a></li>
<li><a href="#" class="small">Shoes & Socks</a></li>
</ul>
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div> <!-- /container -->
<div class="py-5 bg-gray-light">
<div class="row">
<div class="col-xs-12">
<div class="p-4">
<div class="row">
<div class="col-sm-12 mb-3">
<h3>Reference</h3>
</div>
<div class="col-sm-7">
<h4 class="mb-3">Markup:</h4>
<div class="copy-to-clipboard">
<div class="clipboard-content">
<figure class="highlight"><pre><code class="language-html" data-lang="html"> <span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-default navbar-main navbar-with-columns"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-fluid"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-12"</span><span class="nt">></span>
<span class="c"><!-- Brand and toggle get grouped for better mobile display --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"navbar-header"</span><span class="nt">></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"navbar-toggle collapsed"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#navbar-with-subpages"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Toggle navigation<span class="nt"></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon-bar"</span><span class="nt">></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon-bar"</span><span class="nt">></span></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon-bar"</span><span class="nt">></span></span>
<span class="nt"></button></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"visible-xs navbar-brand"</span> <span class="na">href=</span><span class="s">"/"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"navbar-brand-logo-gt"</span> <span class="na">src=</span><span class="s">"/images/styleguide-required/gt-logo.svg"</span> <span class="na">alt=</span><span class="s">"Generation Tux Logo"</span><span class="nt">></span>
<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="c"><!-- Collect the nav links, forms, and other content for toggling --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"navbar-with-subpages"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-2 col-lg-1"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"hidden-xs navbar-brand navbar-brand-gt"</span> <span class="na">href=</span><span class="s">"/"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"navbar-brand-logo-gt"</span> <span class="na">src=</span><span class="s">"/images/styleguide-required/gt-logo.svg"</span> <span class="na">alt=</span><span class="s">"Generation Tux Logo"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"navbar-brand-logo-full"</span> <span class="na">src=</span><span class="s">"/images/styleguide-required/generationtux-logo.svg"</span> <span class="na">alt=</span><span class="s">"Generation Tux Logo"</span><span class="nt">></span>
<span class="nt"></a></span>
<span class="nt"></div></span><span class="c"><!-- /col --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-10 col-md-4 col-md-push-6 col-lg-4 col-lg-push-7"</span><span class="nt">></span>
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav navbar-nav navbar-right"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"dropdown-toggle h5"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>My Events <span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge"</span><span class="nt">></span>2<span class="nt"></span></span> <span class="nt"></a></span>
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Something else here<span class="nt"></a></li></span>
<span class="nt"></ul></span>
<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"dropdown-toggle h5"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>Patrick Hill <span class="nt"><span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">></span></a></span>
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Something else here<span class="nt"></a></li></span>
<span class="nt"><li</span> <span class="na">role=</span><span class="s">"separator"</span> <span class="na">class=</span><span class="s">"divider"</span><span class="nt">></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Separated link<span class="nt"></a></li></span>
<span class="nt"></ul></span>
<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></div></span><span class="c"><!-- /col --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-12 col-md-6 col-md-pull-4 col-lg-7 col-lg-pull-4"</span><span class="nt">></span>
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav navbar-nav main-nav-items main-nav-items-offset-sm"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"h5"</span><span class="nt">></span>Collection <span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>(current)<span class="nt"></span></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"h5"</span><span class="nt">></span>How It Works<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"h5"</span><span class="nt">></span>Help<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"h5"</span><span class="nt">><span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-search"</span><span class="nt">></span></a></li></span>
<span class="nt"></ul></span>
<span class="nt"></div></span><span class="c"><!-- /col --></span>
<span class="nt"></div></span><span class="c"><!-- /row --></span>
<span class="nt"></div></span><span class="c"><!-- /.navbar-collapse --></span>
<span class="nt"></div></span><span class="c"><!-- /.container-fluid --></span>
<span class="nt"></nav></span>
<span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-default navbar-sub navbar-with-columns"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-fluid"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"btn btn-hollow-default collapsed visible-xs mt-3 mb-3"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#bs-example-navbar-collapse-subnav-inverted"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
Collection
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">></span></span>
<span class="nt"></span></span>
<span class="c"><!-- Collect the nav links, forms, and other content for toggling --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"bs-example-navbar-collapse-subnav-inverted"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-12 col-md-10 col-md-offset-2 col-lg-11 col-lg-offset-1"</span><span class="nt">></span>
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav navbar-nav"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"small"</span><span class="nt">></span>Tuxedoes <span class="err">&</span> Suits<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"small"</span><span class="nt">></span>Shirts<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"small"</span><span class="nt">></span>Vests <span class="err">&</span> Cummerbunds<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"small"</span><span class="nt">></span>Ties<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"small"</span><span class="nt">></span>Accessories<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"small"</span><span class="nt">></span>Shoes <span class="err">&</span> Socks<span class="nt"></a></li></span>
<span class="nt"></ul></span>
<span class="nt"></div></span><span class="c"><!-- /col --></span>
<span class="nt"></div></span><span class="c"><!-- /row --></span>
<span class="nt"></div></span><span class="c"><!-- /.navbar-collapse --></span>
<span class="nt"></div></span><span class="c"><!-- /.container-fluid --></span>
<span class="nt"></nav></span> </code></pre></figure>
</div>
<div class="clipboard-init btn btn-primary mt-3">Copy to Clipboard</div>
</div>
</div><!-- /col -->
<div class="col-sm-5">
<h4 class="mb-3">View Module on it's own page:</h4>
<a href="/modules/01-d-navbar-columns-submenu.html" class="btn btn-primary">Open Module</a>
</div><!-- /col -->
</div><!--/row-->
</div><!--/shadow-->
</div><!--/col-->
</div><!-- /row -->
</div><!-- /container -->
<div id="Hero Two Up Img Left" class="pt-5">
<h2 class="h5 bg-info d-inline-block p-3">Hero Two Up Img Left</h2>
<div class="shadow-level-3 bordered bordered-info" style="position:relative;">
<div class="bg-gray-lighter">
<section
class="
container-fluid
bg-offset-base bg-offset-leftbottom-5-2
pt-4 pt-md-5
pb-4 pb-sm-5 pb-lg-6
">
<div class="row align-vertical">
<div class="col-sm-8 col-md-5 col-lg-4 col-lg-offset-1">
<img class="shadow-level-4 img-responsive" src="https://media.gentux.com/afBxlPasNQvg2@kaysWHap9MTPcj">
</div>
<div class="col-sm-12 col-md-7 col-lg-6 pl-lg-5">
<h1 class="domd mb-3">
<div class="h4 mt-4 mt-sm-0 mb-1">Lorem ipsum dolor</div>
Typi non habent claritatem
</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
<a class="btn btn-primary">Start Shopping</a>
</p>
</div><!-- /col -->
</div><!-- /row -->
</section>
</div>
</div> <!-- /container -->
<div class="py-5 bg-gray-light">
<div class="row">
<div class="col-xs-12">
<div class="p-4">
<div class="row">
<div class="col-sm-12 mb-3">
<h3>Reference</h3>
</div>
<div class="col-sm-7">
<h4 class="mb-3">Markup:</h4>
<div class="copy-to-clipboard">
<div class="clipboard-content">
<figure class="highlight"><pre><code class="language-html" data-lang="html"> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"bg-gray-lighter"</span><span class="nt">></span>
<span class="nt"><section</span>
<span class="na">class=</span><span class="s">"
container-fluid
bg-offset-base bg-offset-leftbottom-5-2
pt-4 pt-md-5
pb-4 pb-sm-5 pb-lg-6
"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row align-vertical"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-8 col-md-5 col-lg-4 col-lg-offset-1"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"shadow-level-4 img-responsive"</span> <span class="na">src=</span><span class="s">"https://media.gentux.com/afBxlPasNQvg2@kaysWHap9MTPcj"</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-12 col-md-7 col-lg-6 pl-lg-5"</span><span class="nt">></span>
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"domd mb-3"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"h4 mt-4 mt-sm-0 mb-1"</span><span class="nt">></span>Lorem ipsum dolor<span class="nt"></div></span>
Typi non habent claritatem
<span class="nt"></h1></span>
<span class="nt"><p></span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<span class="nt"></p></span>
<span class="nt"><p></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Start Shopping<span class="nt"></a></span>
<span class="nt"></p></span>
<span class="nt"></div></span><span class="c"><!-- /col --></span>
<span class="nt"></div></span><span class="c"><!-- /row --></span>
<span class="nt"></section></span>
<span class="nt"></div></span>
</code></pre></figure>
</div>
<div class="clipboard-init btn btn-primary mt-3">Copy to Clipboard</div>
</div>
</div><!-- /col -->
<div class="col-sm-5">
<h4 class="mb-3">View Module on it's own page:</h4>
<a href="/modules/02-b-hero-two-up-img-left.html" class="btn btn-primary">Open Module</a>
</div><!-- /col -->
</div><!--/row-->
</div><!--/shadow-->
</div><!--/col-->
</div><!-- /row -->
</div><!-- /container -->
<div id="Hero No Img" class="pt-5">
<h2 class="h5 bg-info d-inline-block p-3">Hero No Img</h2>
<div class="shadow-level-3 bordered bordered-info" style="position:relative;">
<div class="bg-gray-lighter">
<section
class="
container-fluid
pt-4 pt-md-5
pb-5 pb-sm-5 pb-lg-6
">
<div class="row align-vertical">
<div class="col-sm-11 col-sm-offset-1 col-md-8">
<h1 class="domd mb-3">
<div class="h4 mt-4 mt-sm-0 mb-1">Lorem ipsum dolor</div>
Typi non habent claritatem
</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
<a class="btn btn-primary">Start Shopping</a>
</p>
</div><!-- /col -->
</div><!-- /row -->
</section>
</div>
</div> <!-- /container -->
<div class="py-5 bg-gray-light">
<div class="row">
<div class="col-xs-12">
<div class="p-4">
<div class="row">
<div class="col-sm-12 mb-3">
<h3>Reference</h3>
</div>
<div class="col-sm-7">
<h4 class="mb-3">Markup:</h4>
<div class="copy-to-clipboard">
<div class="clipboard-content">
<figure class="highlight"><pre><code class="language-html" data-lang="html"> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"bg-gray-lighter"</span><span class="nt">></span>
<span class="nt"><section</span>
<span class="na">class=</span><span class="s">"
container-fluid
pt-4 pt-md-5
pb-5 pb-sm-5 pb-lg-6
"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row align-vertical"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-11 col-sm-offset-1 col-md-8"</span><span class="nt">></span>
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"domd mb-3"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"h4 mt-4 mt-sm-0 mb-1"</span><span class="nt">></span>Lorem ipsum dolor<span class="nt"></div></span>
Typi non habent claritatem
<span class="nt"></h1></span>
<span class="nt"><p></span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<span class="nt"></p></span>
<span class="nt"><p></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Start Shopping<span class="nt"></a></span>
<span class="nt"></p></span>
<span class="nt"></div></span><span class="c"><!-- /col --></span>
<span class="nt"></div></span><span class="c"><!-- /row --></span>
<span class="nt"></section></span>
<span class="nt"></div></span>
</code></pre></figure>
</div>
<div class="clipboard-init btn btn-primary mt-3">Copy to Clipboard</div>
</div>
</div><!-- /col -->
<div class="col-sm-5">
<h4 class="mb-3">View Module on it's own page:</h4>
<a href="/modules/02-c-hero-no-img.html" class="btn btn-primary">Open Module</a>
</div><!-- /col -->
</div><!--/row-->
</div><!--/shadow-->
</div><!--/col-->
</div><!-- /row -->
</div><!-- /container -->
<div id="Content Two Up Img Right" class="pt-5">
<h2 class="h5 bg-info d-inline-block p-3">Content Two Up Img Right</h2>
<div class="shadow-level-3 bordered bordered-info" style="position:relative;">
<div class="container-fluid
pt-5 pt-md-6
pb-5 pb-md-6
">
<div class="row align-vertical">
<div class="col-sm-6 col-sm-push-6 text-center">
<img class="shadow-level-4 img-responsive" src="https://media.gentux.com/afBxlPasNQvg2@kaysWHap9MTPcj">
</div><!-- /col -->
<div class="col-sm-4 col-sm-pull-5">
<h2 class="h3 mt-4 mt-sm-3">Highest Quality Fabrics</h2>
<p>
Look your best in our retail quality fabrics that are lightweight and breathable. Plus, we have a wide selection of styles and over 200+ accessories.
</p>
<p>
<a class="btn btn-primary">Call to Action</a>
</p>
</div><!-- /col -->
</div><!-- /row -->
</div>
</div> <!-- /container -->
<div class="py-5 bg-gray-light">
<div class="row">
<div class="col-xs-12">
<div class="p-4">
<div class="row">
<div class="col-sm-12 mb-3">
<h3>Reference</h3>
</div>
<div class="col-sm-7">
<h4 class="mb-3">Markup:</h4>
<div class="copy-to-clipboard">
<div class="clipboard-content">
<figure class="highlight"><pre><code class="language-html" data-lang="html"> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-fluid
pt-5 pt-md-6
pb-5 pb-md-6
"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row align-vertical"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-6 col-sm-push-6 text-center"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"shadow-level-4 img-responsive"</span> <span class="na">src=</span><span class="s">"https://media.gentux.com/afBxlPasNQvg2@kaysWHap9MTPcj"</span><span class="nt">></span>
<span class="nt"></div></span><span class="c"><!-- /col --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-4 col-sm-pull-5"</span><span class="nt">></span>
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"h3 mt-4 mt-sm-3"</span><span class="nt">></span>Highest Quality Fabrics<span class="nt"></h2></span>
<span class="nt"><p></span>
Look your best in our retail quality fabrics that are lightweight and breathable. Plus, we have a wide selection of styles and over 200+ accessories.
<span class="nt"></p></span>
<span class="nt"><p></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Call to Action<span class="nt"></a></span>
<span class="nt"></p></span>
<span class="nt"></div></span><span class="c"><!-- /col --></span>
<span class="nt"></div></span><span class="c"><!-- /row --></span>
<span class="nt"></div></span>
</code></pre></figure>
</div>
<div class="clipboard-init btn btn-primary mt-3">Copy to Clipboard</div>
</div>
</div><!-- /col -->
<div class="col-sm-5">
<h4 class="mb-3">View Module on it's own page:</h4>
<a href="/modules/03-b-two-up-img-right.html" class="btn btn-primary">Open Module</a>
</div><!-- /col -->
</div><!--/row-->
</div><!--/shadow-->
</div><!--/col-->
</div><!-- /row -->
</div><!-- /container -->
<div id="Content Two Up Img Left" class="pt-5">
<h2 class="h5 bg-info d-inline-block p-3">Content Two Up Img Left</h2>
<div class="shadow-level-3 bordered bordered-info" style="position:relative;">
<div class="container-fluid
pt-5 pt-md-6
pb-5 pb-md-6
">
<div class="row align-vertical">
<div class="col-sm-6 text-center">
<img class="shadow-level-4 img-responsive" src="https://media.gentux.com/afBxlPasNQvg2@kaysWHap9MTPcj">
</div><!-- /col -->
<div class="col-sm-4 col-sm-offset-1">
<h2 class="h3 mt-4 mt-sm-3">Highest Quality Fabrics</h2>
<p>
Look your best in our retail quality fabrics that are lightweight and breathable. Plus, we have a wide selection of styles and over 200+ accessories.
</p>
<p>
<a class="btn btn-primary">Call to Action</a>
</p>
</div><!-- /col -->
</div><!-- /row -->
</div>
</div> <!-- /container -->
<div class="py-5 bg-gray-light">
<div class="row">
<div class="col-xs-12">
<div class="p-4">
<div class="row">
<div class="col-sm-12 mb-3">
<h3>Reference</h3>
</div>
<div class="col-sm-7">
<h4 class="mb-3">Markup:</h4>
<div class="copy-to-clipboard">
<div class="clipboard-content">
<figure class="highlight"><pre><code class="language-html" data-lang="html"> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-fluid
pt-5 pt-md-6
pb-5 pb-md-6
"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row align-vertical"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-6 text-center"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"shadow-level-4 img-responsive"</span> <span class="na">src=</span><span class="s">"https://media.gentux.com/afBxlPasNQvg2@kaysWHap9MTPcj"</span><span class="nt">></span>
<span class="nt"></div></span><span class="c"><!-- /col --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-4 col-sm-offset-1"</span><span class="nt">></span>
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"h3 mt-4 mt-sm-3"</span><span class="nt">></span>Highest Quality Fabrics<span class="nt"></h2></span>
<span class="nt"><p></span>
Look your best in our retail quality fabrics that are lightweight and breathable. Plus, we have a wide selection of styles and over 200+ accessories.
<span class="nt"></p></span>
<span class="nt"><p></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Call to Action<span class="nt"></a></span>
<span class="nt"></p></span>
<span class="nt"></div></span><span class="c"><!-- /col --></span>
<span class="nt"></div></span><span class="c"><!-- /row --></span>
<span class="nt"></div></span> </code></pre></figure>
</div>
<div class="clipboard-init btn btn-primary mt-3">Copy to Clipboard</div>
</div>
</div><!-- /col -->
<div class="col-sm-5">
<h4 class="mb-3">View Module on it's own page:</h4>
<a href="/modules/03-c-two-up-img-left.html" class="btn btn-primary">Open Module</a>
</div><!-- /col -->
</div><!--/row-->
</div><!--/shadow-->
</div><!--/col-->
</div><!-- /row -->
</div><!-- /container -->
<div id="Content One Up" class="pt-5">
<h2 class="h5 bg-info d-inline-block p-3">Content One Up</h2>
<div class="shadow-level-3 bordered bordered-info" style="position:relative;">
<div class="container-fluid
pt-5 pt-md-6
pb-5 pb-md-6
">
<div class="row align-vertical">
<div class="
col-sm-8 col-sm-offset-2
col-lg-6 col-lg-offset-3
">
<img class="shadow-level-4 img-responsive" src="https://media.gentux.com/afBxlPasNQvg2@kaysWHap9MTPcj">
<h2 class="h3 mt-4 mb-2">Highest Quality Fabrics</h2>
<p>
Look your best in our retail quality fabrics that are lightweight and breathable. Plus, we have a wide selection of styles and over 200+ accessories.
</p>
<p>
<a class="btn btn-primary">Call to Action</a>
</p>
</div><!-- /col -->
</div><!-- /row -->
</div>
</div> <!-- /container -->
<div class="py-5 bg-gray-light">
<div class="row">
<div class="col-xs-12">
<div class="p-4">
<div class="row">
<div class="col-sm-12 mb-3">
<h3>Reference</h3>
</div>
<div class="col-sm-7">
<h4 class="mb-3">Markup:</h4>
<div class="copy-to-clipboard">
<div class="clipboard-content">
<figure class="highlight"><pre><code class="language-html" data-lang="html"> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-fluid
pt-5 pt-md-6
pb-5 pb-md-6
"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row align-vertical"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"
col-sm-8 col-sm-offset-2
col-lg-6 col-lg-offset-3
"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"shadow-level-4 img-responsive"</span> <span class="na">src=</span><span class="s">"https://media.gentux.com/afBxlPasNQvg2@kaysWHap9MTPcj"</span><span class="nt">></span>
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"h3 mt-4 mb-2"</span><span class="nt">></span>Highest Quality Fabrics<span class="nt"></h2></span>
<span class="nt"><p></span>
Look your best in our retail quality fabrics that are lightweight and breathable. Plus, we have a wide selection of styles and over 200+ accessories.
<span class="nt"></p></span>
<span class="nt"><p></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Call to Action<span class="nt"></a></span>
<span class="nt"></p></span>
<span class="nt"></div></span><span class="c"><!-- /col --></span>
<span class="nt"></div></span><span class="c"><!-- /row --></span>
<span class="nt"></div></span> </code></pre></figure>
</div>
<div class="clipboard-init btn btn-primary mt-3">Copy to Clipboard</div>
</div>
</div><!-- /col -->
<div class="col-sm-5">
<h4 class="mb-3">View Module on it's own page:</h4>
<a href="/modules/03-d-one-up.html" class="btn btn-primary">Open Module</a>
</div><!-- /col -->
</div><!--/row-->
</div><!--/shadow-->
</div><!--/col-->
</div><!-- /row -->
</div><!-- /container -->
<div id="Accordion" class="pt-5">
<h2 class="h5 bg-info d-inline-block p-3">Accordion</h2>
<div class="shadow-level-3 bordered bordered-info" style="position:relative;">
<div class="container-fluid">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-theme-accordion">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span class="plus-icon"></span>
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<p>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</p>
</div>
</div>
</div>
<div class="panel panel-theme-accordion">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<span class="plus-icon"></span>
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<p>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</p>
</div>
</div>
</div>
<div class="panel panel-theme-accordion">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<span class="plus-icon"></span>
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<p>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</p>
</div>
</div>
</div>
</div>
</div><!-- /container -->
</div> <!-- /container -->
<div class="py-5 bg-gray-light">
<div class="row">
<div class="col-xs-12">
<div class="p-4">
<div class="row">
<div class="col-sm-12 mb-3">
<h3>Reference</h3>
</div>
<div class="col-sm-7">
<h4 class="mb-3">Markup:</h4>
<div class="copy-to-clipboard">
<div class="clipboard-content">
<figure class="highlight"><pre><code class="language-html" data-lang="html"> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-fluid"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"panel-group"</span> <span class="na">id=</span><span class="s">"accordion"</span> <span class="na">role=</span><span class="s">"tablist"</span> <span class="na">aria-multiselectable=</span><span class="s">"true"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"panel panel-theme-accordion"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"panel-heading"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">id=</span><span class="s">"headingOne"</span><span class="nt">></span>
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"panel-title"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-parent=</span><span class="s">"#accordion"</span> <span class="na">href=</span><span class="s">"#collapseOne"</span> <span class="na">aria-expanded=</span><span class="s">"true"</span> <span class="na">aria-controls=</span><span class="s">"collapseOne"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"plus-icon"</span><span class="nt">></span></span>
Collapsible Group Item #1
<span class="nt"></a></span>
<span class="nt"></h4></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"collapseOne"</span> <span class="na">class=</span><span class="s">"panel-collapse collapse in"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"headingOne"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"panel-body"</span><span class="nt">></span>
<span class="nt"><p></span>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"panel panel-theme-accordion"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"panel-heading"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">id=</span><span class="s">"headingTwo"</span><span class="nt">></span>
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"panel-title"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"collapsed"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-parent=</span><span class="s">"#accordion"</span> <span class="na">href=</span><span class="s">"#collapseTwo"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseTwo"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"plus-icon"</span><span class="nt">></span></span>
Collapsible Group Item #2
<span class="nt"></a></span>
<span class="nt"></h4></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"collapseTwo"</span> <span class="na">class=</span><span class="s">"panel-collapse collapse"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"headingTwo"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"panel-body"</span><span class="nt">></span>
<span class="nt"><p></span>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"panel panel-theme-accordion"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"panel-heading"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">id=</span><span class="s">"headingThree"</span><span class="nt">></span>
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"panel-title"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"collapsed"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-parent=</span><span class="s">"#accordion"</span> <span class="na">href=</span><span class="s">"#collapseThree"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseThree"</span><span class="nt">></span>
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"plus-icon"</span><span class="nt">></span></span>
Collapsible Group Item #3
<span class="nt"></a></span>
<span class="nt"></h4></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"collapseThree"</span> <span class="na">class=</span><span class="s">"panel-collapse collapse"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"headingThree"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"panel-body"</span><span class="nt">></span>
<span class="nt"><p></span>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span><span class="c"><!-- /container --></span> </code></pre></figure>
</div>
<div class="clipboard-init btn btn-primary mt-3">Copy to Clipboard</div>
</div>
</div><!-- /col -->
<div class="col-sm-5">
<h4 class="mb-3">View Module on it's own page:</h4>
<a href="/modules/accordion.html" class="btn btn-primary">Open Module</a>
</div><!-- /col -->
</div><!--/row-->
</div><!--/shadow-->
</div><!--/col-->
</div><!-- /row -->
</div><!-- /container -->
<div id="Blockquote" class="pt-5">
<h2 class="h5 bg-info d-inline-block p-3">Blockquote</h2>
<div class="shadow-level-3 bordered bordered-info" style="position:relative;">
<div class="container-fluid">
<blockquote class="my-4">
<q class="h3 domd readable-line mb-3">Here in the 21st century, the modern man need never compromise.</q>
<cite class="text-right small">George Zimmer</cite>
</blockquote>
</div><!-- /container -->
</div> <!-- /container -->
<div class="py-5 bg-gray-light">
<div class="row">
<div class="col-xs-12">
<div class="p-4">
<div class="row">
<div class="col-sm-12 mb-3">
<h3>Reference</h3>
</div>
<div class="col-sm-7">
<h4 class="mb-3">Markup:</h4>
<div class="copy-to-clipboard">
<div class="clipboard-content">
<figure class="highlight"><pre><code class="language-html" data-lang="html"> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-fluid"</span><span class="nt">></span>
<span class="nt"><blockquote</span> <span class="na">class=</span><span class="s">"my-4"</span><span class="nt">></span>
<span class="nt"><q</span> <span class="na">class=</span><span class="s">"h3 domd readable-line mb-3"</span><span class="nt">></span>Here in the 21st century, the modern man need never<span class="ni">&nbsp;</span>compromise.<span class="nt"></q></span>
<span class="nt"><cite</span> <span class="na">class=</span><span class="s">"text-right small"</span><span class="nt">></span>George Zimmer<span class="nt"></cite></span>
<span class="nt"></blockquote></span>
<span class="nt"></div></span><span class="c"><!-- /container --></span>
</code></pre></figure>
</div>
<div class="clipboard-init btn btn-primary mt-3">Copy to Clipboard</div>
</div>
</div><!-- /col -->
<div class="col-sm-5">
<h4 class="mb-3">View Module on it's own page:</h4>
<a href="/modules/blockquote.html" class="btn btn-primary">Open Module</a>
</div><!-- /col -->
</div><!--/row-->
</div><!--/shadow-->
</div><!--/col-->
</div><!-- /row -->
</div><!-- /container -->
<div id="Breadcrumbs" class="pt-5">
<h2 class="h5 bg-info d-inline-block p-3">Breadcrumbs</h2>
<div class="shadow-level-3 bordered bordered-info" style="position:relative;">
<div class="container-fluid mt-4 mb-4">
<ol class="breadcrumb">
<li class="h1 h5 uppercase"><a href="#">Gentux</a></li>
<li class="small"><a href="#">Collection</a></li>
<li class="active small">Tuxedos & Suits</li>
</ol>
</div><!-- /container -->
</div> <!-- /container -->
<div class="py-5 bg-gray-light">
<div class="row">
<div class="col-xs-12">
<div class="p-4">
<div class="row">
<div class="col-sm-12 mb-3">
<h3>Reference</h3>
</div>
<div class="col-sm-7">
<h4 class="mb-3">Markup:</h4>
<div class="copy-to-clipboard">
<div class="clipboard-content">
<figure class="highlight"><pre><code class="language-html" data-lang="html"> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-fluid mt-4 mb-4"</span><span class="nt">></span>
<span class="nt"><ol</span> <span class="na">class=</span><span class="s">"breadcrumb"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"h1 h5 uppercase"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Gentux<span class="nt"></a></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"small"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Collection<span class="nt"></a></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"active small"</span><span class="nt">></span>Tuxedos <span class="err">&</span> Suits<span class="nt"></li></span>
<span class="nt"></ol></span>
<span class="nt"></div></span><span class="c"><!-- /container --></span> </code></pre></figure>
</div>
<div class="clipboard-init btn btn-primary mt-3">Copy to Clipboard</div>
</div>
</div><!-- /col -->
<div class="col-sm-5">
<h4 class="mb-3">View Module on it's own page:</h4>
<a href="/modules/breadcrumbs.html" class="btn btn-primary">Open Module</a>
</div><!-- /col -->
</div><!--/row-->
</div><!--/shadow-->
</div><!--/col-->
</div><!-- /row -->
</div><!-- /container -->
<div id="Modals" class="pt-5">
<h2 class="h5 bg-info d-inline-block p-3">Modals</h2>
<div class="shadow-level-3 bordered bordered-info" style="position:relative;">
<div class="container-fluid">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: block;position: relative;overflow: visible;z-index: 0;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div> <!-- /container -->
<div class="py-5 bg-gray-light">
<div class="row">
<div class="col-xs-12">
<div class="p-4">
<div class="row">
<div class="col-sm-12 mb-3">
<h3>Reference</h3>
</div>
<div class="col-sm-7">
<h4 class="mb-3">Markup:</h4>
<div class="copy-to-clipboard">
<div class="clipboard-content">
<figure class="highlight"><pre><code class="language-html" data-lang="html"> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-fluid"</span><span class="nt">></span>
<span class="c"><!-- Button trigger modal --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">"#myModal"</span><span class="nt">></span>
Launch demo modal
<span class="nt"></button></span>
<span class="c"><!-- Modal --></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal fade"</span> <span class="na">id=</span><span class="s">"myModal"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span> <span class="na">aria-labelledby=</span><span class="s">"myModalLabel"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-dialog"</span> <span class="na">role=</span><span class="s">"document"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span></button></span>
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"modal-title"</span> <span class="na">id=</span><span class="s">"myModalLabel"</span><span class="nt">></span>Modal title<span class="nt"></h4></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">></span>
<span class="nt"><p></span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-footer"</span><span class="nt">></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">></span>Close<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Save changes<span class="nt"></button></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal fade in"</span> <span class="na">id=</span><span class="s">"myModal"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span> <span class="na">aria-labelledby=</span><span class="s">"myModalLabel"</span> <span class="na">style=</span><span class="s">"display: block;position: relative;overflow: visible;z-index: 0;"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-dialog"</span> <span class="na">role=</span><span class="s">"document"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span>×<span class="nt"></span></button></span>
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"modal-title"</span> <span class="na">id=</span><span class="s">"myModalLabel"</span><span class="nt">></span>Modal title<span class="nt"></h4></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">></span>
<span class="nt"><p></span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-footer"</span><span class="nt">></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">></span>Close<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Save changes<span class="nt"></button></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span> </code></pre></figure>
</div>
<div class="clipboard-init btn btn-primary mt-3">Copy to Clipboard</div>
</div>
</div><!-- /col -->
<div class="col-sm-5">
<h4 class="mb-3">View Module on it's own page:</h4>
<a href="/modules/modal.html" class="btn btn-primary">Open Module</a>
</div><!-- /col -->
</div><!--/row-->
</div><!--/shadow-->
</div><!--/col-->
</div><!-- /row -->
</div><!-- /container -->
<div id="Panels" class="pt-5">
<h2 class="h5 bg-info d-inline-block p-3">Panels</h2>
<div class="shadow-level-3 bordered bordered-info" style="position:relative;">
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div> <!-- /container -->
<div class="py-5 bg-gray-light">
<div class="row">
<div class="col-xs-12">
<div class="p-4">
<div class="row">
<div class="col-sm-12 mb-3">
<h3>Reference</h3>
</div>
<div class="col-sm-7">
<h4 class="mb-3">Markup:</h4>
<div class="copy-to-clipboard">
<div class="clipboard-content">
<figure class="highlight"><pre><code class="language-html" data-lang="html"> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-fluid"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"panel panel-default"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"panel-heading"</span><span class="nt">></span>Panel heading without title<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"panel-body"</span><span class="nt">></span>
Panel content
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span> </code></pre></figure>
</div>
<div class="clipboard-init btn btn-primary mt-3">Copy to Clipboard</div>
</div>
</div><!-- /col -->
<div class="col-sm-5">
<h4 class="mb-3">View Module on it's own page:</h4>
<a href="/modules/panel.html" class="btn btn-primary">Open Module</a>
</div><!-- /col -->
</div><!--/row-->
</div><!--/shadow-->
</div><!--/col-->
</div><!-- /row -->
</div><!-- /container -->
<div id="Typography In Use" class="pt-5">
<h2 class="h5 bg-info d-inline-block p-3">Typography In Use</h2>
<div class="shadow-level-3 bordered bordered-info" style="position:relative;">
<div class="container-fluid py-5">
<div class="row">
<div class="col-sm-8 col-sm-offset-1">
<h1 class="context--copy">
<div class="h4 mb-1">Our Story</div>
<div class="domd readable-line">It's Time To Reboot The Black Tie Experience</div>
</h1>
</div>
</div>
<div class="row">
<div class="col-sm-10 col-sm-offset-1 col-lg-8 col-lg-offset-2 body-copy">
<h2 class="context--copy">Section Title - Headline Level Two</h2>
<p>
When it comes to the traditional brick-and-mortar, laminated-catalog, outdated-inventory, advertise-low-and-get-upsold-in-the-store tuxedo rental experience, we are seriously questioning the status quo. And you should too.
</p>
<p>
At Generation Tux, we believe your entire black tie experience should be worthy of the special day you need us for. We’re the first company to dedicate itself to overhauling and improving every aspect of making sure you look amazing for your memorable
event.
</p>
<p>
Inspired by our visionary founder, George Zimmer, we are a collective of experienced, open-minded, and forward-thinking fashion lovers, engineering geeks,and digital junkies who understand that when you look great, you feel awesome—and then joy happens.
</p>
<h3 class="context--copy"> Sub Section Headline H3</h3>
<p>
When it comes to the traditional brick-and-mortar, laminated-catalog, outdated-inventory, advertise-low-and-get-upsold-in-the-store tuxedo rental experience, we are seriously questioning the status quo. And you should too.
</p>
<h4 class="context--copy"> Sub Sub Section Headline H4</h4>
<p>
At Generation Tux, we believe your entire black tie experience should be worthy of the special day you need us for. We’re the first company to dedicate itself to overhauling and improving every aspect of making sure you look amazing for your memorable
event.
</p>
<p>
Inspired by our visionary founder, George Zimmer, we are a collective of experienced, open-minded, and forward-thinking fashion lovers, engineering geeks,and digital junkies who understand that when you look great, you feel awesome—and then joy happens.
</p>
<h5 class="context--copy"> Sub Sub Section Headline H5</h5>
<p>
At Generation Tux, we believe your entire black tie experience should be worthy of the special day you need us for. We’re the first company to dedicate itself to overhauling and improving every aspect of making sure you look amazing for your memorable
event.
</p>
<h6 class="context--copy uppercase"> Sub Sub Section Headline H6</h6>
<p>
Inspired by our visionary founder, George Zimmer, we are a collective of experienced, open-minded, and forward-thinking fashion lovers, engineering geeks,and digital junkies who understand that when you look great, you feel awesome—and then joy happens.
</p>
<h3 class="context--copy"> This is a longer H3 Sub Section headline that will stretch a little further</h3>
<p>
When it comes to the traditional brick-and-mortar, laminated-catalog, outdated-inventory, advertise-low-and-get-upsold-in-the-store tuxedo rental experience, we are seriously questioning the status quo. And you should too.
</p>
<p>
At Generation Tux, we believe your entire black tie experience should be worthy of the special day you need us for. We’re the first company to dedicate itself to overhauling and improving every aspect of making sure you look amazing for your memorable
event.
</p>
<ul>
<li>Ut wisi enim ad minim veniam, quis nostrud exerci tation</li>
<li>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi.
</p>
<h2 class="context--copy uppercase">New Headline Level 2</h2>
<h3 class="context--copy"> Sub Section Headline H3</h3>
<p>
When it comes to the traditional brick-and-mortar, laminated-catalog, outdated-inventory, advertise-low-and-get-upsold-in-the-store tuxedo rental experience, we are seriously questioning the status quo. And you should too.
</p>
<p>
<img class="context--copy copy-block img-responsive" src="http://placehold.it/900x300">
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi.
</p>
<ul>
<li>Ut wisi enim ad minim veniam, quis nostrud exerci tation</li>
<li>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit</li>
</ul>
<p><img class="context--copy copy-block img-responsive" src="http://placehold.it/900x300"></p>
<h3 class="context--copy"> Sub Section Headline H3</h3>
<p>
When it comes to the traditional brick-and-mortar, laminated-catalog, outdated-inventory, advertise-low-and-get-upsold-in-the-store tuxedo rental experience, we are seriously questioning the status quo. And you should too.
</p>
<div class="row">
<div class="col-sm-4">
<img class="context--copy img-responsive" src="http://placehold.it/300">
</div>
<div class="col-sm-8">
<h4 class="context--copy">Section Title - Headline Level Two</h4>
<p>
When it comes to the traditional brick-and-mortar, laminated-catalog, outdated-inventory, advertise-low-and-get-upsold-in-the-store tuxedo rental experience, we are seriously questioning the status quo. And you should too.
</p>
<p>
At Generation Tux, we believe your entire black tie experience should be worthy of the special day you need us for. We’re the first company to dedicate itself to overhauling and improving every aspect of making sure you look amazing for your memorable
event.
</p>
<p>
Inspired by our visionary founder, George Zimmer, we are a collective of experienced, open-minded, and forward-thinking fashion lovers, engineering geeks,and digital junkies who understand that when you look great, you feel awesome—and then joy happens.
</p>
</div>
</div>
<p>
When it comes to the traditional brick-and-mortar, laminated-catalog, outdated-inventory, advertise-low-and-get-upsold-in-the-store tuxedo rental experience, we are seriously questioning the status quo. And you should too.
</p>
<h2 class="context--copy uppercase text-center">New Section</h2>
<p class="text-center">
Inspired by our visionary founder, George Zimmer, we are a collective of experienced, open-minded, and forward-thinking fashion lovers, engineering geeks,and digital junkies who understand that when you look great, you feel awesome—and then joy happens.
</p>
<div class="row">
<div class="col-sm-4 text-center">
<img class="mt-4 mb-3 text-center img-responsive" src="http://placehold.it/100">
<h5 class="uppercase">Foobar</h5>
<p> This is the item description</p>
</div>
<div class="col-sm-4 text-center">
<img class="mt-4 mb-3 text-center img-responsive" src="http://placehold.it/100">
<h5 class="uppercase">Foobar</h5>
<p> This is the item description</p>
</div>
<div class="col-sm-4 text-center">
<img class="mt-4 mb-3 text-center img-responsive" src="http://placehold.it/100">
<h5 class="uppercase">Foobar</h5>
<p> This is the item description</p>
</div>
</div>
<h3 class="context--copy">Section </h3>
<p>
Inspired by our visionary founder, George Zimmer, we are a collective of experienced, open-minded, and forward-thinking fashion lovers, engineering geeks,and digital junkies who understand that when you look great, you feel awesome—and then joy happens.
</p>
</div>
</div>
</div><!-- /container -->
</div> <!-- /container -->
<div class="py-5 bg-gray-light">
<div class="row">
<div class="col-xs-12">
<div class="p-4">
<div class="row">
<div class="col-sm-12 mb-3">
<h3>Reference</h3>
</div>
<div class="col-sm-7">
<h4 class="mb-3">Markup:</h4>
<div class="copy-to-clipboard">
<div class="clipboard-content">
<figure class="highlight"><pre><code class="language-html" data-lang="html"> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-fluid py-5"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-8 col-sm-offset-1"</span><span class="nt">></span>
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"context--copy"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"h4 mb-1"</span><span class="nt">></span>Our Story<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"domd readable-line"</span><span class="nt">></span>It's Time To Reboot The Black Tie<span class="ni">&nbsp;</span>Experience<span class="nt"></div></span>
<span class="nt"></h1></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-10 col-sm-offset-1 col-lg-8 col-lg-offset-2 body-copy"</span><span class="nt">></span>
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"context--copy"</span><span class="nt">></span>Section Title - Headline Level<span class="ni">&nbsp;</span>Two<span class="nt"></h2></span>
<span class="nt"><p></span>
When it comes to the traditional brick-and-mortar, laminated-catalog, outdated-inventory, advertise-low-and-get-upsold-in-the-store tuxedo rental experience, we are seriously questioning the status quo. And you should<span class="ni">&nbsp;</span>too.
<span class="nt"></p></span>
<span class="nt"><p></span>
At Generation Tux, we believe your entire black tie experience should be worthy of the special day you need us for. We’re the first company to dedicate itself to overhauling and improving every aspect of making sure you look amazing for your memorable
event.
<span class="nt"></p></span>
<span class="nt"><p></span>
Inspired by our visionary founder, George Zimmer, we are a collective of experienced, open-minded, and forward-thinking fashion lovers, engineering geeks,and digital junkies who understand that when you look great, you feel awesome—and then joy happens.
<span class="nt"></p></span>
<span class="nt"><h3</span> <span class="na">class=</span><span class="s">"context--copy"</span><span class="nt">></span> Sub Section Headline H3<span class="nt"></h3></span>
<span class="nt"><p></span>
When it comes to the traditional brick-and-mortar, laminated-catalog, outdated-inventory, advertise-low-and-get-upsold-in-the-store tuxedo rental experience, we are seriously questioning the status quo. And you should<span class="ni">&nbsp;</span>too.
<span class="nt"></p></span>
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"context--copy"</span><span class="nt">></span> Sub Sub Section Headline H4<span class="nt"></h4></span>
<span class="nt"><p></span>
At Generation Tux, we believe your entire black tie experience should be worthy of the special day you need us for. We’re the first company to dedicate itself to overhauling and improving every aspect of making sure you look amazing for your memorable
event.
<span class="nt"></p></span>
<span class="nt"><p></span>
Inspired by our visionary founder, George Zimmer, we are a collective of experienced, open-minded, and forward-thinking fashion lovers, engineering geeks,and digital junkies who understand that when you look great, you feel awesome—and then joy happens.
<span class="nt"></p></span>
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"context--copy"</span><span class="nt">></span> Sub Sub Section Headline H5<span class="nt"></h5></span>
<span class="nt"><p></span>
At Generation Tux, we believe your entire black tie experience should be worthy of the special day you need us for. We’re the first company to dedicate itself to overhauling and improving every aspect of making sure you look amazing for your memorable
event.
<span class="nt"></p></span>
<span class="nt"><h6</span> <span class="na">class=</span><span class="s">"context--copy uppercase"</span><span class="nt">></span> Sub Sub Section Headline H6<span class="nt"></h6></span>
<span class="nt"><p></span>
Inspired by our visionary founder, George Zimmer, we are a collective of experienced, open-minded, and forward-thinking fashion lovers, engineering geeks,and digital junkies who understand that when you look great, you feel awesome—and then joy happens.
<span class="nt"></p></span>
<span class="nt"><h3</span> <span class="na">class=</span><span class="s">"context--copy"</span><span class="nt">></span> This is a longer H3 Sub Section headline that will stretch a little further<span class="nt"></h3></span>
<span class="nt"><p></span>
When it comes to the traditional brick-and-mortar, laminated-catalog, outdated-inventory, advertise-low-and-get-upsold-in-the-store tuxedo rental experience, we are seriously questioning the status quo. And you should<span class="ni">&nbsp;</span>too.
<span class="nt"></p></span>
<span class="nt"><p></span>
At Generation Tux, we believe your entire black tie experience should be worthy of the special day you need us for. We’re the first company to dedicate itself to overhauling and improving every aspect of making sure you look amazing for your memorable
event.
<span class="nt"></p></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>Ut wisi enim ad minim veniam, quis nostrud exerci tation<span class="nt"></li></span>
<span class="nt"><li></span>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><p></span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla<span class="ni">&nbsp;</span>facilisi.
<span class="nt"></p></span>
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"context--copy uppercase"</span><span class="nt">></span>New Headline Level<span class="ni">&nbsp;</span>2<span class="nt"></h2></span>
<span class="nt"><h3</span> <span class="na">class=</span><span class="s">"context--copy"</span><span class="nt">></span> Sub Section Headline H3<span class="nt"></h3></span>
<span class="nt"><p></span>
When it comes to the traditional brick-and-mortar, laminated-catalog, outdated-inventory, advertise-low-and-get-upsold-in-the-store tuxedo rental experience, we are seriously questioning the status quo. And you should<span class="ni">&nbsp;</span>too.
<span class="nt"></p></span>
<span class="nt"><p></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"context--copy copy-block img-responsive"</span> <span class="na">src=</span><span class="s">"http://placehold.it/900x300"</span><span class="nt">></span>
<span class="nt"></p></span>
<span class="nt"><p></span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla<span class="ni">&nbsp;</span>facilisi.
<span class="nt"></p></span>
<span class="nt"><ul></span>
<span class="nt"><li></span>Ut wisi enim ad minim veniam, quis nostrud exerci tation<span class="nt"></li></span>
<span class="nt"><li></span>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"><p><img</span> <span class="na">class=</span><span class="s">"context--copy copy-block img-responsive"</span> <span class="na">src=</span><span class="s">"http://placehold.it/900x300"</span><span class="nt">></p></span>
<span class="nt"><h3</span> <span class="na">class=</span><span class="s">"context--copy"</span><span class="nt">></span> Sub Section Headline H3<span class="nt"></h3></span>
<span class="nt"><p></span>
When it comes to the traditional brick-and-mortar, laminated-catalog, outdated-inventory, advertise-low-and-get-upsold-in-the-store tuxedo rental experience, we are seriously questioning the status quo. And you should<span class="ni">&nbsp;</span>too.
<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-4"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"context--copy img-responsive"</span> <span class="na">src=</span><span class="s">"http://placehold.it/300"</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-8"</span><span class="nt">></span>
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"context--copy"</span><span class="nt">></span>Section Title - Headline Level<span class="ni">&nbsp;</span>Two<span class="nt"></h4></span>
<span class="nt"><p></span>
When it comes to the traditional brick-and-mortar, laminated-catalog, outdated-inventory, advertise-low-and-get-upsold-in-the-store tuxedo rental experience, we are seriously questioning the status quo. And you should<span class="ni">&nbsp;</span>too.
<span class="nt"></p></span>
<span class="nt"><p></span>
At Generation Tux, we believe your entire black tie experience should be worthy of the special day you need us for. We’re the first company to dedicate itself to overhauling and improving every aspect of making sure you look amazing for your memorable
event.
<span class="nt"></p></span>
<span class="nt"><p></span>
Inspired by our visionary founder, George Zimmer, we are a collective of experienced, open-minded, and forward-thinking fashion lovers, engineering geeks,and digital junkies who understand that when you look great, you feel awesome—and then joy happens.
<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><p></span>
When it comes to the traditional brick-and-mortar, laminated-catalog, outdated-inventory, advertise-low-and-get-upsold-in-the-store tuxedo rental experience, we are seriously questioning the status quo. And you should<span class="ni">&nbsp;</span>too.
<span class="nt"></p></span>
<span class="nt"><h2</span> <span class="na">class=</span><span class="s">"context--copy uppercase text-center"</span><span class="nt">></span>New Section<span class="nt"></h2></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-center"</span><span class="nt">></span>
Inspired by our visionary founder, George Zimmer, we are a collective of experienced, open-minded, and forward-thinking fashion lovers, engineering geeks,and digital junkies who understand that when you look great, you feel awesome—and then joy happens.
<span class="nt"></p></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-4 text-center"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"mt-4 mb-3 text-center img-responsive"</span> <span class="na">src=</span><span class="s">"http://placehold.it/100"</span><span class="nt">></span>
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"uppercase"</span><span class="nt">></span>Foobar<span class="nt"></h5></span>
<span class="nt"><p></span> This is the item description<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-4 text-center"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"mt-4 mb-3 text-center img-responsive"</span> <span class="na">src=</span><span class="s">"http://placehold.it/100"</span><span class="nt">></span>
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"uppercase"</span><span class="nt">></span>Foobar<span class="nt"></h5></span>
<span class="nt"><p></span> This is the item description<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-4 text-center"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"mt-4 mb-3 text-center img-responsive"</span> <span class="na">src=</span><span class="s">"http://placehold.it/100"</span><span class="nt">></span>
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"uppercase"</span><span class="nt">></span>Foobar<span class="nt"></h5></span>
<span class="nt"><p></span> This is the item description<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><h3</span> <span class="na">class=</span><span class="s">"context--copy"</span><span class="nt">></span>Section <span class="nt"></h3></span>
<span class="nt"><p></span>
Inspired by our visionary founder, George Zimmer, we are a collective of experienced, open-minded, and forward-thinking fashion lovers, engineering geeks,and digital junkies who understand that when you look great, you feel awesome—and then joy happens.
<span class="nt"></p></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span><span class="c"><!-- /container --></span> </code></pre></figure>
</div>
<div class="clipboard-init btn btn-primary mt-3">Copy to Clipboard</div>
</div>
</div><!-- /col -->
<div class="col-sm-5">
<h4 class="mb-3">View Module on it's own page:</h4>
<a href="/modules/typography-demo.html" class="btn btn-primary">Open Module</a>
</div><!-- /col -->
</div><!--/row-->
</div><!--/shadow-->
</div><!--/col-->
</div><!-- /row -->
</div><!-- /container -->
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /container -->
<div class="container-fluid">
<div class="row">
<div class="
col-sm-7 col-sm-offset-3
col-lg-6 col-lg-offset-3
">
<h2 class="domd
mt-5 mt-md-5
mb-4
">Next Steps
</h2>
</div><!-- /col -->
</div><!-- /row -->
<div class="row">
<div class="
col-sm-8 col-sm-offset-3
col-lg-6 col-lg-offset-3
">
<a href="/atoms/" class="
panel-link
link-style-clear d-block
p-4
mb-4
">
<h3 class="h4">Atoms</h3>
<p>The core building blocks. Think typography, colors, buttons, etc.</p>
<div class="text-right"><span class="glyphicon glyphicon-arrow-right"></span></div>
</a>
</div>
</div>
</div><!-- /container -->
</body>
<div class="
container
mt-6
pt-3
pb-6
bordered-top bordered-lighter
">
<div class="row">
<div class="col-sm-12">
<p class="small">Created by the design team at <a href="https://generationtux.com">Generation Tux.</a> Visit us on <a href="https://dribbble.com/gtux">Dribbble</a>.</p>
</div>
</div>
</div>
<script src="/js/app.js"></script>
</html>