Search Results
The search results template is different from other templates due to the lack of a page-footer.
The footer is not present because most users will be searching on terms that return so many results that the user will not scroll through all of them. So teasing them with a footer element that is always just out of reach would lead to a poor user experience. Because when the user scrolls to the bottom of the page, more results are loaded - pushing the footer further out of reach.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/site.css">
<title>search-results</title>
<!-- start `favicon` component;-->
<link rel="apple-touch-icon" sizes="180x180" href="../images/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" href="../images/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="../images/favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="../images/favicons/manifest.json">
<link rel="mask-icon" href="../images/favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<!-- end `favicon` component;-->
<meta name="description" content="">
<meta property="og:title" content="search-results">
<meta property="og:type" content="website">
<meta property="og:image" content="">
<meta property="og:description" content="">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:300,400,500,700">
</head>
<body>
<!-- start `skip-nav` component; -->
<nav class="skip-nav"><a href="#main">Skip to main content</a></nav>
<!-- end `skip-nav` component; -->
<!-- start `page-header` component;-->
<header class="page-header">
<div class="page-header__banner">
<div class="page-header__logo"><img src="../images/page-header/acme__logo.png" alt="ACME Logo"></div>
</div>
</header>
<!-- end `page-header` component; -->
<!-- start `site-nav` component;-->
<nav class="site-nav">
<button class="site-nav__button site-nav__button-icon site-nav__button-icon--open">
<svg class="icon-bars">
<title>Open Site Navigation Panel</title>
<use xlink:href="../images/icons/icons.svg#icon-bars"></use>
</svg>
</button>
<nav class="site-nav__drawer">
<div class="site-nav__section"><a href="#">Home</a>
</div>
<div class="site-nav__section">
<button class="site-nav__button site-nav__button-toggle"><span>Customer Service</span>
<svg class="icon-angle-down">
<use xlink:href="../images/icons/icons.svg#icon-angle-down"></use>
</svg>
</button>
<div class="site-nav__sub-sections">
<div class="site-nav__sub-section">
<p>SITE INFORMATION</p>
<div class="site-nav__links"><a href="#">Contact Us</a><a href="#">About Us</a><a href="#">Store</a><a href="#">RSS Feeds</a><a href="#">Special Sections</a>
</div>
</div>
<div class="site-nav__sub-section">
<p>ADVERTISE</p>
<div class="site-nav__links"><a href="#">Advertise with Us</a><a href="#">Media Kit</a>
</div>
</div>
<div class="site-nav__sub-section">
<p>MOBILE</p>
<div class="site-nav__links"><a href="#">Mobile Apps & eReaders</a><a href="#">Newsletters</a>
</div>
</div>
<div class="site-nav__sub-section">
<p>SOCIAL</p>
<div class="site-nav__links"><a href="#">Facebook</a><a href="#">Twitter</a><a href="#">Instagram</a><a href="#">YouTube</a>
</div>
</div>
</div>
</div>
<div class="site-nav__section">
<button class="site-nav__button site-nav__button-toggle"><span>News</span>
<svg class="icon-angle-down">
<use xlink:href="../images/icons/icons.svg#icon-angle-down"></use>
</svg>
</button>
<div class="site-nav__sub-sections">
<div class="site-nav__sub-section">
<p>SECTIONS</p>
<div class="site-nav__links"><a href="#">News</a><a href="#">Politics</a><a href="#">Weather</a>
</div>
</div>
<div class="site-nav__sub-section">
<p>NATIONAL & WORLD</p>
<div class="site-nav__links"><a href="#">National</a><a href="#">World</a><a href="#">Americas</a>
</div>
</div>
<div class="site-nav__sub-section">
<p>LOCAL ISSUES</p>
<div class="site-nav__links"><a href="#">Crime</a><a href="#">Education</a><a href="#">Environment</a><a href="#">Traffic</a>
</div>
</div>
</div>
</div>
<div class="site-nav__section">
<button class="site-nav__button site-nav__button-toggle"><span>Sports</span>
<svg class="icon-angle-down">
<use xlink:href="../images/icons/icons.svg#icon-angle-down"></use>
</svg>
</button>
<div class="site-nav__sub-sections">
<div class="site-nav__sub-section">
<p>SECTIONS</p>
<div class="site-nav__links"><a href="#">Sports</a><a href="#">Blogs & Columnists</a>
</div>
</div>
<div class="site-nav__sub-section">
<p>PRO & COLLEGEs</p>
<div class="site-nav__links"><a href="#">Miami Dolphins</a><a href="#">Miami Heat</a><a href="#">Miami Marlins</a><a href="#">Florida Panthers</a><a href="#">College Sports</a>
</div>
</div>
<div class="site-nav__sub-section">
<p>MORE SPORTS</p>
<div class="site-nav__links"><a href="#">High School Sports</a><a href="#">Auto Racing</a><a href="#">Fighting</a><a href="#">Golf</a><a href="#">Soccer</a><a href="#">Tennis</a>
</div>
</div>
</div>
</div>
<div class="site-nav__section">
<button class="site-nav__button site-nav__button-toggle"><span>Politics</span>
<svg class="icon-angle-down">
<use xlink:href="../images/icons/icons.svg#icon-angle-down"></use>
</svg>
</button>
<div class="site-nav__links"><a href="#">Politics</a><a href="#">Elections</a>
</div>
</div>
<div class="site-nav__section">
<button class="site-nav__button site-nav__button-toggle"><span>Business</span>
<svg class="icon-angle-down">
<use xlink:href="../images/icons/icons.svg#icon-angle-down"></use>
</svg>
</button>
<div class="site-nav__links"><a href="#">Business</a><a href="#">Banking</a><a href="#">International Business</a><a href="#">Personal Finance</a><a href="#">Real Estate News</a>
</div>
</div>
<div class="site-nav__section">
<button class="site-nav__button site-nav__button-toggle"><span>Living</span>
<svg class="icon-angle-down">
<use xlink:href="../images/icons/icons.svg#icon-angle-down"></use>
</svg>
</button>
<div class="site-nav__sub-sections">
<div class="site-nav__sub-section">
<p>SECTIONS</p>
<div class="site-nav__links"><a href="#">Living</a><a href="#">Advice</a><a href="#">Fashion</a><a href="#">Health & Fitness</a><a href="#">Home & Garden</a><a href="#">Travel</a>
</div>
</div>
</div>
</div>
<div class="site-nav__section">
<button class="site-nav__button site-nav__button-toggle"><span>Entertainment</span>
<svg class="icon-angle-down">
<use xlink:href="../images/icons/icons.svg#icon-angle-down"></use>
</svg>
</button>
<div class="site-nav__sub-sections">
<div class="site-nav__sub-section">
<p>SECTIONS</p>
<div class="site-nav__links"><a href="#">Entertainment</a><a href="#">Books</a><a href="#">Games & Puzzles</a><a href="#">Movies</a><a href="#">Performing Arts</a>
</div>
</div>
<div class="site-nav__sub-section">
<p>MORE ENTERTAINMENT</p>
<div class="site-nav__links"><a href="#">Events Calendar</a><a href="#">Contests & Promotions</a>
</div>
</div>
</div>
</div>
<button class="site-nav__button site-nav__button-icon site-nav__button-icon--close">
<svg class="icon-times">
<title>Close Site Navigation Panel</title>
<use xlink:href="../images/icons/icons.svg#icon-times"></use>
</svg>
</button>
</nav>
</nav>
<!-- end `site-nav` component; -->
<main class="container" id="main">
<!-- start `search-results` component;-->
<div class="search-results" data-next="../json/search-results/search-results-2.json">
<div class="search-results__title">
<h1>120 Results were found for “foo-bar-baz”</h1>
</div>
<div class="search-results__stories">
<!-- start `card` component; -->
<article class="card card--overlay"><a href="#">
<div class="img-cover"><img src="http://via.placeholder.com/320x320" alt="empty placeholder image"></div>
<h2>Curabitur in ligula viverra sagittis nunc et</h2></a></article>
<!-- end `card` component; -->
<!-- start `card` component; -->
<article class="card card--overlay"><a href="#">
<div class="img-cover"><img src="http://via.placeholder.com/320x320" alt="empty placeholder image"></div>
<h2>Ut ut nunc a odio blandit ultrices ac sed purus</h2></a></article>
<!-- end `card` component; -->
<!-- start `card` component; -->
<article class="card card--overlay"><a href="#">
<div class="img-cover"><img src="http://via.placeholder.com/320x320" alt="empty placeholder image"></div>
<h2>Vestibulum ut lectus sit amet tortor mollis</h2></a></article>
<!-- end `card` component; -->
<!-- start `card` component; -->
<article class="card card--overlay"><a href="#">
<div class="img-cover"><img src="http://via.placeholder.com/320x320" alt="empty placeholder image"></div>
<h2>Quisque vitae lacus non purus efficitur</h2></a></article>
<!-- end `card` component; -->
<!-- start `card` component; -->
<article class="card card--overlay"><a href="#">
<div class="img-cover"><img src="http://via.placeholder.com/320x320" alt="empty placeholder image"></div>
<h2>Mauris ut diam eu diam commodo ornare et</h2></a></article>
<!-- end `card` component; -->
<!-- start `card` component; -->
<article class="card card--overlay"><a href="#">
<div class="img-cover"><img src="http://via.placeholder.com/320x320" alt="empty placeholder image"></div>
<h2>Fusce ac leo eget lorem eleifend fringilla</h2></a></article>
<!-- end `card` component; -->
<!-- start `card` component; -->
<article class="card card--overlay"><a href="#">
<div class="img-cover"><img src="http://via.placeholder.com/320x320" alt="empty placeholder image"></div>
<h2>Maecenas volutpat augue sed elementum</h2></a></article>
<!-- end `card` component; -->
<!-- start `card` component; -->
<article class="card card--overlay"><a href="#">
<div class="img-cover"><img src="http://via.placeholder.com/320x320" alt="empty placeholder image"></div>
<h2>Sed quis diam a tortor tempor hendrerit</h2></a></article>
<!-- end `card` component; -->
<!-- start `card` component; -->
<article class="card card--overlay"><a href="#">
<div class="img-cover"><img src="http://via.placeholder.com/320x320" alt="empty placeholder image"></div>
<h2>Aliquam consectetur ipsum eget turpis</h2></a></article>
<!-- end `card` component; -->
<!-- start `card` component; -->
<article class="card card--overlay"><a href="#">
<div class="img-cover"><img src="http://via.placeholder.com/320x320" alt="empty placeholder image"></div>
<h2>Volutpat augue sed ele mentum maecenas</h2></a></article>
<!-- end `card` component; -->
<!-- start `card` component; -->
<article class="card card--overlay"><a href="#">
<div class="img-cover"><img src="http://via.placeholder.com/320x320" alt="empty placeholder image"></div>
<h2>Diam a tortor tempor hend rerit sed quis</h2></a></article>
<!-- end `card` component; -->
<!-- start `card` component; -->
<article class="card card--overlay"><a href="#">
<div class="img-cover"><img src="http://via.placeholder.com/320x320" alt="empty placeholder image"></div>
<h2>Ipsum eget turpis aliquam conse ctetur</h2></a></article>
<!-- end `card` component; -->
<!-- start `card` component; -->
<article class="card card--overlay"><a href="#">
<div class="img-cover"><img src="http://via.placeholder.com/320x320" alt="empty placeholder image"></div>
<h2>Cras sollicitudin sapien et odio venenatis</h2></a></article>
<!-- end `card` component; -->
<!-- start `card` component; -->
<article class="card card--overlay"><a href="#">
<div class="img-cover"><img src="http://via.placeholder.com/320x320" alt="empty placeholder image"></div>
<h2>Nulla interdum turpis sit amet feugiat faucibus</h2></a></article>
<!-- end `card` component; -->
<!-- start `card` component; -->
<article class="card card--overlay"><a href="#">
<div class="img-cover"><img src="http://via.placeholder.com/320x320" alt="empty placeholder image"></div>
<h2>Pellentesque laoreet urna non interdum egestas</h2></a></article>
<!-- end `card` component; -->
<div class="search-results__card-loading">
<div class="icon-container">
<svg class="icon-spin-alt">
<use xlink:href="../images/icons/icons.svg#icon-spin-alt"></use>
</svg>
</div>
</div>
</div>
<script id="search-results__card-template" type="text/x-custom-template">
<!-- start `card` component; -->
<article class="card card--overlay"><a>
<div class="img-cover"><img></div>
<h3></h3></a></article>
<!-- end `card` component; -->
</script>
</div>
<!-- end `search-results` component; -->
</main>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="../js/site.js"></script>
</body>
</html>