<header class="c-main-menu">
<div class="c-main-menu__inner">
<a href="/" class="c-main-menu__logo">
<div class="o-logo c-main-menu__logo" data-grid="12 9@lg">
<a href="#" class="o-logo__link">
<svg xmlns="http://www.w3.org/2000/svg" width="110.49" height="50" viewBox="0 0 110.49 50">
<path d="M91.9,13.21c1.38,0,2.54-1.11,2.54-2.51s-1.16-2.51-2.54-2.51-2.54,1.11-2.54,2.51,1.16,2.51,2.54,2.51ZM25.93,44.62c-1.49,0-2.65,1.14-2.65,2.62s1.16,2.65,2.65,2.65,2.65-1.14,2.65-2.65-1.16-2.62-2.65-2.62Z" fill="var(--ds-color-red-204)" />
<path d="M15.07,15.73c0-7.35-9.66-4.94-9.66-8.51,0-1.35,1.03-2.19,2.35-2.19,1.43,0,2.33,1,2.71,2.16l4-1.49c-.89-2.65-3.35-4.35-6.55-4.35C3.87,1.35,1.17,4.19,1.17,7.51c0,7.13,9.58,4.54,9.58,8.43,0,1.68-1.3,2.73-3.03,2.73-1.84,0-3.19-1.27-3.65-3.22l-4.06,1.3c.76,3.4,3.79,5.62,7.57,5.62,4.14,0,7.49-2.81,7.49-6.65ZM24.84,8.49h-2.73v-4.41h-4.11v4.41h-2.06v3.54h2.06v10.03h4.11v-10.03h2.73v-3.54ZM36.74,10.11c-.81-1.05-2.35-1.95-4.22-1.95-3.71,0-6.71,3.05-6.71,7.11s3,7.11,6.71,7.11c1.87,0,3.41-.89,4.22-1.95v1.62h4.11v-13.57h-4.11v1.62ZM33.39,18.84c-2,0-3.49-1.54-3.49-3.57s1.49-3.57,3.49-3.57,3.46,1.54,3.46,3.57-1.49,3.57-3.46,3.57ZM56.41,22.05v-8.92c0-2.95-1.87-4.97-4.87-4.97-1.79,0-3.14.84-3.95,1.89v-1.57h-4.11v13.57h4.11v-7.46c0-1.59.92-2.76,2.44-2.76s2.27,1.03,2.27,2.43v7.78h4.11ZM60.14,5.19v3.3h-1.98v3.54h1.98v10.03h4.11v-10.03h3.03v-3.54h-3.03v-3.05c0-1.24.76-1.86,1.89-1.86.49,0,.87.08,1.27.27V.32c-.51-.22-1.19-.32-2.03-.32-3.19,0-5.25,2.03-5.25,5.19ZM75.43,22.38c3.95,0,7.3-3.03,7.3-7.11s-3.35-7.11-7.3-7.11-7.33,3.03-7.33,7.11,3.38,7.11,7.33,7.11ZM75.43,11.7c1.97,0,3.46,1.54,3.46,3.57s-1.49,3.57-3.46,3.57-3.49-1.54-3.49-3.57,1.49-3.57,3.49-3.57ZM88.6,8.49h-4.11v13.57h4.11v-13.57ZM106.38.27v9.84c-.78-1.05-2.33-1.95-4.19-1.95-3.71,0-6.71,3.05-6.71,7.11s3,7.11,6.71,7.11c1.87,0,3.41-.89,4.19-1.95v1.62h4.11V.27h-4.11ZM103.02,18.84c-1.97,0-3.46-1.54-3.46-3.57s1.49-3.57,3.46-3.57,3.49,1.54,3.49,3.57-1.49,3.57-3.49,3.57ZM17.95,37.73c-.78-1.05-2.33-1.95-4.19-1.95-3.71,0-6.71,3.05-6.71,7.11s3,7.11,6.71,7.11c1.87,0,3.41-.89,4.19-1.95v1.62h4.11v-21.78h-4.11v9.84ZM14.6,46.46c-1.98,0-3.46-1.54-3.46-3.57s1.49-3.57,3.46-3.57,3.49,1.54,3.49,3.57-1.49,3.57-3.49,3.57ZM34.32,39.95c0-.65.54-1.11,1.22-1.11.78,0,1.3.46,1.51,1.3l3.54-.89c-.62-2.11-2.52-3.46-5-3.46-3,0-5.03,2.05-5.03,4.4,0,4.97,6.41,3.35,6.41,5.46,0,.84-.68,1.27-1.49,1.27-.97,0-1.81-.62-2.14-1.76l-3.49,1.05c.6,2.41,3.06,3.78,5.57,3.78,2.73,0,5.36-1.78,5.36-4.57,0-5.08-6.47-3.49-6.47-5.49h0ZM45.95,42.89c0-2.11,1.65-3.49,3.52-3.49,1.14,0,1.92.35,2.6.92v-4c-.84-.35-1.73-.54-2.81-.54-3.9,0-7.25,3-7.25,7.11s3.35,7.11,7.25,7.11c1.08,0,1.97-.19,2.84-.54v-4c-.7.54-1.49.92-2.62.92-1.87,0-3.52-1.38-3.52-3.49h0ZM62.19,35.79c-1.79,0-3.14.84-3.95,1.89v-9.78h-4.11v21.78h4.11v-7.46c0-1.59.92-2.76,2.44-2.76s2.27,1.03,2.27,2.43v7.78h4.11v-8.92c0-2.95-1.87-4.97-4.87-4.97h0ZM76.06,35.79c-3.95,0-7.33,3.03-7.33,7.11s3.38,7.11,7.33,7.11,7.3-3.03,7.3-7.11-3.35-7.11-7.3-7.11ZM76.06,46.46c-2,0-3.49-1.54-3.49-3.57s1.49-3.57,3.49-3.57,3.46,1.54,3.46,3.57-1.49,3.57-3.46,3.57ZM92.11,35.79c-3.95,0-7.33,3.03-7.33,7.11s3.38,7.11,7.33,7.11,7.3-3.03,7.3-7.11-3.35-7.11-7.3-7.11ZM92.11,46.46c-2,0-3.49-1.54-3.49-3.57s1.49-3.57,3.49-3.57,3.46,1.54,3.46,3.57-1.49,3.57-3.46,3.57ZM105.28,27.89h-4.11v21.78h4.11v-21.78Z" fill="var(--ds-color-gray-106)" />
</svg>
</a>
</div>
</a>
<div class="c-main-menu__menu-wrapper">
<div class="c-main-menu__search">
<a class="o-button o-button--secondary has-icon" href="#">
<span class="o-button__label">
Search
</span>
<span class="o-icon">
<svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path d="M3.06 22.3003L7.81 17.5503C9.44 18.9303 11.46 19.6203 13.49 19.6203C15.75 19.6203 18 18.7603 19.72 17.0403C23.16 13.6003 23.16 8.01027 19.72 4.57027C16.28 1.14027 10.69 1.14027 7.25 4.58027C3.99 7.84027 3.83 13.0303 6.75 16.4903L2 21.2303L3.06 22.2903V22.3003ZM8.31 5.64028C9.74 4.21028 11.61 3.50027 13.48 3.50027C15.35 3.50027 17.23 4.21028 18.65 5.64028C21.5 8.49027 21.5 13.1303 18.65 15.9803C15.8 18.8303 11.16 18.8303 8.31 15.9803C5.46 13.1303 5.46 8.49027 8.31 5.64028Z" />
</svg>
</span>
</a>
</div>
<button class="c-main-menu__toggle" data-menu-toggle aria-label="Toggle Menu" aria-expanded="false" aria-controls="main-menu-open">
<span class="c-main-menu__toggle-dots">
<span></span>
<span></span>
<span></span>
<span></span>
</span>
</button>
</div>
</div>
<div id="main-menu-open" class="c-main-menu__menu" data-menu-container hidden>
<nav role="navigation" class="c-main-menu-open" data-menu-close="true">
<a class="o-button o-button--secondary has-icon" href="#">
<span class="o-button__label">
Close Menu
</span>
<span class="o-icon">
<svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3492_52534)">
<path d="M4.71973 4.7207L20.2797 20.2807" stroke="#1F1C06" stroke-width="1.5" stroke-miterlimit="10" />
<path d="M20.2797 4.7207L4.71973 20.2807" stroke="#1F1C06" stroke-width="1.5" stroke-miterlimit="10" />
<path d="M13.5599 11.4404H11.4399V13.5604H13.5599V11.4404Z" stroke="#1F1C06" stroke-width="1.5" stroke-miterlimit="10" />
</g>
<defs>
<clipPath id="clip0_3492_52534">
<rect width="16.62" height="16.62" fill="white" transform="translate(4.18994 4.19043)" />
</clipPath>
</defs>
</svg>
</span>
</a>
<div class="c-main-menu-open__grid">
<div class="c-action-card" data-theme="cream">
<style>
.o-background-image--action-card-bg-yellow {
background-image: url("../../images/action-card/action-card-bg-yellow.webp");
}
@media(min-width: 768px) {
.o-background-image--action-card-bg-yellow {
background-image: url("../../images/action-card/action-card-bg-yellow.webp");
}
}
@media(min-width: 480px) {
.o-background-image--action-card-bg-yellow {
background-image: url("../../images/action-card/action-card-bg-yellow.webp");
}
}
</style>
<div class="o-background-image o-background-image--action-card-bg-yellow"></div>
<span class="o-kicker">
<span class="o-kicker__separator">·</span> Educate Yourself
</span>
<div class="c-action-card__nav">
<nav role="navigation" class="c-action" data-theme="red">
<a class="o-link c-action__link" href="/" target="_self">
<span class="o-icon">
<svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path d="M11.6099 21.1203L10.5499 22.1803L1.88986 13.5203V11.4803L10.5499 2.82031L11.6099 3.88031L3.73986 11.7503H23.1099V13.2503H3.73986L11.6099 21.1203Z" />
</svg>
</span>
<span class="o-link__label">
<span class="action__text--top"><span class="o-heading--h3-primary">Study</span> <span class="c-action__separator">·</span><span class="o-heading--h3-secondary-bold">Find Our <em> Degrees</em></span></span><span class="action__text--bottom"><span class="o-heading--h3-secondary-bold"><em>& Enroll</em></span><span class="o-heading--h3-secondary"> in Classes</span></span>
</span>
</a>
</nav>
<ul class="c-action-card__links">
<li class="c-action-card__link-item">
<a class="o-link c-action-card__link" href="/" target="_self">
<span class="o-link__label">
Stories
</span>
<span class="o-icon transition">
<svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3901 21.1203L14.4501 22.1803L23.1101 13.5203V11.4803L14.4501 2.82031L13.3901 3.88031L21.2601 11.7503H1.89014V13.2503H21.2601L13.3901 21.1203Z" />
</svg>
</span>
</a>
</li>
<li class="c-action-card__link-item">
<a class="o-link c-action-card__link" href="/" target="_self">
<span class="o-link__label">
Our Space
</span>
<span class="o-icon transition">
<svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3901 21.1203L14.4501 22.1803L23.1101 13.5203V11.4803L14.4501 2.82031L13.3901 3.88031L21.2601 11.7503H1.89014V13.2503H21.2601L13.3901 21.1203Z" />
</svg>
</span>
</a>
</li>
</ul>
</div>
<div class="o-ticker-tape">
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
</div>
</div>
<div class="c-action-card" data-theme="pink">
<style>
.o-background-image--action-card-bg-red {
background-image: url("../../images/action-card/action-card-bg-red.webp");
}
@media(min-width: 768px) {
.o-background-image--action-card-bg-red {
background-image: url("../../images/action-card/action-card-bg-red.webp");
}
}
@media(min-width: 480px) {
.o-background-image--action-card-bg-red {
background-image: url("../../images/action-card/action-card-bg-red.webp");
}
}
</style>
<div class="o-background-image o-background-image--action-card-bg-red"></div>
<span class="o-kicker">
<span class="o-kicker__separator">·</span> Educate Yourself
</span>
<div class="c-action-card__nav">
<nav role="navigation" class="c-action" data-theme="red">
<a class="o-link c-action__link" href="/" target="_self">
<span class="o-icon">
<svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path d="M11.6099 21.1203L10.5499 22.1803L1.88986 13.5203V11.4803L10.5499 2.82031L11.6099 3.88031L3.73986 11.7503H23.1099V13.2503H3.73986L11.6099 21.1203Z" />
</svg>
</span>
<span class="o-link__label">
<span class="action__text--top"><span class="o-heading--h3-primary">Study</span> <span class="c-action__separator">·</span><span class="o-heading--h3-secondary-bold">Find Our <em> Degrees</em></span></span><span class="action__text--bottom"><span class="o-heading--h3-secondary-bold"><em>& Enroll</em></span><span class="o-heading--h3-secondary"> in Classes</span></span>
</span>
</a>
</nav>
<ul class="c-action-card__links">
<li class="c-action-card__link-item">
<a class="o-link c-action-card__link" href="/" target="_self">
<span class="o-link__label">
Stories
</span>
<span class="o-icon transition">
<svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3901 21.1203L14.4501 22.1803L23.1101 13.5203V11.4803L14.4501 2.82031L13.3901 3.88031L21.2601 11.7503H1.89014V13.2503H21.2601L13.3901 21.1203Z" />
</svg>
</span>
</a>
</li>
<li class="c-action-card__link-item">
<a class="o-link c-action-card__link" href="/" target="_self">
<span class="o-link__label">
Our Space
</span>
<span class="o-icon transition">
<svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3901 21.1203L14.4501 22.1803L23.1101 13.5203V11.4803L14.4501 2.82031L13.3901 3.88031L21.2601 11.7503H1.89014V13.2503H21.2601L13.3901 21.1203Z" />
</svg>
</span>
</a>
</li>
</ul>
</div>
<div class="o-ticker-tape">
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
</div>
</div>
<div class="c-action-card" data-theme="teal">
<style>
.o-background-image--action-card-bg-teal {
background-image: url("../../images/action-card/action-card-bg-teal.webp");
}
@media(min-width: 768px) {
.o-background-image--action-card-bg-teal {
background-image: url("../../images/action-card/action-card-bg-teal.webp");
}
}
@media(min-width: 480px) {
.o-background-image--action-card-bg-teal {
background-image: url("../../images/action-card/action-card-bg-teal.webp");
}
}
</style>
<div class="o-background-image o-background-image--action-card-bg-teal"></div>
<span class="o-kicker">
<span class="o-kicker__separator">·</span> Educate Yourself
</span>
<div class="c-action-card__nav">
<nav role="navigation" class="c-action" data-theme="red">
<a class="o-link c-action__link" href="/" target="_self">
<span class="o-icon">
<svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path d="M11.6099 21.1203L10.5499 22.1803L1.88986 13.5203V11.4803L10.5499 2.82031L11.6099 3.88031L3.73986 11.7503H23.1099V13.2503H3.73986L11.6099 21.1203Z" />
</svg>
</span>
<span class="o-link__label">
<span class="action__text--top"><span class="o-heading--h3-primary">Study</span> <span class="c-action__separator">·</span><span class="o-heading--h3-secondary-bold">Find Our <em> Degrees</em></span></span><span class="action__text--bottom"><span class="o-heading--h3-secondary-bold"><em>& Enroll</em></span><span class="o-heading--h3-secondary"> in Classes</span></span>
</span>
</a>
</nav>
<ul class="c-action-card__links">
<li class="c-action-card__link-item">
<a class="o-link c-action-card__link" href="/" target="_self">
<span class="o-link__label">
Stories
</span>
<span class="o-icon transition">
<svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3901 21.1203L14.4501 22.1803L23.1101 13.5203V11.4803L14.4501 2.82031L13.3901 3.88031L21.2601 11.7503H1.89014V13.2503H21.2601L13.3901 21.1203Z" />
</svg>
</span>
</a>
</li>
<li class="c-action-card__link-item">
<a class="o-link c-action-card__link" href="/" target="_self">
<span class="o-link__label">
Our Space
</span>
<span class="o-icon transition">
<svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3901 21.1203L14.4501 22.1803L23.1101 13.5203V11.4803L14.4501 2.82031L13.3901 3.88031L21.2601 11.7503H1.89014V13.2503H21.2601L13.3901 21.1203Z" />
</svg>
</span>
</a>
</li>
</ul>
</div>
<div class="o-ticker-tape">
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
</div>
</div>
<div class="c-action-card" data-theme="gray">
<style>
.o-background-image--action-card-bg-gray {
background-image: url("../../images/action-card/action-card-bg-gray.webp");
}
@media(min-width: 768px) {
.o-background-image--action-card-bg-gray {
background-image: url("../../images/action-card/action-card-bg-gray.webp");
}
}
@media(min-width: 480px) {
.o-background-image--action-card-bg-gray {
background-image: url("../../images/action-card/action-card-bg-gray.webp");
}
}
</style>
<div class="o-background-image o-background-image--action-card-bg-gray"></div>
<span class="o-kicker">
<span class="o-kicker__separator">·</span> Educate Yourself
</span>
<div class="c-action-card__nav">
<nav role="navigation" class="c-action" data-theme="red">
<a class="o-link c-action__link" href="/" target="_self">
<span class="o-icon">
<svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path d="M11.6099 21.1203L10.5499 22.1803L1.88986 13.5203V11.4803L10.5499 2.82031L11.6099 3.88031L3.73986 11.7503H23.1099V13.2503H3.73986L11.6099 21.1203Z" />
</svg>
</span>
<span class="o-link__label">
<span class="action__text--top"><span class="o-heading--h3-primary">Study</span> <span class="c-action__separator">·</span><span class="o-heading--h3-secondary-bold">Find Our <em> Degrees</em></span></span><span class="action__text--bottom"><span class="o-heading--h3-secondary-bold"><em>& Enroll</em></span><span class="o-heading--h3-secondary"> in Classes</span></span>
</span>
</a>
</nav>
<ul class="c-action-card__links">
<li class="c-action-card__link-item">
<a class="o-link c-action-card__link" href="/" target="_self">
<span class="o-link__label">
Stories
</span>
<span class="o-icon transition">
<svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3901 21.1203L14.4501 22.1803L23.1101 13.5203V11.4803L14.4501 2.82031L13.3901 3.88031L21.2601 11.7503H1.89014V13.2503H21.2601L13.3901 21.1203Z" />
</svg>
</span>
</a>
</li>
<li class="c-action-card__link-item">
<a class="o-link c-action-card__link" href="/" target="_self">
<span class="o-link__label">
Our Space
</span>
<span class="o-icon transition">
<svg width="25" height="25" viewBox="0 0 25 25" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3901 21.1203L14.4501 22.1803L23.1101 13.5203V11.4803L14.4501 2.82031L13.3901 3.88031L21.2601 11.7503H1.89014V13.2503H21.2601L13.3901 21.1203Z" />
</svg>
</span>
</a>
</li>
</ul>
</div>
<div class="o-ticker-tape">
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
<span class="o-ticker-tape__text">Learn More</span>
</div>
</div>
</div>
</nav>
</div>
</header>
{% set base_class = main_menu.base_class|default('c-main-menu') %}
<header class="{{ bem(base_class, main_menu.element, main_menu.modifiers, main_menu.extra) }}" {{ attributes(main_menu.attributes) }}>
<div class="{{ bem(base_class, 'inner') }}">
<a href="{{ main_menu.home_url|default('/') }}" class="{{ bem(base_class, 'logo') }}">
{% render "@logo" with {
"logo": {
"link": "#",
"extra": bem(base_class, 'logo'),
"attributes": {
"data-grid": "12 9@lg"
}
}
} %}
</a>
<div class="{{ bem(base_class, 'menu-wrapper') }}">
<div class="{{ bem(base_class, 'search') }}">
{% render "@button" with {
"button": {
"text": "Search",
"url": "#",
"modifiers": "secondary",
"icon": {
"name": "search"
}
}
}
%}
</div>
<button class="{{ bem(base_class, 'toggle') }}" data-menu-toggle aria-label="Toggle Menu" aria-expanded="false" aria-controls="main-menu-open">
<span class="{{ bem(base_class, 'toggle-dots') }}">
<span></span>
<span></span>
<span></span>
<span></span>
</span>
</button>
</div>
</div>
<div id="main-menu-open" class="{{ bem(base_class, 'menu') }}" data-menu-container hidden>
{% render "@main-menu-open" with {
"main_menu_open": {
"items": main_menu.menu_open.items,
"attributes": {
"data-menu-close": true
}
}
} %}
</div>
</header>
{
"main_menu": {
"home_url": "/",
"logo_url": "/images/stanford-dschool-logo.svg",
"menu_open": {
"main_menu_open": {
"items": [
{
"action_card": {
"attributes": {
"data-theme": "cream"
},
"background": {
"image": {
"id": "action-card-bg-yellow",
"src": "../../images/action-card/action-card-bg-yellow.webp",
"sources": [
{
"media": "(min-width: 768px)",
"srcset": "../../images/action-card/action-card-bg-yellow.webp"
},
{
"media": "(min-width: 480px)",
"srcset": "../../images/action-card/action-card-bg-yellow.webp"
}
]
}
}
}
},
{
"action_card": {
"attributes": {
"data-theme": "pink"
},
"background": {
"image": {
"id": "action-card-bg-red",
"src": "../../images/action-card/action-card-bg-red.webp",
"sources": [
{
"media": "(min-width: 768px)",
"srcset": "../../images/action-card/action-card-bg-red.webp"
},
{
"media": "(min-width: 480px)",
"srcset": "../../images/action-card/action-card-bg-red.webp"
}
]
}
}
}
},
{
"action_card": {
"attributes": {
"data-theme": "teal"
},
"background": {
"image": {
"id": "action-card-bg-teal",
"src": "../../images/action-card/action-card-bg-teal.webp",
"sources": [
{
"media": "(min-width: 768px)",
"srcset": "../../images/action-card/action-card-bg-teal.webp"
},
{
"media": "(min-width: 480px)",
"srcset": "../../images/action-card/action-card-bg-teal.webp"
}
]
}
}
}
},
{
"action_card": {
"attributes": {
"data-theme": "gray"
},
"background": {
"image": {
"id": "action-card-bg-gray",
"src": "../../images/action-card/action-card-bg-gray.webp",
"sources": [
{
"media": "(min-width: 768px)",
"srcset": "../../images/action-card/action-card-bg-gray.webp"
},
{
"media": "(min-width: 480px)",
"srcset": "../../images/action-card/action-card-bg-gray.webp"
}
]
}
}
}
}
]
}
}
}
}
.c-main-menu {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background-color: transparent;
&__inner {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: var(--ds-space-md) var(--ds-space-lg);
max-width: var(--max-width-wide);
margin: 0 auto;
}
&__logo {
display: block;
img {
height: 1.5rem;
width: auto;
}
}
&__menu-wrapper {
position: absolute;
display: flex;
align-items: center;
gap: var(--ds-space);
right: var(--ds-space-md);
}
&__search {
display: none;
@include media(">medium") {
display: block;
}
.o-button--secondary.has-icon {
height: 2.5rem;
padding: var(--ds-space-sm) var(--ds-space-xs) var(--ds-space-sm) var(--ds-space-sm);
background: var(--ds-color-gray-101);
border: 1px solid var(--ds-color-gray-102);
&:hover {
background: var(--ds-color-background-tertiary);
}
}
.o-button--secondary .o-icon {
background: transparent;
height: var(--ds-space-md);
width: var(--ds-space-md);
}
.o-button__label {
@extend .o-detail--5;
font-weight: var(--ds-font-weight-regular) !important;
}
}
&__toggle {
background: none;
border: none;
padding: var(--spacing-2);
cursor: pointer;
position: relative;
z-index: 99;
width: var(--ds-space-xl);
height: var(--ds-space-xl);
&:focus, &:hover:not(:disabled) {
background: transparent;
}
}
&__toggle-dots {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--ds-space-xs);
position: absolute;
span {
width: var(--ds-space-sm);
height: var(--ds-space-sm);
background-color: var(--ds-color-gray-106);
border-radius: 50%;
transition: width 0.3s ease, height 0.3s ease;
}
&:hover {
background: transparent;
span {
width: 1.125rem;
height: 1.125rem;
background-color: var(--ds-color-content-secondary);
}
}
}
&__menu {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--color-background);
z-index: 101;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
overflow-y: auto;
&:not([hidden]) {
opacity: 1;
visibility: visible;
}
}
}
class MainMenu {
constructor(element) {
this.menu = element;
this.toggleButton = this.menu.querySelector('[data-menu-toggle]');
this.menuContainer = this.menu.querySelector('[data-menu-container]');
this.closeButton = this.menu.querySelector('[data-menu-close]');
this.init();
}
init() {
this.toggleButton.addEventListener('click', () => this.toggleMenu());
// Add close button event listener directly using the reference from constructor
if (this.closeButton) {
this.closeButton.addEventListener('click', (e) => {
e.preventDefault();
this.closeMenu();
});
}
}
toggleMenu() {
const isExpanded = this.toggleButton.getAttribute('aria-expanded') === 'true';
this.toggleButton.setAttribute('aria-expanded', !isExpanded);
this.menuContainer.hidden = isExpanded;
}
closeMenu() {
this.toggleButton.setAttribute('aria-expanded', 'false');
this.menuContainer.hidden = true;
}
}
// Initialize all main menus on the page
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.c-main-menu').forEach(menu => {
new MainMenu(menu);
});
});
No notes defined.