<div class="c-search-results">
<div class="o-container c-search-results__header">
<div class="o-row">
<div class="c-search-results__header o-col o-col-sm-10 o-col-sm--offset-1">
<h2 class="u-sr-only">Search Form</h2>
<form class="c-search-results__form">
<label class="c-search-results__label f-text--large f-bold" for="search-form-input">Search</label>
<div class="c-search-results__form-inner">
<input id="search-form-input" class="c-search-results__input" type="text" name="s" value="Sloths" placeholder="Search the site" />
<button class="c-search-results__form-submit">
<span class="u-sr-only">Submit search</span>
<span class="c-search-results__form-icon" aria-hidden="true">
<svg width="14" height="14" viewbox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="u-ct-stroke" d="M6.90519 12.5466C10.1665 12.5466 12.8104 9.96179 12.8104 6.77329C12.8104 3.58479 10.1665 1 6.90519 1C3.64383 1 1 3.58479 1 6.77329C1 9.96179 3.64383 12.5466 6.90519 12.5466Z" class="u-ct-stroke" stroke-width="1.5" stroke-miterlimit="10" />
<path class="u-ct-stroke" d="M11.0859 10.8608L15.9998 15.6649" class="u-ct-stroke" stroke-width="1.5" stroke-miterlimit="10" />
</svg>
</span>
</button>
</div>
</form>
<h2 class="u-sr-only">Search Results</h2>
<p class="c-search-results__results-count">62 results</span>
</div>
<ul class="c-search-results__results o-col o-col-sm-8 o-col-sm--offset-2" aria-label="Search Results">
<li class="c-search-results__result">
<p class="c-search-results__result-eyebrow f-tag f-upper f-spaced">Resource</p>
<h3 class="c-search-results__result-title f-bold">
<a href="#" class="u-hover-drawline">Walk Like a Sloth</a>
</h3>
<p class="c-search-results__result-description f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor elit a urna dictum, eget accumsan diam consequat. Mauris pretium ut nunc nec pretium.</p>
</li>
<li class="c-search-results__result">
<p class="c-search-results__result-eyebrow f-tag f-upper f-spaced">Exhibit</p>
<h3 class="c-search-results__result-title f-bold">
<a href="#" class="u-hover-drawline">Survival of the Slowest</a>
</h3>
<p class="c-search-results__result-description f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor elit a urna dictum, eget accumsan diam consequat. Mauris pretium ut nunc nec pretium.</p>
<p class="c-search-results__result-date f-text--time">Opening Month DD, YYYY</p>
</li>
<li class="c-search-results__result">
<p class="c-search-results__result-eyebrow f-tag f-upper f-spaced">Article</p>
<h3 class="c-search-results__result-title f-bold">
<a href="#" class="u-hover-drawline">Musings on Survival</a>
</h3>
<p class="c-search-results__result-description f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor elit a urna dictum, eget accumsan diam consequat. Mauris pretium ut nunc nec pretium.</p>
<div class="c-search-results__tags">
<a class="c-tag f-text--tag" href=#>Topic tag</a>
</div>
</li>
<li class="c-search-results__result">
<p class="c-search-results__result-eyebrow f-tag f-upper f-spaced">Resource</p>
<h3 class="c-search-results__result-title f-bold">
<a href="#" class="u-hover-drawline">Sippin' with sloths</a>
</h3>
<p class="c-search-results__result-description f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor elit a urna dictum, eget accumsan diam consequat. Mauris pretium ut nunc nec pretium.</p>
</li>
<li class="c-search-results__result">
<p class="c-search-results__result-eyebrow f-tag f-upper f-spaced">Page</p>
<h3 class="c-search-results__result-title f-bold">
<a href="#" class="u-hover-drawline">Sloth Studies</a>
</h3>
<p class="c-search-results__result-description f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor elit a urna dictum, eget accumsan diam consequat. Mauris pretium ut nunc nec pretium.</p>
</li>
<li class="c-search-results__result">
<p class="c-search-results__result-eyebrow f-tag f-upper f-spaced">Article</p>
<h3 class="c-search-results__result-title f-bold">
<a href="#" class="u-hover-drawline">Walk Like a Sloth</a>
</h3>
<p class="c-search-results__result-description f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor elit a urna dictum, eget accumsan diam consequat. Mauris pretium ut nunc nec pretium.</p>
</li>
<li class="c-search-results__result">
<p class="c-search-results__result-eyebrow f-tag f-upper f-spaced">Event</p>
<h3 class="c-search-results__result-title f-bold">
<a href="#" class="u-hover-drawline">Sippin' with sloths</a>
</h3>
<p class="c-search-results__result-description f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor elit a urna dictum, eget accumsan diam consequat. Mauris pretium ut nunc nec pretium.</p>
<p class="c-search-results__result-date f-text--time">Wednesday, October 27, 2021</p>
</li>
<li class="c-search-results__result">
<p class="c-search-results__result-eyebrow f-tag f-upper f-spaced">Page</p>
<h3 class="c-search-results__result-title f-bold">
<a href="#" class="u-hover-drawline">Sloth Studies</a>
</h3>
<p class="c-search-results__result-description f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor elit a urna dictum, eget accumsan diam consequat. Mauris pretium ut nunc nec pretium.</p>
</li>
<li class="c-search-results__result">
<p class="c-search-results__result-eyebrow f-tag f-upper f-spaced">Article</p>
<h3 class="c-search-results__result-title f-bold">
<a href="#" class="u-hover-drawline">Musings on Survival</a>
</h3>
<p class="c-search-results__result-description f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor elit a urna dictum, eget accumsan diam consequat. Mauris pretium ut nunc nec pretium.</p>
<div class="c-search-results__tags">
<a class="c-tag f-text--tag" href=#>Topic tag</a>
</div>
</li>
<li class="c-search-results__result">
<p class="c-search-results__result-eyebrow f-tag f-upper f-spaced">Press Release</p>
<h3 class="c-search-results__result-title f-bold">
<a href="#" class="u-hover-drawline">Sloths are just cool. Plain and simple.</a>
</h3>
<p class="c-search-results__result-description f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor elit a urna dictum, eget accumsan diam consequat. Mauris pretium ut nunc nec pretium.</p>
</li>
</ul>
<div class="c-search-results__pagination o-col o-col-sm-8 o-col-sm--offset-2">
<div class="o-pagination">
<nav class="o-pagination__nav" aria-label="Pagination">
<ul class="o-pagination__items" aria-label="Pagination links">
<li class="o-pagination__item">
<a href="#1" class="o-pagination__link" aria-current="page" aria-label="Current Page - Page 1">1</a>
</li>
<li class="o-pagination__item">
<a href="#2" class="o-pagination__link" aria-label="Page 2">2</a>
</li>
<li class="o-pagination__item">
<a href="#3" class="o-pagination__link" aria-label="Page 3">3</a>
</li>
<li class="o-pagination__item">
<a href="#4" class="o-pagination__link" aria-label="Page 4">4</a>
</li>
<li class="o-pagination__item o-pagination__item--elipsis">
<span class="o-pagination__elipsis"> … </span>
</li>
<li class="o-pagination__item">
<a href="#11" class="o-pagination__link" aria-label="Page 11">11</a>
</li>
</ul>
<div class="o-pagination__next">
<a href="#next" class="o-pagination__dir-link">
<span class="u-sr-only">Next Page</span>
<span class="o-pagination__dir-icon" aria-hidden="true">
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L6 6L1 11" class="u-ct-stroke" />
</svg>
</span>
</a>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="c-search-results">
<div class="o-container c-search-results__header">
<div class="o-row">
<div class="c-search-results__header o-col o-col-sm-10 o-col-sm--offset-1">
<h2 class="u-sr-only">Search Form</h2>
<form class="c-search-results__form">
<label class="c-search-results__label f-text--large f-bold" for="search-form-input">Search</label>
<div class="c-search-results__form-inner">
<input id="search-form-input" class="c-search-results__input" type="text" name="s" value="{{ searchValue }}" placeholder="Search the site" />
<button class="c-search-results__form-submit">
<span class="u-sr-only">Submit search</span>
<span class="c-search-results__form-icon" aria-hidden="true">
{% include "03-icons/search" %}
</span>
</button>
</div>
</form>
<h2 class="u-sr-only">Search Results</h2>
<p class="c-search-results__results-count">{{ resultsCount }} results</span>
</div>
<ul class="c-search-results__results o-col o-col-sm-8 o-col-sm--offset-2" aria-label="Search Results">
{% for result in results %}
<li class="c-search-results__result">
<p class="c-search-results__result-eyebrow f-tag f-upper f-spaced">{{ result.eyebrow }}</p>
<h3 class="c-search-results__result-title f-bold">
<a href="{{ result.link }}" class="u-hover-drawline">{{ result.title }}</a>
</h3>
<p class="c-search-results__result-description f-text--small">{{ result.description }}</p>
{% if result.tagLink %}
<div class="c-search-results__tags">
{% include "04-objects/tag" with result.tagLink %}
</div>
{% endif %}
{% if result.date %}
<p class="c-search-results__result-date f-text--time">{{ result.date }}</p>
{% endif %}
</li>
{% endfor %}
</ul>
{% if pagination %}
<div class="c-search-results__pagination o-col o-col-sm-8 o-col-sm--offset-2">
{% include "04-objects/pagination" with pagination %}
</div>
{% endif %}
</div>
</div>
</div>
{
"pageColorTheme": "teal",
"searchValue": "Sloths",
"resultsCount": "62",
"results": [
{
"eyebrow": "Resource",
"title": "Walk Like a Sloth",
"link": "#",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor elit a urna dictum, eget accumsan diam consequat. Mauris pretium ut nunc nec pretium."
},
{
"eyebrow": "Exhibit",
"title": "Survival of the Slowest",
"link": "#",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor elit a urna dictum, eget accumsan diam consequat. Mauris pretium ut nunc nec pretium.",
"date": "Opening Month DD, YYYY"
},
{
"eyebrow": "Article",
"title": "Musings on Survival",
"link": "#",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor elit a urna dictum, eget accumsan diam consequat. Mauris pretium ut nunc nec pretium.",
"tagLink": {
"title": "Topic tag",
"link": "#"
}
},
{
"eyebrow": "Resource",
"title": "Sippin' with sloths",
"link": "#",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor elit a urna dictum, eget accumsan diam consequat. Mauris pretium ut nunc nec pretium."
},
{
"eyebrow": "Page",
"title": "Sloth Studies",
"link": "#",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor elit a urna dictum, eget accumsan diam consequat. Mauris pretium ut nunc nec pretium."
},
{
"eyebrow": "Article",
"title": "Walk Like a Sloth",
"link": "#",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor elit a urna dictum, eget accumsan diam consequat. Mauris pretium ut nunc nec pretium."
},
{
"eyebrow": "Event",
"title": "Sippin' with sloths",
"link": "#",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor elit a urna dictum, eget accumsan diam consequat. Mauris pretium ut nunc nec pretium.",
"date": "Wednesday, October 27, 2021"
},
{
"eyebrow": "Page",
"title": "Sloth Studies",
"link": "#",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor elit a urna dictum, eget accumsan diam consequat. Mauris pretium ut nunc nec pretium."
},
{
"eyebrow": "Article",
"title": "Musings on Survival",
"link": "#",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor elit a urna dictum, eget accumsan diam consequat. Mauris pretium ut nunc nec pretium.",
"tagLink": {
"title": "Topic tag",
"link": "#"
}
},
{
"eyebrow": "Press Release",
"title": "Sloths are just cool. Plain and simple.",
"link": "#",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor elit a urna dictum, eget accumsan diam consequat. Mauris pretium ut nunc nec pretium."
}
],
"pagination": {
"prev": false,
"items": [
{
"title": "1",
"link": "#1",
"isCurrent": true
},
{
"title": "2",
"link": "#2"
},
{
"title": "3",
"link": "#3"
},
{
"title": "4",
"link": "#4"
},
{
"isElipsis": true
},
{
"link": "#11",
"title": "11"
}
],
"next": {
"title": "Next Page",
"link": "#next"
}
}
}
.c-search-results {
margin-top: 3.2rem;
margin-bottom: 6.4rem;
@include break($sm) {
margin-top: 5.4rem;
margin-bottom: 11rem;
}
}
.c-search-results__header {
margin-bottom: 4.8rem;
@include break($sm) {
margin-bottom: 7.2rem;
}
}
.c-search-results__form-inner {
position: relative;
}
.c-search-results__label {
display: block;
margin-bottom: 2.4rem;
}
.c-search-results__input {
display: block;
width: 100%;
height: 4.4rem;
padding: 0 4.4rem 0 2.4rem;
@include text--reg;
border: 0.1rem solid $c-black;
@include break($sm) {
height: 6.4rem;
padding-right: 6.4rem;
}
body:not(.u-keyboard-user) & {
&:active,
&:focus {
border-color: $c-black;
outline: 0;
}
}
}
.c-search-results__form-submit {
height: 4.4rem;
width: 4.4rem;
position: absolute;
top: 0;
right: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s $ease-standard-cubic;
@include break($sm) {
height: 6.4rem;
width: 6.4rem;
}
svg {
width: 1.6rem;
height: auto;
}
&:hover {
background-color: $c-charcoal;
.u-ct-stroke {
stroke: $c-white;
}
}
}
.c-search-results__results-count {
font-size: 1.2rem;
font-style: italic;
margin-top: 2.4rem;
}
.c-search-results__result {
border-top: 0.1rem solid $c-black;
padding-top: 1.5rem;
& + & {
margin-top: 4.8rem;
}
}
.c-search-results__result-eyebrow {
margin-bottom: 2.4rem;
}
.c-search-results__result-title {
margin-bottom: 1rem;
}
.c-search-results__result-tag,
.c-search-results__result-date {
margin-top: 1.6rem;
}
.c-search-results__pagination {
margin-top: 8rem;
}
No notes defined.