<header class="header" data-module="header">
<div class="header__content-wrapper">
<button class="header__mobile-btn header__mobile-btn--nav" aria-expanded="false" aria-label="close menu">
<svg viewBox="0 0 120 120">
<use xlink:href="#menu" />
</svg>
<svg viewBox="0 0 120 120">
<use xlink:href="#close-thin" />
</svg>
</button>
<a href="/" class="header__logo">
<img src="https://verndale-image-tools.herokuapp.com/id/Qo_2hhoqC3k?w=303&h=36" width="303" height="36" alt="Acadian Asset" />
</a>
<nav class="header__primary-nav" aria-label="Primary Nav">
<ul>
<li class="header__item">
<button aria-haspopup="true" aria-expanded="false">
About Us
</button>
<ul class="header__inner-nav" style="display:none">
<li class="header__item header__item--active">
<a href="#">
Leadership
</a>
</li>
<li class="header__item">
<a href="#">
Our History
</a>
</li>
<li class="header__item">
<a href="#">
Our Culture
</a>
</li>
<li class="header__item">
<a href="#">
Careers
</a>
</li>
<li class="header__item">
<a href="#">
News
</a>
</li>
</ul>
</li>
<li class="header__item">
<button aria-haspopup="true" aria-expanded="false">
Our Edge
</button>
<ul class="header__inner-nav" style="display:none">
<li class="header__item">
<a href="#">
Leadership
</a>
</li>
<li class="header__item">
<a href="#">
Our History
</a>
</li>
<li class="header__item">
<a href="#">
Our Culture
</a>
</li>
<li class="header__item">
<a href="#">
Careers
</a>
</li>
<li class="header__item">
<a href="#">
News
</a>
</li>
</ul>
</li>
<li class="header__item">
<button aria-haspopup="true" aria-expanded="false">
Strategies
</button>
<ul class="header__inner-nav" style="display:none">
<li class="header__item">
<a href="#">
Leadership
</a>
</li>
<li class="header__item">
<a href="#">
Our History
</a>
</li>
<li class="header__item">
<a href="#">
Our Culture
</a>
</li>
<li class="header__item">
<a href="#">
Careers
</a>
</li>
<li class="header__item">
<a href="#">
News
</a>
</li>
</ul>
</li>
<li class="header__item">
<button aria-haspopup="true" aria-expanded="false">
Insights
</button>
<div class="header__inner-nav header__inner-nav--two" style="display:none">
<div class="header__nav-column">
<span class="header__nav-title">Title</span>
<ul>
<li class="header__item">
<a href="#">
Leadership
</a>
</li>
<li class="header__item">
<a href="#">
Our History
</a>
</li>
<li class="header__item">
<a href="#">
Our Culture
</a>
</li>
<li class="header__item">
<a href="#">
Careers
</a>
</li>
<li class="header__item">
<a href="#">
News
</a>
</li>
</ul>
</div>
<div class="header__nav-column">
<span class="header__nav-title">Title</span>
<ul>
<li class="header__item">
<a href="#">
Leadership
</a>
</li>
<li class="header__item">
<a href="#">
Our History
</a>
</li>
<li class="header__item">
<a href="#">
Our Culture
</a>
</li>
<li class="header__item">
<a href="#">
Careers
</a>
</li>
<li class="header__item">
<a href="#">
News
</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
<div class="header__search" data-endpoint="http://localhost:5000/search-suggestions" data-search-page-url="/html/search.html">
<div class="header__search-field" aria-haspopup="true" role="button" aria-expanded="false">
<div id="search-announce" class="sr-only" aria-live="assertive"></div>
<button aria-label="Open Search" class="header__search-btn">
<svg viewBox="0 0 120 120">
<use xlink:href="#search" />
</svg>
</button>
<label class="sr-only" for="header-search">Search in page, press escape to close</label>
<input autocomplete="off" class="header__search-input" placeholder="Search" id="header-search" role="combobox" type="text" />
<button aria-label="Clear Search Input" class="header__clear-input-btn" hidden>
<svg viewBox="0 0 120 120">
<use xlink:href="#close-bold" />
</svg>
</button>
</div>
<div class="header__search-results-backdrop">
<div class="header__search-results">
<span class="header__search-results-heading" id="search-suggested-results-heading">Suggested Results</span>
<ul role="listbox" hidden></ul>
<a class="header__search-view-all" data-additional-query-string="Content=all">
View All Results
</a>
</div>
</div>
</div>
<nav class="header__utility-nav" aria-label="Utility Nav">
<ul>
<li class="header__item">
<button aria-haspopup="true" aria-expanded="false">
Investor Resources
</button>
<ul class="header__inner-nav" style="display:none">
<li class="header__item">
<a href="#">
Advisor's Inner Circle Mutual Fund
</a>
</li>
<li class="header__item">
<a href="#">
Australia Funds
</a>
</li>
</ul>
</li>
<li class="header__item">
<a href="#">
Careers
</a>
</li>
<li class="header__item">
<a href="#">
Contact Us
</a>
</li>
</ul>
</nav>
</div>
<nav class="header__mobile-nav" aria-label="Mobile Nav">
<ul>
<li class="header__mobile-item">
<button aria-haspopup="true" aria-expanded="false">
About Acadian
</button>
<ul class="header__mobile-inner-nav">
<li class="header__mobile-item header__mobile-item--back">
<button>
Back
</button>
</li>
<li class="header__mobile-item header__mobile-item--main-link">
<a href="#">
About Acadian
</a>
</li>
<li class="header__mobile-item header__mobile-item--active">
<a href="#">
Leadership
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Our History
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Our Culture
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Careers
</a>
</li>
<li class="header__mobile-item">
<a href="#">
News
</a>
</li>
</ul>
</li>
<li class="header__mobile-item">
<button aria-haspopup="true" aria-expanded="false">
Our Edge
</button>
<ul class="header__mobile-inner-nav">
<li class="header__mobile-item header__mobile-item--back">
<button>
Back
</button>
</li>
<li class="header__mobile-item header__mobile-item--main-link">
<a href="#">
Our Edge
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Leadership
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Our History
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Our Culture
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Careers
</a>
</li>
<li class="header__mobile-item">
<a href="#">
News
</a>
</li>
</ul>
</li>
<li class="header__mobile-item">
<button aria-haspopup="true" aria-expanded="false">
Capabilities
</button>
<ul class="header__mobile-inner-nav">
<li class="header__mobile-item header__mobile-item--back">
<button>
Back
</button>
</li>
<li class="header__mobile-item header__mobile-item--main-link">
<a href="#">
Capabilities
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Leadership
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Our History
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Our Culture
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Careers
</a>
</li>
<li class="header__mobile-item">
<a href="#">
News
</a>
</li>
</ul>
</li>
<li class="header__mobile-item">
<button aria-haspopup="true" aria-expanded="false">
Insights
</button>
<div class="header__mobile-inner-nav">
<span class="header__mobile-item header__mobile-item--back">
<button>
Back
</button>
</span>
<div class="header__nav-column">
<span class="header__nav-title">Title</span>
<ul>
<li class="header__mobile-item header__mobile-item--main-link">
<a href="#">
Insights
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Leadership
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Our History
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Our Culture
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Careers
</a>
</li>
<li class="header__mobile-item">
<a href="#">
News
</a>
</li>
</ul>
</div>
<div class="header__nav-column">
<span class="header__nav-title">Title</span>
<ul>
<li class="header__mobile-item header__mobile-item--main-link">
<a href="#">
Insights
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Leadership
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Our History
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Our Culture
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Careers
</a>
</li>
<li class="header__mobile-item">
<a href="#">
News
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="header__mobile-item">
<button aria-haspopup="true" aria-expanded="false">
Investor Resources
</button>
<ul class="header__mobile-inner-nav">
<li class="header__mobile-item header__mobile-item--back">
<button>
Back
</button>
</li>
<li class="header__mobile-item header__mobile-item--main-link">
<a href="#">
Investor Resources
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Advisor's Inner Circle Mutual Fund
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Australia Funds
</a>
</li>
</ul>
</li>
<li class="header__mobile-item">
<a href="#">
Careers
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Contact Us
</a>
</li>
</ul>
</nav>
</header>
<header
class="header"
data-module="header"
>
<div class="header__content-wrapper">
<button class="header__mobile-btn header__mobile-btn--nav" aria-expanded="false" aria-label="close menu">
{{>svg name="menu" viewBox="0 0 120 120"}}
{{>svg name="close-thin" viewBox="0 0 120 120"}}
</button>
<a href="/" class="header__logo">
{{!-- ADD HEIGHT WIDTH --}}
<img src="https://verndale-image-tools.herokuapp.com/id/Qo_2hhoqC3k?w=303&h=36" width="303" height="36" alt="Acadian Asset" />
</a>
<nav class="header__primary-nav" aria-label="Primary Nav">
<ul>
<li class="header__item">
<button aria-haspopup="true" aria-expanded="false">
About Us
</button>
<ul class="header__inner-nav" style="display:none">
<li class="header__item header__item--active">
<a href="#">
Leadership
</a>
</li>
<li class="header__item">
<a href="#">
Our History
</a>
</li>
<li class="header__item">
<a href="#">
Our Culture
</a>
</li>
<li class="header__item">
<a href="#">
Careers
</a>
</li>
<li class="header__item">
<a href="#">
News
</a>
</li>
</ul>
</li>
<li class="header__item">
<button aria-haspopup="true" aria-expanded="false">
Our Edge
</button>
<ul class="header__inner-nav" style="display:none">
<li class="header__item">
<a href="#">
Leadership
</a>
</li>
<li class="header__item">
<a href="#">
Our History
</a>
</li>
<li class="header__item">
<a href="#">
Our Culture
</a>
</li>
<li class="header__item">
<a href="#">
Careers
</a>
</li>
<li class="header__item">
<a href="#">
News
</a>
</li>
</ul>
</li>
<li class="header__item">
<button aria-haspopup="true" aria-expanded="false">
Strategies
</button>
<ul class="header__inner-nav" style="display:none">
<li class="header__item">
<a href="#">
Leadership
</a>
</li>
<li class="header__item">
<a href="#">
Our History
</a>
</li>
<li class="header__item">
<a href="#">
Our Culture
</a>
</li>
<li class="header__item">
<a href="#">
Careers
</a>
</li>
<li class="header__item">
<a href="#">
News
</a>
</li>
</ul>
</li>
<li class="header__item">
<button aria-haspopup="true" aria-expanded="false">
Insights
</button>
<div class="header__inner-nav header__inner-nav--two" style="display:none">
<div class="header__nav-column">
<span class="header__nav-title">Title</span>
<ul>
<li class="header__item">
<a href="#">
Leadership
</a>
</li>
<li class="header__item">
<a href="#">
Our History
</a>
</li>
<li class="header__item">
<a href="#">
Our Culture
</a>
</li>
<li class="header__item">
<a href="#">
Careers
</a>
</li>
<li class="header__item">
<a href="#">
News
</a>
</li>
</ul>
</div>
<div class="header__nav-column">
<span class="header__nav-title">Title</span>
<ul>
<li class="header__item">
<a href="#">
Leadership
</a>
</li>
<li class="header__item">
<a href="#">
Our History
</a>
</li>
<li class="header__item">
<a href="#">
Our Culture
</a>
</li>
<li class="header__item">
<a href="#">
Careers
</a>
</li>
<li class="header__item">
<a href="#">
News
</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
<div class="header__search"
data-endpoint="http://localhost:5000/search-suggestions"
data-search-page-url="/html/search.html">
<div class="header__search-field" aria-haspopup="true" role="button" aria-expanded="false">
<div id="search-announce" class="sr-only" aria-live="assertive"></div>
<button aria-label="Open Search" class="header__search-btn">
{{>svg name="search" viewBox="0 0 120 120"}}
</button>
<label class="sr-only" for="header-search">Search in page, press escape to close</label>
<input
autocomplete="off"
class="header__search-input"
placeholder="Search"
id="header-search"
role="combobox"
type="text"
/>
<button aria-label="Clear Search Input" class="header__clear-input-btn" hidden>
{{>svg name="close-bold" viewBox="0 0 120 120"}}
</button>
</div>
<div class="header__search-results-backdrop">
<div class="header__search-results">
<span class="header__search-results-heading" id="search-suggested-results-heading">Suggested Results</span>
<ul role="listbox" hidden></ul>
<a class="header__search-view-all" data-additional-query-string="Content=all">
View All Results
</a>
</div>
</div>
</div>
<nav class="header__utility-nav" aria-label="Utility Nav">
<ul>
<li class="header__item">
<button aria-haspopup="true" aria-expanded="false">
Investor Resources
</button>
<ul class="header__inner-nav" style="display:none">
<li class="header__item">
<a href="#">
Advisor's Inner Circle Mutual Fund
</a>
</li>
<li class="header__item">
<a href="#">
Australia Funds
</a>
</li>
</ul>
</li>
<li class="header__item">
<a href="#">
Careers
</a>
</li>
<li class="header__item">
<a href="#">
Contact Us
</a>
</li>
</ul>
</nav>
</div>
<nav class="header__mobile-nav" aria-label="Mobile Nav">
<ul>
<li class="header__mobile-item">
<button aria-haspopup="true" aria-expanded="false">
About Acadian
</button>
<ul class="header__mobile-inner-nav">
<li class="header__mobile-item header__mobile-item--back">
<button>
Back
</button>
</li>
<li class="header__mobile-item header__mobile-item--main-link">
<a href="#">
About Acadian
</a>
</li>
<li class="header__mobile-item header__mobile-item--active">
<a href="#">
Leadership
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Our History
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Our Culture
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Careers
</a>
</li>
<li class="header__mobile-item">
<a href="#">
News
</a>
</li>
</ul>
</li>
<li class="header__mobile-item">
<button aria-haspopup="true" aria-expanded="false">
Our Edge
</button>
<ul class="header__mobile-inner-nav">
<li class="header__mobile-item header__mobile-item--back">
<button>
Back
</button>
</li>
<li class="header__mobile-item header__mobile-item--main-link">
<a href="#">
Our Edge
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Leadership
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Our History
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Our Culture
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Careers
</a>
</li>
<li class="header__mobile-item">
<a href="#">
News
</a>
</li>
</ul>
</li>
<li class="header__mobile-item">
<button aria-haspopup="true" aria-expanded="false">
Capabilities
</button>
<ul class="header__mobile-inner-nav">
<li class="header__mobile-item header__mobile-item--back">
<button>
Back
</button>
</li>
<li class="header__mobile-item header__mobile-item--main-link">
<a href="#">
Capabilities
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Leadership
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Our History
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Our Culture
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Careers
</a>
</li>
<li class="header__mobile-item">
<a href="#">
News
</a>
</li>
</ul>
</li>
<li class="header__mobile-item">
<button aria-haspopup="true" aria-expanded="false">
Insights
</button>
<div class="header__mobile-inner-nav">
<span class="header__mobile-item header__mobile-item--back">
<button>
Back
</button>
</span>
<div class="header__nav-column">
<span class="header__nav-title">Title</span>
<ul>
<li class="header__mobile-item header__mobile-item--main-link">
<a href="#">
Insights
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Leadership
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Our History
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Our Culture
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Careers
</a>
</li>
<li class="header__mobile-item">
<a href="#">
News
</a>
</li>
</ul>
</div>
<div class="header__nav-column">
<span class="header__nav-title">Title</span>
<ul>
<li class="header__mobile-item header__mobile-item--main-link">
<a href="#">
Insights
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Leadership
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Our History
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Our Culture
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Careers
</a>
</li>
<li class="header__mobile-item">
<a href="#">
News
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="header__mobile-item">
<button aria-haspopup="true" aria-expanded="false">
Investor Resources
</button>
<ul class="header__mobile-inner-nav">
<li class="header__mobile-item header__mobile-item--back">
<button>
Back
</button>
</li>
<li class="header__mobile-item header__mobile-item--main-link">
<a href="#">
Investor Resources
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Advisor's Inner Circle Mutual Fund
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Australia Funds
</a>
</li>
</ul>
</li>
<li class="header__mobile-item">
<a href="#">
Careers
</a>
</li>
<li class="header__mobile-item">
<a href="#">
Contact Us
</a>
</li>
</ul>
</nav>
</header>
/* No context defined. */
@import 'variables';
.header {
--header-block-size: 60px;
--header-nav-gap: 20px;
--white-transparency: rgb(255 255 255 / 0.8);
animation: displayAnim 500ms ease-in-out 150ms both;
background-color: $white;
block-size: var(--header-block-size);
inset-block-start: 0;
inset-inline: 0;
position: relative;
transition: $transition;
visibility: visible;
z-index: 100;
@include mq(desktop) {
block-size: 100px;
}
@include mq(wide) {
--header-nav-gap: 60px;
}
ul {
list-style: none;
margin: 0;
padding-inline-start: 0;
}
&::after {
content: '';
display: block;
position: absolute;
height: 1px;
bottom: 0;
left: 0;
right: 0;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100vw;
background-color: $primary-dark;
}
}
.header--scroll-down {
inset-block-start: -60px;
visibility: hidden;
@include mq(desktop) {
inset-block-start: -100px;
}
}
.header__content-wrapper {
align-items: center;
block-size: 100%;
display: flex;
justify-content: space-between;
background-color: $white;
@include mq(desktop) {
margin-inline: auto;
max-inline-size: 1800px;
}
}
.header__mobile-btn,
.header__search-btn {
align-items: center;
appearance: none;
background-color: transparent;
block-size: 40px;
border: 0;
display: flex;
inline-size: 40px;
justify-content: center;
padding: 0;
svg {
fill: $primary-color;
block-size: 24px;
inline-size: 24px;
}
}
.header__mobile-btn {
@include mq(desktop) {
display: none;
}
}
.header__mobile-btn--nav {
background-color: $white;
svg {
&:first-child {
display: block;
}
&:last-child {
display: none;
}
}
&[aria-expanded='true'] {
svg {
&:first-child {
display: none;
}
&:last-child {
display: block;
}
}
}
}
.header__logo {
block-size: 24px;
inline-size: 202px;
@include mq(desktop) {
block-size: 36px;
inline-size: 200px;
}
@include mq(desktop) {
block-size: 36px;
inline-size: 303px;
}
img {
background: 0;
block-size: 100%;
inline-size: 100%;
object-fit: contain;
}
}
.header__primary-nav,
.header__utility-nav {
& > ul {
align-items: center;
display: flex;
}
}
.header__primary-nav {
display: none;
@include mq(desktop) {
align-items: center;
display: flex;
gap: var(--header-nav-gap);
}
& > ul {
gap: var(--header-nav-gap);
@include mq($until: desktop) {
display: none;
}
}
}
.header__utility-nav {
@include mq($until: desktop) {
display: none;
}
& > ul {
gap: var(--header-nav-gap);
@include mq(wide) {
--header-nav-gap: 18px;
}
}
}
.header__item {
position: relative;
button {
align-items: center;
appearance: none;
background-color: transparent;
border: 0;
display: flex;
font: bold 1.25rem/1.4 'DM Sans', system-ui;
gap: 6px;
padding: 0;
color: $primary-color;
@include mq($from: desktop, $until: desktop) {
font-size: 1.0625rem;
}
&::after {
background-color: $primary-dark;
block-size: 6px;
clip-path: polygon(100% 0, 0 0, 50% 100%);
content: '';
display: block;
inline-size: 8px;
transition: $transition;
will-change: color, transform;
}
&:hover,
&:focus {
text-decoration: underline;
}
&[aria-expanded='true'] {
color: $primary-color;
&::after {
transform: scale(-1);
}
}
}
.header__utility-nav & {
a,
button {
font: $font-nav-sm;
@include mq($from: desktop, $until: desktop) {
font-size: 0.875rem;
}
}
a {
color: $primary-color;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.header__inner-nav & a {
color: $primary-color;
display: block;
font: $font-nav-sm;
padding-block: 10px;
padding-inline: 20px;
text-decoration: none;
transition: $transition;
will-change: background-color, color;
&:hover,
&:focus-visible {
background-color: $primary-color;
color: $white;
}
}
.header__inner-nav &.header__item--active a {
color: $primary-color;
&:hover,
&:focus-visible {
color: $white;
}
}
}
.header__inner-nav {
background-color: $white;
border: 1px solid $white;
inline-size: 238px;
inset-block-start: calc(100% + 22px);
inset-inline-start: 50%;
opacity: 0;
padding-block: 12px;
position: absolute;
transform: translateX(-50%) perspective(400px) rotateX(-20deg);
transform-origin: center top;
transition: $transition;
visibility: hidden;
will-change: border-color, opacity, transform, visibility;
&::before,
&::after {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
content: '';
inset-block-start: 0;
inset-inline-start: 50%;
position: absolute;
}
&::before {
background-color: $primary-color;
block-size: 10px;
inline-size: 15px;
transform: translate(-50%, -100%);
}
&::after {
background-color: $white;
block-size: 8px;
inline-size: 12px;
transform: translate(-50%, calc(-100% + 0.1px));
}
[aria-expanded='true'] + & {
border-color: $primary-color;
opacity: 1;
transform: translateX(-50%);
visibility: visible;
}
}
.header__inner-nav--two {
display: flex;
min-inline-size: 560px;
}
.header__nav-column {
background-color: --white-transparency;
min-inline-size: 280px;
padding-inline: 20px;
&:not(:first-of-type) {
padding-block-start: 35px;
}
@include mq(desktop) {
&:not(:first-of-type) {
padding-block-start: 0;
}
}
}
.header__nav-title {
background-color: --white-transparency;
display: block;
font: var(--font-nav);
font-weight: 500;
padding-block-end: 5px;
padding-inline-start: 10px;
text-transform: uppercase;
@include mq(desktop) {
font: $font-nav-sm;
font-weight: 600;
padding-block-start: 0;
}
}
.header__mobile-nav {
@include mq($until: desktop) {
background-color: --white-transparency;
block-size: calc(var(--vh) - var(--header-block-size));
border-top: 1px solid var(--color-gray-200);
inset-block-end: 0;
inset-block-start: var(--header-block-size);
inset-inline: 0;
margin-block-end: env(safe-area-inset-bottom);
overflow-x: hidden;
overflow-y: auto;
position: absolute;
transform: translateX(-100%);
transition: $transition;
visibility: hidden;
will-change: transform;
}
.header--expanded & {
@include mq($until: desktop) {
transform: translateX(0);
visibility: visible;
}
}
@include mq(desktop) {
display: none;
}
}
.header__mobile-item {
& > button {
appearance: none;
border: 0;
gap: 10px;
justify-content: space-between;
&::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 120 120'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23447A89'%3E%3Cpath d='M99.492 35l18.388 21.362L120.147 59l-2.267 2.638L99.492 83l-4.625-3.677L109.798 62.2 0 62.2v-6.4h109.798L94.867 38.677 99.492 35z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
block-size: 32px;
content: '';
inline-size: 32px;
}
}
&.header__mobile-item--back {
& > button {
border: 0;
justify-content: flex-start;
&::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 120 120'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23447A89' fill-rule='nonzero'%3E%3Cpath d='M38.098 0l51.829 59.622-.003.002.003.003-51.83 59.622-7.097-6.17 46.466-53.455L31 6.17 38.098 0z' transform='translate(60.463264, 59.624332) scale(-1, 1) translate(-60.463264, -59.624332)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
block-size: 16px;
content: '';
inline-size: 16px;
}
&::after {
display: none;
}
}
}
&.header__mobile-item--main-link {
& > a {
color: $primary-color;
font: var(--font-nav-lg);
}
}
&.header__mobile-item--active {
color: $primary-color;
}
& > a {
text-decoration: none;
}
& > a,
& > button {
align-items: center;
background-color: $white;
block-size: 60px;
border-bottom: 1px solid var(--color-gray-200);
color: inherit;
display: flex;
font: var(--font-nav);
inline-size: 100%;
padding-block: 16px;
padding-inline: 20px;
}
}
.header__mobile-inner-nav {
background-color: --white-transparency;
block-size: calc(var(--vh) - var(--header-block-size));
inset: 0;
position: absolute;
transform: translateX(100%);
transition: $transition;
visibility: hidden;
will-change: transform;
[aria-expanded='true'] + & {
transform: translateX(0);
visibility: visible;
}
}
.header__search {
align-items: center;
block-size: var(--header-block-size);
display: flex;
@include mq(desktop) {
position: relative;
z-index: 1;
margin-inline-start: 15px;
}
}
.header__search-field {
align-items: center;
block-size: var(--header-block-size);
display: flex;
z-index: 1;
@include mq(desktop) {
position: relative;
}
}
.header__search-field--open {
@include mq(desktop) {
margin-inline-end: 40px;
}
}
.header__search-input {
appearance: none;
block-size: var(--header-block-size);
border: 0;
border-radius: 0;
font: var(--font-copy-large);
inline-size: 0;
inset-block-start: 0;
inset-inline-start: 0;
opacity: 0;
padding-block: 0;
padding-inline: 0;
position: absolute;
transition: $transition;
visibility: hidden;
@include mq($from: desktop, $until: desktop) {
font-size: 1.0625rem;
}
.header__search-field--open & {
border: 1px solid $gray;
inline-size: 100vw;
opacity: 1;
padding-block: 16px;
padding-inline: 60px;
visibility: visible;
@include mq(desktop) {
inline-size: var(--search-width);
}
}
}
.header__search-btn {
inset-block-start: 10px;
transition: $transition;
will-change: inset-inline-start;
.header__search-field--open & {
inset-inline-start: 12px;
pointer-events: none;
position: absolute;
z-index: 1;
}
}
.header__search-results-backdrop {
[aria-expanded='true'] + & {
@include mq($until: desktop) {
background-color: --white-transparency;
block-size: calc(var(--vh) - var(--header-block-size));
inline-size: 100%;
inset-block-start: var(--header-block-size);
inset-inline-start: 0;
position: absolute;
}
}
}
.header__search-results {
background-color: $white;
border: 1px solid $white;
inline-size: 100%;
inset-block-start: 8px;
inset-inline-start: 50%;
opacity: 0;
padding-block: 12px;
position: absolute;
transform: translateX(-50%) perspective(400px) rotateX(-20deg);
transform-origin: center top;
transition: $transition;
visibility: hidden;
will-change: border-color, opacity, transform, visibility;
@include mq(desktop) {
inline-size: 410px;
inset-block-start: calc(100% + 8px);
inset-inline-start: 0;
transform: perspective(400px) rotateX(-20deg);
}
@include mq(wide) {
inline-size: 590px;
}
&::before,
&::after {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
content: '';
inset-block-start: 0;
inset-inline-start: 20px;
position: absolute;
}
&::before {
background-color: $gray;
block-size: 6px;
inline-size: 9px;
transform: translate(-50%, -100%);
}
&::after {
background-color: $white;
block-size: 4.8px;
inline-size: 7.2px;
transform: translate(-50%, calc(-100% + 0.1px));
}
[aria-expanded='true'] + .header__search-results-backdrop & {
border-color: $gray;
opacity: 1;
transform: translateX(-50%);
visibility: visible;
@include mq(desktop) {
transform: none;
}
}
ul {
margin-block: 6px 8px;
}
}
.header__search-results-heading {
color: var(--color-gray-500);
font: var(--font-alert-title);
margin-inline: 20px;
text-transform: uppercase;
}
.header__search-view-all {
align-items: center;
color: $primary-color;
display: inline-flex;
font: $font-copy-small;
gap: 5px;
margin-inline: 20px;
&:hover {
text-decoration: underline;
&::after {
transform: translateX(4px);
}
}
&::after {
background-image: url("data:image/svg+xml,%3Csvg width='14' height='10' viewBox='0 0 320 202' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M249.644 119.33l-56.762 56.641L218.783 202 320 101 218.783 0l-25.901 26.029 56.762 56.64L0 82.487v36.661z' fill='%23447a89' fill-rule='nonzero'/%3E%3C/svg%3E");
block-size: 10px;
content: '';
inline-size: 14px;
transition: $transition;
will-change: transform;
}
}
.header__search-item {
a {
align-items: center;
color: $primary-color;
display: grid;
font: $font-nav-sm;
gap: 10px;
grid-template-columns: 1fr auto;
padding-block: 10px;
padding-inline: 20px;
text-decoration: none;
transition: $transition;
will-change: background-color, color;
&:hover,
&:focus-visible {
background-color: $primary-color;
color: $white;
}
&:not(:hover):not(:focus-visible) span:last-child {
color: var(--color-gray-500);
}
span:last-child {
font: var(--font-link-small);
}
}
}
.header__search-item--did-you-mean {
a {
align-items: center;
color: $primary-color;
display: grid;
font: $font-nav-sm;
gap: 10px;
grid-template-columns: 1fr auto;
padding-block: 10px;
padding-inline: 20px;
text-decoration: none;
transition: $transition;
will-change: background-color, color;
&:hover,
&:focus-visible {
background-color: $primary-color;
color: $white;
}
}
}
.header__clear-input-btn {
align-items: center;
appearance: none;
background-color: transparent;
block-size: 40px;
border: 0;
color: $primary-color;
inline-size: 40px;
justify-content: center;
opacity: 0;
padding: 0;
position: absolute;
transition: $transition;
visibility: hidden;
will-change: opacity, visibility;
z-index: 1;
@include mq($until: desktop) {
inset-inline-end: 8px;
position: absolute;
}
@include mq(desktop) {
inset-inline-start: calc(var(--search-width) - 50px);
}
&:not([hidden]) {
display: flex;
}
svg {
block-size: 16px;
inline-size: 16px;
}
.header__search-field--open & {
opacity: 1;
visibility: visible;
}
}
@keyframes displayAnim {
from {
transform: translateY(-100%);
}
to {
transform: none;
}
}
.sr-only {
block-size: 1px;
border-width: 0;
clip: rect(0, 0, 0, 0);
inline-size: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
}
$primary-color: map-get($theme-colors, 'primary') !default;
$primary-dark: map-get($theme-colors, 'primary-dark') !default;
$header-block-size: 60px;
$transition: all 350ms ease-in-out;
$font-nav-sm: 500 1rem/1.38 'DM Sans', system-ui;
$font-copy-small: normal 0.875rem/1.57 'DM Sans', system-ui;
$gray: #c2c2c2;
$white: #fff
import { Component } from '@verndale/core'
import { createFocusTrap } from 'focus-trap'
import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'
import { stringifyUrl } from 'query-string'
import { convertToText } from 'number-to-text'
import 'number-to-text/converters/en-us'
export const DOWN = 40
export const ESCAPE = 27
export const RETURN = 13
export const TAB = 9
export const UP = 38
export function searchSuggestion({ Label, Tag, Url }, index) {
return `
<li
aria-selected="false"
aria-labelledby="search-suggested-results-heading"
class="header__search-item"
role="option"
id="suggestion-${index}"
>
<a href="${Url}" tabindex="0">
${Label ? `<span>${Label}</span>` : ''}
${Tag ? `<span>${Tag}</span>` : ''}
</a>
</li>
`
}
export function searchSuggestionDidYouMean(Label, Value, Url, index) {
return `
<li
aria-labelledby="search-suggested-results-heading"
class="header__search-item--did-you-mean"
role="option"
id="suggestion-${index}"
>
<a href="${Url}" tabindex="0">
${Label ? `<span>${Label} ${Value}</span>` : ''}
</a>
</li>
`
}
class Header extends Component {
setupDefaults() {
const self = this
this.dom = {
$btnNav: this.el.querySelector('.header__mobile-btn--nav'),
$mobileItemBtn: this.el.querySelectorAll('.header__mobile-item button'),
$mobileMenuItemBackBtn: this.el.querySelectorAll(
'.header__mobile-item--back button'
),
$mobileInnerNav: this.el.querySelectorAll('.header__mobile-inner-nav'),
$search: this.el.querySelector('.header__search'),
$searchBtn: this.el.querySelector('.header__search-btn'),
$searchInput: this.el.querySelector('.header__search-input'),
$searchField: this.el.querySelector('.header__search-field'),
$clearInputBtn: this.el.querySelector('.header__clear-input-btn'),
$itemBtn: this.el.querySelectorAll('.header__item button'),
$itemlinks: this.el.querySelectorAll('.header__item a'),
$activePage: this.el.querySelector('.header__item--active'),
$resultsList: this.el.querySelector('.header__search-results ul'),
$viewAll: this.el.querySelector('.header__search-view-all'),
$searchAnnounce: this.el.querySelector('#search-announce'),
$headerContainer: this.el.querySelector('.header__content-wrapper'),
$headerItemNav: this.el.querySelectorAll('.header__inner-nav')
}
if (this.dom.$search) {
this.endpoint = this.dom.$search.dataset.endpoint
this.searchPageUrl = this.dom.$search.dataset.searchPageUrl
}
this.mainFocusTrap = createFocusTrap(this.el, {
onActivate() {
disableBodyScroll(self.el, {
allowTouchMove: (el) => el.closest('.header__mobile-nav')
})
},
onDeactivate() {
clearAllBodyScrollLocks()
}
})
if (this.dom.$searchBtn) {
this.searchInputWidth()
}
this.displaySubmenus()
this.lastScrollTop = 0
}
addListeners() {
this.dom.$btnNav.addEventListener('click', () => this.handleBtnNavClick())
this.dom.$mobileItemBtn.forEach(($btn) =>
$btn.addEventListener('click', (e) => this.handleMobileItemBtnClick(e))
)
this.dom.$mobileMenuItemBackBtn.forEach(($btn) =>
$btn.addEventListener('click', (e) => this.handleMenuItemBackBtnClick(e))
)
this.dom.$mobileInnerNav.forEach(($nav) =>
$nav.addEventListener('transitionend', (e) =>
this.handleMobileInnerNavTransitionEnd(e)
)
)
this.dom.$mobileInnerNav.forEach(($nav) =>
$nav.addEventListener('focusout', (e) =>
this.handleMobileInnerNavFocusout(e)
)
)
this.dom.$itemBtn.forEach(($btn) =>
$btn.addEventListener('click', (e) => this.handleItemBtnClick(e))
)
this.dom.$itemlinks.forEach(($link) =>
$link.addEventListener('click', (e) => this.handleItemActive(e))
)
this.dom.$searchBtn?.addEventListener('click', () =>
this.handleSearchBtnClick()
)
if (this.dom.$searchField) {
this.dom.$searchField.addEventListener('transitionend', (e) =>
this.handleSearchFieldTransitionEnd(e)
)
this.dom.$clearInputBtn.addEventListener('click', (e) =>
this.handleClearInputBtn(e)
)
this.dom.$search.addEventListener('focusout', (e) =>
this.handleSearchFocusout(e)
)
this.dom.$searchInput.addEventListener('keydown', (e) =>
this.handleSearchInputKeydown(e)
)
this.dom.$resultsList.addEventListener('keydown', (e) =>
this.handleResultsListKeydown(e)
)
this.dom.$searchInput.addEventListener('input', (e) =>
this.handleSearchInputChange(e)
)
this.dom.$searchInput.addEventListener('blur', (e) =>
this.handleSearchInputBlur(e)
)
this.el.addEventListener('focus', (e) => this.handleListFocus(e), true)
document.addEventListener('click', (e) => this.handleOutsideClick(e))
window.addEventListener('resize', this.handleResize.bind(this))
}
// window.addEventListener('scroll', this.handleScroll.bind(this))
}
displaySubmenus() {
this.dom.$headerItemNav.forEach((item) => item.removeAttribute('style'))
}
searchInputWidth() {
this.searchSvgDimensions = this.dom.$searchBtn.getBoundingClientRect()
this.headerDimensions = this.dom.$headerContainer.getBoundingClientRect()
this.searchWidth =
this.headerDimensions.left +
this.headerDimensions.width -
this.searchSvgDimensions.left -
20
this.el.style = `--search-width: ${this.searchWidth}px`
}
handleBtnNavClick() {
const isExpanded = this.dom.$btnNav.getAttribute('aria-expanded') === 'true'
this.el.classList.toggle('header--expanded', !isExpanded)
this.dom.$btnNav.setAttribute('aria-expanded', !isExpanded)
this.closeSearchInput(false)
if (isExpanded) {
this.mainFocusTrap.deactivate()
} else {
this.mainFocusTrap.activate()
}
}
handleMobileItemBtnClick(e) {
e.currentTarget.setAttribute('aria-expanded', true)
}
handleItemActive(e) {
this.dom.$activePage?.classList.remove('header__item--active')
const clickedLink = e.currentTarget.closest('.header__item')
clickedLink.classList.add('header__item--active')
this.dom.$activePage = clickedLink
const butHref = e.currentTarget.getAttribute('href')
if (butHref.indexOf('#')) {
if (
window.location.pathname === butHref.substring(0, butHref.indexOf('#'))
) {
this.dom.$itemBtn.forEach(($btn) =>
$btn.setAttribute('aria-expanded', false)
)
}
}
}
handleMenuItemBackBtnClick(e) {
const menu = e.currentTarget.closest('.header__mobile-inner-nav')
const triggerBtn = menu.previousElementSibling
triggerBtn.setAttribute('aria-expanded', false)
triggerBtn.focus()
}
handleMobileInnerNavFocusout(e) {
if (!e.currentTarget.contains(e.relatedTarget)) {
const triggerBtn = e.currentTarget.previousElementSibling
triggerBtn.setAttribute('aria-expanded', false)
}
}
handleSearchFocusout(e) {
if (!e.currentTarget.contains(e.relatedTarget) && e.relatedTarget) {
this.closeSearchInput(false)
}
}
handleItemBtnClick(e) {
e.stopImmediatePropagation()
const isExpanded = e.currentTarget.getAttribute('aria-expanded') === 'true'
Array.from(this.dom.$itemBtn)
.filter(($btn) => $btn !== e.currentTarget)
.forEach(($btn) => $btn.setAttribute('aria-expanded', false))
e.currentTarget.setAttribute('aria-expanded', !isExpanded)
}
handleOutsideClick(e) {
if (!e.target.closest('.header__search')) {
this.closeSearchInput(false)
}
if (!e.target.closest('.header__inner-nav')) {
this.dom.$itemBtn.forEach(($btn) =>
$btn.setAttribute('aria-expanded', false)
)
}
}
handleSearchBtnClick() {
this.el.classList.remove('header--expanded')
this.dom.$btnNav.setAttribute('aria-expanded', false)
this.dom.$searchField.classList.add('header__search-field--open')
this.dom.$searchBtn.setAttribute('tabindex', -1)
}
handleSearchFieldTransitionEnd(e) {
if (e.propertyName === 'visibility') {
this.dom.$searchInput.focus()
}
}
handleSearchInputKeydown(e) {
switch (e.keyCode) {
case ESCAPE:
this.closeSearchInput()
break
case DOWN:
{
e.preventDefault()
const links = this.dom.$resultsList.querySelectorAll('a')
if (this.dom.$searchField.dataset.hasResults === 'true' && links) {
links[0].focus()
} else {
links[0].focus()
}
}
break
case UP:
{
e.preventDefault()
const links = this.dom.$resultsList.querySelectorAll('a')
if (this.dom.$searchField.dataset.hasResults === 'true' && links) {
links[links.length - 1].focus()
}
}
break
case RETURN:
this.dom.$viewAll.click()
break
default:
break
}
}
handleResultsListKeydown(e) {
if (this.dom.$searchField.dataset.hasResults === 'true') {
const links = Array.from(this.dom.$resultsList.querySelectorAll('a'))
const currentIndex = links.findIndex(
(link) => link === document.activeElement
)
switch (e.keyCode) {
case DOWN:
e.preventDefault()
links[(currentIndex + 1) % links.length].focus()
break
case UP:
e.preventDefault()
links[(currentIndex - 1 + links.length) % links.length].focus()
break
case TAB: {
e.preventDefault()
if (e.shiftKey) {
this.dom.$searchInput.focus()
} else {
this.dom.$viewAll.focus()
}
}
default:
break
}
}
}
handleSearchInputBlur(e) {
if (!e.target.value) {
this.closeSearchInput(false)
}
}
closeSearchInput(focusBtn = true) {
this.dom.$searchBtn.removeAttribute('tabindex')
this.dom.$searchField.classList.remove('header__search-field--open')
this.dom.$searchField.setAttribute('aria-expanded', false)
if (focusBtn) {
this.dom.$searchBtn.focus()
}
}
handleMobileInnerNavTransitionEnd(e) {
const backButton = e.currentTarget.querySelector(
'.header__mobile-item--back button'
)
if (e.propertyName === 'visibility') {
backButton.focus()
}
}
handleClearInputBtn() {
this.dom.$searchInput.focus()
this.dom.$searchInput.value = ''
this.dom.$searchField.setAttribute('aria-expanded', false)
this.dom.$clearInputBtn.hidden = true
}
async handleSearchInputChange(e) {
const { value } = e.target
const [key, val] = this.dom.$viewAll.dataset.additionalQueryString?.split(
'='
) || [null, null]
if (value) {
this.dom.$clearInputBtn.hidden = false
const response = await fetch(
stringifyUrl({ url: this.endpoint, query: { query: value } })
).then((blob) => blob.json())
if (response?.Results?.length) {
const resultsListHtml = response.Results.map(searchSuggestion).join('')
this.dom.$resultsList.hidden = false
this.dom.$resultsList.setAttribute('role', 'listbox')
this.dom.$resultsList.innerHTML = resultsListHtml
this.dom.$searchField.setAttribute('aria-expanded', true)
this.dom.$searchAnnounce.textContent = `${convertToText(
response.Results.length
)} suggestion${
response.Results.length > 1 ? 's' : ''
} found, to navigate use up and down`
this.dom.$searchField.dataset.hasResults = true
this.dom.$viewAll.href = stringifyUrl({
url: this.searchPageUrl,
query: {
keyword: value,
...(key && { [key]: val })
}
})
} else if (response?.DidYouMean) {
this.dom.$resultsList.hidden = false
this.dom.$resultsList.removeAttribute('role')
this.dom.$resultsList.innerHTML = searchSuggestionDidYouMean(
response?.DidYouMean?.Label,
response?.DidYouMean?.Value,
stringifyUrl({
url: this.searchPageUrl,
query: {
keyword: response.DidYouMean?.Value,
...(key && { [key]: val })
}
}),
0
)
this.dom.$searchField.dataset.hasResults = false
this.dom.$resultsList.removeAttribute('role')
this.dom.$searchField.setAttribute('aria-expanded', true)
this.dom.$searchAnnounce.textContent = ''
this.dom.$viewAll.href = stringifyUrl({
url: this.searchPageUrl,
query: {
keyword: value,
...(key && { [key]: val })
}
})
}
} else {
this.dom.$clearInputBtn.hidden = true
this.dom.$resultsList.hidden = true
this.dom.$resultsList.innerHTML = ''
this.dom.$searchField.dataset.hasResults = false
this.dom.$searchField.setAttribute('aria-expanded', false)
}
}
handleListFocus(e) {
const suggestions = this.el.querySelectorAll(
'.header__search-item:not(.header__search-item--did-you-mean)'
)
const item = e.target.closest(
'.header__search-item:not(.header__search-item--did-you-mean)'
)
suggestions.forEach((suggestion) =>
suggestion.setAttribute('aria-selected', false)
)
if (item) {
item.setAttribute('aria-selected', true)
this.dom.$searchInput.setAttribute('aria-activedescendant', item.id)
} else {
this.dom.$searchInput.removeAttribute('aria-activedescendant')
}
}
handleSearchFieldKeyup(e) {
const links = this.dom.$resultsList.querySelectorAll('a')
if (
document.activeElement === this.dom.$searchInput &&
e.keyCode === DOWN &&
links
) {
links[0].focus()
}
}
handleResize() {
if (this.dom.$searchBtn) {
this.searchInputWidth()
}
}
handleScroll() {
const st = window.pageYOffset || document.documentElement.scrollTop
if (window.pageYOffset > 100) {
if (st > this.lastScrollTop) {
if (!this.el.classList.contains('header--scroll-down')) {
this.el.classList.add('header--scroll-down')
}
} else {
if (this.el.classList.contains('header--scroll-down')) {
this.el.classList.remove('header--scroll-down')
}
}
this.lastScrollTop = st <= 0 ? 0 : st
} else {
this.el.classList.remove('header--scroll-down')
}
}
}
export default Header
This component can be both a <header> and a link (<a>) that looks like a header.
There are two different themes to this header. One is a light header (primary) that will be used on darker backgrounds, and a lighter header (secondary) that will be used on darker background.
Add the front-end-copmonent library to your project
yarn add @verndale/front-end-componentsImport the style to your main style file in your project
@import "../../node_modules/@verndale/front-end-components/lib/header/styles";Copy and paste to your project any of the markup in the header variations - you can find the markup in the HTML tab.
The component will already have a default style/theme set, so it will work out of the box. The header has a set of variables that may be overriden, or you may choose to just override the actual styles in your project. It is recommended to use the overrides if you can as it will be less code in your project.
Below is the list of variables you can override. You may also find these in the Assets tab under _variables.scss
// Primary header
$btn-primary-background
$btn-primary-focus-background
$btn-primary-text-color
$btn-primary-outline-border
$btn-primary-outline-text-color
$btn-primary-outline-focus-background
$btn-primary-outline-focus-border
$btn-primary-outline-focus-text-color
$btn-primary-disabled-background
$btn-primary-disabled-text-color
// Secondary header
$btn-secondary-background
$btn-secondary-focus-background
$btn-secondary-focus-text-color
$btn-secondary-text-color
$btn-secondary-outline-border
$btn-secondary-outline-text-color
$btn-secondary-outline-focus-background
$btn-secondary-outline-focus-text-color
$btn-secondary-disabled-border
$btn-secondary-disabled-text-colorYou always need to set your overrides before the import of you component - for example:
$btn-primary-background: #808080;
$btn-primary-focus-background: #101010;
@import "../../node_modules/@verndale/front-end-components/lib/header/styles";