<nav role="navigation" class="c-main-menu-open">
<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>
{% set base_class = main_menu_open.base_class|default('c-main-menu-open') %}
{% if main_menu_open.items %}
<nav role="navigation" class="{{ bem(base_class, main_menu_open.element, main_menu_open.modifiers, main_menu_open.extra) }}" {{ attributes(main_menu_open.attributes) }}>
{% render "@button" with {
"button": {
"text": "Close Menu",
"url": "#",
"modifiers": "secondary",
"icon": {
"name": "close"
}
}
}
%}
<div class="{{ bem(base_class, 'grid') }}">
{% for item in main_menu_open.items %}
{% render "@action-card" with {
"action_card": item.action_card
} %}
{% endfor %}
</div>
</nav>
{% endif %}
{
"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"
}
]
}
}
}
}
]
}
}
/* ------------------------------------*\
$MAIN MENU OPEN
\*------------------------------------ */
.c-main-menu-open {
width: 100%;
height: 100%;
background-color: rgba(87, 85, 68, .75);
padding: var(--ds-space-xs);
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-end;
gap: var(--ds-space-xs);
&__grid {
display: grid;
gap: var(--ds-space-xs);
height: 100%;
width: 100%;
@include media(">large") {
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 1fr 1fr;
}
}
.c-action-card {
height: 100%;
background-color: transparent;
@include media(">large") {
&:nth-child(1) {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
&:nth-child(2) {
grid-column: 3 / 6;
grid-row: 1 / 2;
}
&:nth-child(3) {
grid-column: 1 / 4;
grid-row: 2 / 3;
}
&:nth-child(4) {
grid-column: 4 / 6;
grid-row: 2 / 3;
}
}
}
.o-button--secondary {
background-color: var(--ds-color-gray-101);
box-shadow: 0 0 var(--ds-space-xs) var(--ds-color-gray-104);
@include media(">large") {
position: absolute;
top: var(--ds-space-md);
right: var(--ds-space-xs);
z-index: var(--ds-z-index-top);
}
}
}
No notes defined.