<div class="quick-search ">
<form role="search" method="get" id="quick-search-form" class="quick-search__form" action="">
<input id="quick-search-input" name="s" type="text" placeholder="Search" class="quick-search__input ">
<label for="quick-search-input" class="quick-search__input-label">
Search the website
</label>
<button type="submit" class="quick-search__button" id="quick-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>
<div class="quick-search {{ onDark ? 'quick-search--on-dark' }}">
<form role="search" method="get" id="{{ id|default('quick-search') }}-form" class="quick-search__form" action="{{site.link}}">
<input id="{{ id|default('quick-search') }}-input" name="s" type="text" placeholder="Search" class="quick-search__input {{ isLarge ? 'quick-search__input--large' }}">
<label for="{{ id|default('quick-search') }}-input" class="quick-search__input-label">
Search the website
</label>
<button type="submit" class="quick-search__button" id="{{ id|default('quick-search') }}-submit">
{% include 'bits/icons/search.twig' %}
</button>
</form>
</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": []
}
]
}
]
},
"onDark": false
}
.quick-search {
--iconColor: var(--brightPurple);
--textColor: var(--black);
--placeholderTextColor: var(--gray);
--backgroundColor: var(--white);
--borderColor: var(--gray);
position: relative;
&--on-dark {
--borderColor: transparent;
}
&__form {
align-items: center;
display: inline-flex;
justify-content: space-between;
width: 100%;
}
&__input-label {
@include invisible;
}
&__input {
@include bodySmall;
background-color: var(--backgroundColor);
border-radius: 50px;
border-width: 1px;
border-color: var(--borderColor);
border-style: solid;
color: var(--textColor);
padding:0.62rem 2.0rem 0.62rem 1rem;
width: 100%;
&::placeholder {
color: var(--placeholderTextColor);
}
}
&__button {
display: flex;
position: absolute;
right: 0;
width: 2.5rem;
height: 100%;
align-items: center;
justify-content: center;
.search-icon {
fill: var(--iconColor);
width: 1rem;
height: 1rem;
}
}
}
No notes defined.