Code
<div class="region--search">
<a class="overlay" data-overlay="#search-box">Search <i class="fas fa-search"></i>
</a>
</div>
.region--search {
margin-top: -0.2rem;
}
.region--search .overlay,
.region--search .js-overlay__close {
transition: none;
font-size: var(--font-size-2);
font-weight: 900;
text-transform: uppercase;
color: inherit;
cursor: pointer;
}
.region--search .fas {
position: relative;
top: 0.2rem;
margin-left: 1.2rem;
font-size: 1.8rem;
padding: 0.5rem 0;
cursor: pointer;
}
.region--search {
margin-top: -0.2rem;
.overlay,
.js-overlay__close {
transition: none;
font-size: var(--font-size-2);
font-weight: 900;
text-transform: uppercase;
color: inherit;
cursor: pointer;
}
.fas {
position: relative;
top: 0.2rem;
margin-left: 1.2rem;
font-size: 1.8rem;
padding: 0.5rem 0;
cursor: pointer;
}
}
Use Case
The search icon lives in the header and is used to open the search overlay.
We have create the component with both and icon and text to help users quickly identify what it is.
It's placed in a standard position in the header as found on many other sites.
Component Options
There are no options for this component.
