<div class="search-listing">
<form role="search" method="get" id="page-search-form" class="quick-search__form search-listing__search" action="">
<input id="page-search-input" name="s" type="text" placeholder="Search the site" class="quick-search__input " value="search test">
<label for="page-search-input" class="quick-search__input-label">
Search the website
</label>
<button type="submit" class="quick-search__button" id="page-search-submit">
<svg role="none" aria-hidden="true" class="search-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>search</title>
<path class="_mark" fill="inherit" d="M6 12A6 6 0 116 0a6 6 0 010 12zm0-2a4 4 0 100-8 4 4 0 000 8zm5.293 2.707a1 1 0 011.414-1.414l3 3a1 1 0 01-1.414 1.414l-3-3z" />
</svg>
</button>
</form>
<div class="search-listing__results-header">
<div class="search-listing__results">
6 search results
<span class="search-listing__search-string">for "search test" </span>
</div>
</div>
<ul class="search-listing__posts">
<li class="search-listing__posts-item">
<div class="search-card">
<div class="search-card__content">
<span class="search-card__item-type">
<div class="metadata-eyebrow-small">
<div class="metadata-eyebrow-small__type">
<div class="metadata-eyebrow-small__type__label">
event
</div>
</div>
</div>
</span>
<a class="linked-text-with-icon linked-text-with-icon--headline5" href="#">Lorem nibh felis adipiscing varius adipiscing in lacinia vel tellus urna<span class="linked-text-with-icon__chevron-icon">
<svg role="img" class="right-chevron" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" viewBox="0 0 8 12">
<title>right chevron</title>
<path class="_mark right-chevron__shape" d="M4.50496 5.98003L0.00107202 0.0064757L0.00964937 2.55136e-07L3.49611 5.59932e-07L8 5.97463L3.48968 12L-9.53674e-07 12L4.50496 5.98003Z" />
</svg>
</span></a>
<div class="search-card__snippet">
</div>
</div>
</div>
</li>
<li class="search-listing__posts-item">
<div class="search-card">
<div class="search-card__content">
<span class="search-card__item-type">
<div class="metadata-eyebrow-small">
<div class="metadata-eyebrow-small__type">
<div class="metadata-eyebrow-small__type__label">
blog
</div>
</div>
</div>
</span>
<a class="linked-text-with-icon linked-text-with-icon--headline5" href="#">Lorem nibh felis adipiscing varius adipiscing in lacinia vel tellus urna<span class="linked-text-with-icon__chevron-icon">
<svg role="img" class="right-chevron" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" viewBox="0 0 8 12">
<title>right chevron</title>
<path class="_mark right-chevron__shape" d="M4.50496 5.98003L0.00107202 0.0064757L0.00964937 2.55136e-07L3.49611 5.59932e-07L8 5.97463L3.48968 12L-9.53674e-07 12L4.50496 5.98003Z" />
</svg>
</span></a>
<div class="search-card__snippet">
Sunt sunt dolore velit consectetur ipsum cupidatat. Dolore, velit consectetur ipsum cupidatat irure.
</div>
</div>
</div>
</li>
<li class="search-listing__posts-item">
<div class="search-card">
<div class="search-card__content">
<span class="search-card__item-type">
<div class="metadata-eyebrow-small">
<div class="metadata-eyebrow-small__type">
<div class="metadata-eyebrow-small__type__label">
profile
</div>
</div>
</div>
</span>
<a class="linked-text-with-icon linked-text-with-icon--headline5" href="#">Wendy D. Sanchez<span class="linked-text-with-icon__chevron-icon">
<svg role="img" class="right-chevron" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" viewBox="0 0 8 12">
<title>right chevron</title>
<path class="_mark right-chevron__shape" d="M4.50496 5.98003L0.00107202 0.0064757L0.00964937 2.55136e-07L3.49611 5.59932e-07L8 5.97463L3.48968 12L-9.53674e-07 12L4.50496 5.98003Z" />
</svg>
</span></a>
<div class="search-card__snippet">
</div>
</div>
</div>
</li>
<li class="search-listing__posts-item">
<div class="search-card">
<div class="search-card__content">
<span class="search-card__item-type">
<div class="metadata-eyebrow-small">
<div class="metadata-eyebrow-small__type">
<div class="metadata-eyebrow-small__type__label">
resource
</div>
</div>
</div>
</span>
<a class="linked-text-with-icon linked-text-with-icon--headline5" href="#">Mauris nibh felis adipiscing varius vel tellus urna<span class="linked-text-with-icon__chevron-icon">
<svg role="img" class="right-chevron" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" viewBox="0 0 8 12">
<title>right chevron</title>
<path class="_mark right-chevron__shape" d="M4.50496 5.98003L0.00107202 0.0064757L0.00964937 2.55136e-07L3.49611 5.59932e-07L8 5.97463L3.48968 12L-9.53674e-07 12L4.50496 5.98003Z" />
</svg>
</span></a>
<div class="search-card__snippet">
Sunt sunt dolore velit consectetur ipsum cupidatat. Dolore, velit consectetur ipsum cupidatat irure.
</div>
</div>
</div>
</li>
<li class="search-listing__posts-item">
<div class="search-card">
<div class="search-card__content">
<span class="search-card__item-type">
<div class="metadata-eyebrow-small">
<div class="metadata-eyebrow-small__type">
<div class="metadata-eyebrow-small__type__label">
page
</div>
</div>
</div>
</span>
<a class="linked-text-with-icon linked-text-with-icon--headline5" href="#">Mauris nibh felis adipiscing varius vel tellus urna<span class="linked-text-with-icon__chevron-icon">
<svg role="img" class="right-chevron" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" viewBox="0 0 8 12">
<title>right chevron</title>
<path class="_mark right-chevron__shape" d="M4.50496 5.98003L0.00107202 0.0064757L0.00964937 2.55136e-07L3.49611 5.59932e-07L8 5.97463L3.48968 12L-9.53674e-07 12L4.50496 5.98003Z" />
</svg>
</span></a>
<div class="search-card__snippet">
</div>
</div>
</div>
</li>
<li class="search-listing__posts-item">
<div class="search-card">
<div class="search-card__content">
<span class="search-card__item-type">
<div class="metadata-eyebrow-small">
<div class="metadata-eyebrow-small__type">
<div class="metadata-eyebrow-small__type__label">
member
</div>
</div>
</div>
</span>
<a class="linked-text-with-icon linked-text-with-icon--headline5" href="#">Mauris nibh felis adipiscing varius vel tellus urna<span class="linked-text-with-icon__chevron-icon">
<svg role="img" class="right-chevron" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" viewBox="0 0 8 12">
<title>right chevron</title>
<path class="_mark right-chevron__shape" d="M4.50496 5.98003L0.00107202 0.0064757L0.00964937 2.55136e-07L3.49611 5.59932e-07L8 5.97463L3.48968 12L-9.53674e-07 12L4.50496 5.98003Z" />
</svg>
</span></a>
<div class="search-card__snippet">
Sunt sunt dolore velit consectetur ipsum cupidatat. Dolore, velit consectetur ipsum cupidatat irure.
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="search-listing">
<form role="search" method="get" id="{{ id|default('page-search') }}-form" class="quick-search__form search-listing__search" action="{{site.link}}">
<input id="{{ id|default('page-search') }}-input" name="s" type="text" placeholder="Search the site" class="quick-search__input {{ isLarge ? 'quick-search__input--large' }}" value="{{ searchString }}">
<label for="{{ id|default('page-search') }}-input" class="quick-search__input-label">
Search the website
</label>
<button type="submit" class="quick-search__button" id="{{ id|default('page-search') }}-submit">
{% include 'bits/icons/search.twig' %}
</button>
</form>
{% if posts|length > 0 %}
<div class="search-listing__results-header">
<div class="search-listing__results">
{{ postCount|default(posts|length ~ ' search results' )}}
{% if searchString %}
<span class="search-listing__search-string">for "{{ searchString }}" </span>
{% endif %}
</div>
</div>
<ul class="search-listing__posts">
{% for post in posts %}
<li class="search-listing__posts-item">
{% include 'partials/search-card/search-card.twig' %}
</li>
{% endfor %}
</ul>
{% else %}
<div class="search-listing__results-header">
<div class="search-listing__results">
{{ postCount|default(posts|length ~ ' search results' )}}
{% if searchString %}
<span class="search-listing__search-string">for "{{ searchString }}" </span>
{% endif %}
</div>
<p class="search-listing__posts-empty">No results found.</p>
</div>
{% endif %}
</div>
{
"site": {
"title": "National Network of Public Health Institutes"
},
"background": "white",
"breadcrumbs": [
{
"title": "Home",
"url": "#"
},
{
"title": "Primary Page One",
"url": "#"
},
{
"title": "Interior Page One",
"url": "#"
}
],
"footerLinks": {
"items": [
{
"title": "Subscribe to our newsletter",
"url": "#"
},
{
"title": "Explore membership benefits",
"url": "#"
},
{
"title": "See career opportunities",
"url": "#"
}
]
},
"contactInfo": {
"copyright": "© National Network of Public Health Institutes. All Rights Reserved",
"facebookLink": "https://facebook.com",
"linkedInLink": "https://linkedin.com",
"youtubeLink": "https://youtube.com",
"flickrLink": "https://flickr.com",
"twitterLink": "https://twitter.com",
"instagramLink": "https://instagram.com",
"youTubeLink": "https://youtube.com"
},
"utilityNavigation": {
"items": [
{
"title": "Member directory",
"url": "#"
},
{
"title": "Events",
"url": "#",
"isActive": true
},
{
"title": "Blog",
"url": "#"
}
]
},
"primaryNavigation": {
"items": [
{
"title": "Workforce resources",
"url": "#",
"children": [
{
"title": "Resource Directory",
"url": "#",
"children": []
},
{
"title": "Trainings",
"url": "#",
"children": [
{
"title": "Training Level 3 example",
"url": "#"
}
]
}
]
},
{
"title": "Programs & Projects",
"url": "#",
"isDescendantActive": true,
"children": [
{
"title": "Data Modernization",
"url": "#",
"children": []
},
{
"title": "Environmental Health and Emergency Preparedness",
"url": "#",
"children": []
},
{
"title": "Evaluation and Impact",
"url": "#",
"isDescendantActive": true,
"children": [
{
"title": "Third level example",
"url": "#",
"isActive": true,
"children": [
{
"title": "Fourth level example",
"url": "#",
"isActive": true,
"children": [
{
"title": "Fifth level example",
"url": "#",
"isActive": true
}
]
},
{
"title": "Fourth level example 2",
"url": "#"
},
{
"title": "Fourth level example 3",
"url": "#"
}
]
}
]
},
{
"title": "Multisector Strategies and Population Health",
"url": "#",
"children": []
},
{
"title": "Public Health Events and Convenings Management",
"url": "#",
"children": []
},
{
"title": "Public Health Infrastructure Grant",
"url": "#",
"children": []
},
{
"title": "Public health training",
"url": "#",
"children": []
}
]
},
{
"title": "Explore the Network",
"url": "#",
"children": [
{
"title": "Member Directory",
"url": "#",
"children": []
},
{
"title": "Membership paths",
"url": "#",
"children": []
}
]
},
{
"title": "Partner with us",
"url": "#"
},
{
"title": "About",
"url": "#",
"children": [
{
"title": "Blog",
"url": "#",
"children": []
},
{
"title": "Events",
"url": "#",
"children": []
},
{
"title": "Newsletters",
"url": "#",
"children": []
},
{
"title": "Signature programs",
"url": "#",
"children": []
},
{
"title": "Contact us",
"url": "#",
"children": []
},
{
"title": "Meet the team",
"url": "#",
"children": []
}
]
}
]
},
"searchString": "search test",
"posts": [
{
"title": "Lorem nibh felis adipiscing varius adipiscing in lacinia vel tellus urna",
"type": "event",
"permalink": "#"
},
{
"title": "Lorem nibh felis adipiscing varius adipiscing in lacinia vel tellus urna",
"type": "blog",
"permalink": "#",
"snippet": "Sunt sunt dolore velit consectetur ipsum cupidatat. Dolore, velit consectetur ipsum cupidatat irure."
},
{
"title": "Wendy D. Sanchez",
"type": "profile",
"permalink": "#"
},
{
"title": "Mauris nibh felis adipiscing varius vel tellus urna",
"type": "resource",
"permalink": "#",
"snippet": "Sunt sunt dolore velit consectetur ipsum cupidatat. Dolore, velit consectetur ipsum cupidatat irure."
},
{
"title": "Mauris nibh felis adipiscing varius vel tellus urna",
"type": "page",
"permalink": "#"
},
{
"title": "Mauris nibh felis adipiscing varius vel tellus urna",
"type": "member",
"permalink": "#",
"snippet": "Sunt sunt dolore velit consectetur ipsum cupidatat. Dolore, velit consectetur ipsum cupidatat irure."
}
]
}
.search-listing {
@include contentContainer;
@include fluid('padding-block-end', 2rem, 4rem);
@include fluid('padding-block-start', 2rem, 4rem);
display: flex;
flex-direction: column;
gap: 2rem;
&__search {
position: relative;
max-width: 80ch;
}
&__posts {
max-width: 80ch;
}
&__posts-item {
&:not(:last-child) {
margin-block-end: 2rem;
&:after {
content: '';
display: block;
width: 100%;
margin-block-start: 2rem;
border-block-start: 1px solid var(--grayTint);
}
}
}
&__results-header {
@include headline6;
display: flex;
flex-direction: column;
gap: 2rem;
}
}
No notes defined.