Header
This pattern contains:
atoms-logo
HTML
<!-- Begin .header -->
<header>
<div class="logo-container">
<div class="container">
<div class="logo-wrapper clearfix">
<div class="logo">
<a href="#"><img src="../../images/logos/stony-brook-university-logo.jpg" class="logo" alt="Logo Alt Text" /></a>
</div>
<h1 class="site-name"><a href="/">Unity Pattern Lab</a></h1>
</div>
</div>
</div>
</header>
<!-- End .header -->
Footer
All right. Well, take care of yourself, Han
Now that we know who you are, I know
Lorizzle pimpin' dolizzle sit amet I
Carrot cake fruitcake dessert apple
The swallow may fly south with the sun
All right. Well, take care of yourself, Han
Veggies sunt bona vobis, proinde vos
This pattern contains:
molecules-footer-nav
HTML
<div class="top-footer fluffy">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="footer-nav">
<strong>All right. Well, take care of yourself, Han</strong>
<ul><li><a href="{{url}}">Project Management Office</a></li><li><a href="{{url}}">Project Status</a></li><li><a href="{{url}}">Request a Project</a></li></ul>
</div>
</div>
<div class="col-md-3">
<div class="footer-nav">
<strong>Now that we know who you are, I know</strong>
<ul><li><a href="{{url}}">Knowledge Base</a></li><li><a href="{{url}}">Submit a Ticket</a></li><li><a href="{{url}}">Training & Development</a></li></ul>
</div>
</div>
<div class="col-md-3">
<div class="footer-nav">
<strong>Lorizzle pimpin' dolizzle sit amet I</strong>
<ul><li><a href="{{url}}">Provide Feedback</a></li><li><a href="{{url}}">Staff Directory</a></li></ul>
</div>
</div>
<div class="col-md-3">
<div class="footer-nav">
<strong>Carrot cake fruitcake dessert apple</strong>
<ul><li><a href="{{url}}">Knowledge Base</a></li><li><a href="{{url}}">Submit a Ticket</a></li><li><a href="{{url}}">Training & Development</a></li></ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="footer-nav">
<strong>The swallow may fly south with the sun</strong>
<ul><li><a href="{{url}}">Annual Reports</a></li><li><a href="{{url}}">Hot Team Reports</a></li><li><a href="{{url}}">TechQual+ Survey</a></li></ul>
</div>
</div>
<div class="col-md-3">
<div class="footer-nav">
<strong>All right. Well, take care of yourself, Han</strong>
<ul><li><a href="{{url}}">Project Management Office</a></li><li><a href="{{url}}">Project Status</a></li><li><a href="{{url}}">Request a Project</a></li></ul>
</div>
</div>
<div class="col-md-3">
<div class="footer-nav">
<strong>Veggies sunt bona vobis, proinde vos</strong>
<ul><li><a href="{{url}}">Archives</a></li></ul>
</div>
</div>
</div>
</div>
</div>
Shield Footer
All right. Well, take care of yourself, Han
Now that we know who you are, I know
Lorizzle pimpin' dolizzle sit amet I
Carrot cake fruitcake dessert apple
The swallow may fly south with the sun
All right. Well, take care of yourself, Han
Veggies sunt bona vobis, proinde vos
This pattern contains:
molecules-footer-nav
HTML
<div class="shield-footer fluffy">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="footer-nav">
<strong>All right. Well, take care of yourself, Han</strong>
<ul><li><a href="{{url}}">Project Management Office</a></li><li><a href="{{url}}">Project Status</a></li><li><a href="{{url}}">Request a Project</a></li></ul>
</div>
</div>
<div class="col-md-3">
<div class="footer-nav">
<strong>Now that we know who you are, I know</strong>
<ul><li><a href="{{url}}">Knowledge Base</a></li><li><a href="{{url}}">Submit a Ticket</a></li><li><a href="{{url}}">Training & Development</a></li></ul>
</div>
</div>
<div class="col-md-3">
<div class="footer-nav">
<strong>Lorizzle pimpin' dolizzle sit amet I</strong>
<ul><li><a href="{{url}}">Provide Feedback</a></li><li><a href="{{url}}">Staff Directory</a></li></ul>
</div>
</div>
<div class="col-md-3">
<div class="footer-nav">
<strong>Carrot cake fruitcake dessert apple</strong>
<ul><li><a href="{{url}}">Knowledge Base</a></li><li><a href="{{url}}">Submit a Ticket</a></li><li><a href="{{url}}">Training & Development</a></li></ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="footer-nav">
<strong>The swallow may fly south with the sun</strong>
<ul><li><a href="{{url}}">Annual Reports</a></li><li><a href="{{url}}">Hot Team Reports</a></li><li><a href="{{url}}">TechQual+ Survey</a></li></ul>
</div>
</div>
<div class="col-md-3">
<div class="footer-nav">
<strong>All right. Well, take care of yourself, Han</strong>
<ul><li><a href="{{url}}">Project Management Office</a></li><li><a href="{{url}}">Project Status</a></li><li><a href="{{url}}">Request a Project</a></li></ul>
</div>
</div>
<div class="col-md-3">
<div class="footer-nav">
<strong>Veggies sunt bona vobis, proinde vos</strong>
<ul><li><a href="{{url}}">Archives</a></li></ul>
</div>
</div>
</div>
</div>
</div>
Bottom Footer
This pattern contains:
molecules-social-links
HTML
<div class="bottom-footer">
<div class="social-links">
<h3>Connect with @SBUDoIT</h3>
<a href="#" class="social-link social-link--facebook">
<span class="sr-only">Facebook</span>
</a>
<a href="#" class="social-link social-link--twitter">
<span class="sr-only">Twitter</span>
</a>
<a href="#" class="social-link social-link--youtube">
<span class="sr-only">YouTube</span>
</a>
<a href="#" class="social-link social-link--flickr">
<span class="sr-only">Flickr</span>
</a>
<a href="#" class="social-link social-link--instagram">
<span class="sr-only">Instagram</span>
</a>
<a href="#" class="social-link social-link--yammer">
<span class="sr-only">Yammer</span>
</a>
</p>
</div>
</div>