<div class="o-homepage-animation js-homepage-animation">
<div class="c-home-dropdown l-wrap l-container--full is-hidden">
<p class=c-home-dropdown__label id="select-home-label">I'm Curious About:</p>
<div class="o-select-home js-this">
<div class="o-select-home__container l-container">
<button type="button" class="o-select-home__button js-toggle" data-toggled="this" data-prefix="o-select-home" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="selected-option">
<span class="o-select-home__button-text" id="selected-option">
<span class="styled">Everything</span>
</span>
<span class="o-select-home__button-arrow o-button o-button--icon has-icon" aria-label="Open">
<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="M4.44 10.06L5.5 9L12.28 15.78H12.66L19.44 9L20.5 10.06L13.28 17.28H11.66L4.44 10.06Z" />
</svg>
</span>
</span>
</button>
<div class="o-select-home__list" role="listbox" aria-labelledby="close-button" tabindex="1">
<button role="option" class="o-select-home__option option-1" aria-selected="true">
<span class="styled">Everything</span>
</button>
<button role="option" class="o-select-home__option option-2" aria-selected="false">
<span class="styled">...what's new</span> at the d.school
</button>
<button role="option" class="o-select-home__option option-3" aria-selected="false">
<span class="styled">...getting started</span> in design
</button>
<button role="option" class="o-select-home__option option-4" aria-selected="false">
...the relationship between <span class="styled">design & business</span>
</button>
<button role="option" class="o-select-home__option option-5" aria-selected="false">
...the future of <span class="styled">AI & design</span>
</button>
<button role="option" class="o-select-home__option option-6" aria-selected="false">
<span class="styled">...equity-centered design</span> principles
</button>
</div>
</div>
</div>
</div>
<div class="o-homepage-animation__content">
<div class="o-homepage-animation__lines">
<div class="o-homepage-animation__line">
<div class="o-homepage-animation__line-inner"></div>
</div>
<div class="o-homepage-animation__line">
<div class="o-homepage-animation__line-inner"></div>
</div>
<div class="o-homepage-animation__line">
<div class="o-homepage-animation__line-inner"></div>
</div>
<div class="o-homepage-animation__line">
<div class="o-homepage-animation__line-inner"></div>
</div>
<div class="o-homepage-animation__line">
<div class="o-homepage-animation__line-inner"></div>
</div>
<div class="o-homepage-animation__line">
<div class="o-homepage-animation__line-inner"></div>
</div>
<div class="o-homepage-animation__line">
<div class="o-homepage-animation__line-inner"></div>
</div>
</div>
<div class="c-card-grid l-wrap l-container--full">
<div class="c-card-grid__container l-container" data-grid="five" data-layout="standard">
<div class="c-card is-hidden" data-theme="blue" data-layout="page" style="background-image: url('../../images/texture-card-proed.png'); background-size: cover;">
<div class="c-card__label-wrapper">
<span class="c-card__label o-detail--7 ">Read more</span>
</div>
<div class="c-card__content-wrapper">
<h3 class="o-heading c-card__title o-heading--h3-primary">
Professional Education
</h3>
<a class="o-button o-button--icon c-card__button has-icon" href="#">
<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="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>
</div>
</div>
<div class="c-card is-hidden" data-theme="default" data-layout="page" style="background-image: url('../../images/texture-card-about.png'); background-size: cover;">
<div class="c-card__label-wrapper">
<span class="c-card__label o-detail--7 ">Read more</span>
</div>
<div class="c-card__content-wrapper">
<h3 class="o-heading c-card__title o-heading--h3-primary">
About
</h3>
<a class="o-button o-button--icon c-card__button has-icon" href="#">
<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="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>
</div>
</div>
<div class="c-card is-hidden" data-theme="pink" data-layout="page" style="background-image: url('../../images/texture-card-study.png'); background-size: cover;">
<div class="c-card__label-wrapper">
<span class="c-card__label o-detail--7 ">Read more</span>
</div>
<div class="c-card__content-wrapper">
<h3 class="o-heading c-card__title o-heading--h3-primary">
Study
</h3>
<a class="o-button o-button--icon c-card__button has-icon" href="#">
<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="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>
</div>
</div>
<div class="c-card is-hidden" data-theme="teal" data-layout="page" style="background-image: url('../../images/texture-card-innovate.png'); background-size: cover;">
<div class="c-card__label-wrapper">
<span class="c-card__label o-detail--7 ">Read more</span>
</div>
<div class="c-card__content-wrapper">
<h3 class="o-heading c-card__title o-heading--h3-primary">
Innovate
</h3>
<a class="o-button o-button--icon c-card__button has-icon" href="#">
<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="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>
</div>
</div>
<div class="c-card is-hidden" data-theme="gray" data-layout="page" style="background-image: url('../../images/texture-card-connect.png'); background-size: cover;">
<div class="c-card__label-wrapper">
<span class="c-card__label o-detail--7 ">Read more</span>
</div>
<div class="c-card__content-wrapper">
<h3 class="o-heading c-card__title o-heading--h3-primary">
Connect
</h3>
<a class="o-button o-button--icon c-card__button has-icon" href="#">
<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="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>
</div>
</div>
<div class="c-card is-hidden" data-theme="gray" data-layout="bio">
<div class="c-card__label-wrapper">
<span class="c-card__label o-detail--7 ">People</span>
</div>
<div class="c-card__content-wrapper">
<img class="o-image c-card__image" loading="lazy" src="../../images/card_bio.png" alt="Scott Doorley" />
<div class="c-card__inner-wrapper">
<div class="c-card__title-wrapper">
<h3 class="o-heading c-card__title o-heading--h4-primary">
Scott Doorley
</h3>
<span class="bem(base_class, 'subtitle') o-body--p2">Creative Director</span>
</div>
<span class="c-card__topic o-detail--6">Global Topic text</span>
</div>
</div>
</div>
<div class="c-card is-hidden" data-theme="yellow" data-layout="event">
<div class="c-card__label-wrapper">
<span class="c-card__label o-detail--7 ">Event</span>
</div>
<div class="c-card__content-wrapper">
<img class="o-image c-card__image" loading="lazy" src="../../images/card_event.png" alt="[Event Title 50 Char] Lorem ipsum dolor sit vulputate" />
<div class="c-card__inner-wrapper">
<h3 class="o-heading c-card__title o-heading--h4-secondary">
[Event Title 50 Char] Lorem ipsum dolor sit vulput...
</h3>
<div class=c-card__columns>
<span class="o-caption--primary-caption2">07/27/24</span>
<span class="o-caption--primary-caption2">Single Event</span>
<span class="o-caption--primary-caption2">07/27/24</span>
<span class="o-caption--primary-caption2">In-Person</span>
</div>
</div>
</div>
</div>
<div class="c-card is-hidden" data-theme="black" data-layout="course">
<div class="c-card__label-wrapper">
<span class="c-card__label o-detail--7 ">Course</span>
</div>
<div class="c-card__content-wrapper">
<img class="o-image c-card__image" loading="lazy" src="../../images/card_event.png" alt="[Course Title 50 Char] Lorem ipsum dolor sit vulputate" />
<div class="c-card__inner-wrapper">
<h3 class="o-heading c-card__title o-heading--h4-secondary">
[Course Title 50 Char] Lorem ipsum dolor sit vulpu...
</h3>
<div class=c-card__columns>
<span class="o-caption--primary-caption2">3 Units</span>
<span class="o-caption--primary-caption2">M, Tu, W, Th, F</span>
<span class="o-caption--primary-caption2">G / UG / E</span>
<span class="o-caption--primary-caption2">Fall-Winter '24</span>
</div>
</div>
</div>
</div>
<div class="c-card is-hidden" data-theme="pink" data-layout="product">
<div class="c-card__label-wrapper">
<span class="c-card__label o-detail--7 ">Buy Now</span>
</div>
<div class="c-card__content-wrapper">
<img class="o-image c-card__image" loading="lazy" src="../../images/card_product.png" alt="[Product Title 50 Char] Lorem ipsum dolor sit vulputate" />
<div class="c-card__inner-wrapper">
<h3 class="o-heading c-card__title o-heading--h4-primary">
[Product Title 50 Char] Lorem ipsum dolor sit vulp...
</h3>
<a class="o-link o-link--secondary" href="#" target="_self">
<span class="o-link__label">
Learn More
</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>
</div>
</div>
</div>
<div class="c-card is-hidden" data-theme="black" data-layout="resource">
<div class="c-card__label-wrapper">
<span class="c-card__label o-detail--7 ">Tool</span>
</div>
<div class="c-card__content-wrapper">
<h3 class="o-heading c-card__title o-heading--h3-primary">
Resource Title 100 char] velit, sodales vel venenatis vitae, ultrices quis risus. Aenean varius maur...
</h3>
<h3 class="o-heading o-heading--md c-card__subtitle o-heading--h3-secondary">
Resource Subtitle 100 char] velit, sodales vel venenatis
</h3>
<span class="c-card__topic o-detail--6">Global Topic text</span>
</div>
</div>
</div>
</div>
<div class="c-homepage-banner l-wrap l-container--full is-hidden" role="complementary" aria-label="Information banner">
<div class="c-homepage-banner__grid">
<div class="c-homepage-banner__content">
<h2 class="o-heading c-homepage-banner__heading">
<a class="o-heading__link" href="">
About Stanford [150 Char Max]
</a>
</h2>
<p class="c-homepage-banner__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
</div>
</div>
{% set base_class = homepage_animation.base_class|default('o-homepage-animation') %}
<div class="{{ bem(base_class, homepage_animation.element, homepage_animation.modifiers, homepage_animation.extra) }} js-homepage-animation">
{% include "@home-dropdown" %}
<div class="{{ bem(base_class, 'content') }}">
<div class="{{ bem(base_class, 'lines') }}">
<div class="{{ bem(base_class, 'line') }}">
<div class="{{ bem(base_class, 'line-inner') }}"></div>
</div>
<div class="{{ bem(base_class, 'line') }}">
<div class="{{ bem(base_class, 'line-inner') }}"></div>
</div>
<div class="{{ bem(base_class, 'line') }}">
<div class="{{ bem(base_class, 'line-inner') }}"></div>
</div>
<div class="{{ bem(base_class, 'line') }}">
<div class="{{ bem(base_class, 'line-inner') }}"></div>
</div>
<div class="{{ bem(base_class, 'line') }}">
<div class="{{ bem(base_class, 'line-inner') }}"></div>
</div>
<div class="{{ bem(base_class, 'line') }}">
<div class="{{ bem(base_class, 'line-inner') }}"></div>
</div>
<div class="{{ bem(base_class, 'line') }}">
<div class="{{ bem(base_class, 'line-inner') }}"></div>
</div>
</div>
{% include "@card-grid" %}
{% include "@homepage-banner" %}
</div>
</div>
{
"home_dropdown": {
"label": "I'm Curious About:",
"hide": true,
"select_home": {
"options": [
{
"text": "Everything",
"bold_text": "Everything"
},
{
"text": "...what's new at the d.school",
"bold_text": "...what's new"
},
{
"text": "...getting started in design",
"bold_text": "...getting started"
},
{
"text": "...the relationship between design & business",
"bold_text": "design & business"
},
{
"text": "...the future of AI & design",
"bold_text": "AI & design"
},
{
"text": "...equity-centered design principles",
"bold_text": "...equity-centered design"
}
]
}
},
"card_grid": {
"columns": "five",
"type": "standard",
"cards": [
{
"card": {
"title": "Professional Education",
"label": "Read more",
"image": "../../images/texture-card-proed.png",
"url": "#",
"attributes": {
"theme": "blue",
"layout": "page"
},
"hide": true
}
},
{
"card": {
"title": "About",
"label": "Read more",
"image": "../../images/texture-card-about.png",
"url": "#",
"attributes": {
"theme": "default",
"layout": "page"
},
"hide": true
}
},
{
"card": {
"title": "Study",
"label": "Read more",
"image": "../../images/texture-card-study.png",
"url": "#",
"attributes": {
"theme": "pink",
"layout": "page"
},
"hide": true
}
},
{
"card": {
"title": "Innovate",
"label": "Read more",
"image": "../../images/texture-card-innovate.png",
"url": "#",
"attributes": {
"theme": "teal",
"layout": "page"
},
"hide": true
}
},
{
"card": {
"title": "Connect",
"label": "Read more",
"image": "../../images/texture-card-connect.png",
"url": "#",
"attributes": {
"theme": "gray",
"layout": "page"
},
"hide": true
}
},
{
"card": {
"title": "Scott Doorley",
"subtitle": "Creative Director",
"label": "People",
"image": "../../images/card_bio.png",
"topic": "Global Topic text",
"attributes": {
"theme": "gray",
"layout": "bio"
},
"hide": true
}
},
{
"card": {
"title": "[Event Title 50 Char] Lorem ipsum dolor sit vulputate",
"label": "Event",
"image": "../../images/card_event.png",
"columns": [
{
"left": "07/27/24",
"right": "Single Event"
},
{
"left": "07/27/24",
"right": "In-Person"
}
],
"attributes": {
"theme": "yellow",
"layout": "event"
},
"hide": true
}
},
{
"card": {
"title": "[Course Title 50 Char] Lorem ipsum dolor sit vulputate",
"label": "Course",
"image": "../../images/card_event.png",
"columns": [
{
"left": "3 Units",
"right": "M, Tu, W, Th, F"
},
{
"left": "G / UG / E",
"right": "Fall-Winter '24"
}
],
"attributes": {
"theme": "black",
"layout": "course"
},
"hide": true
}
},
{
"card": {
"title": "[Product Title 50 Char] Lorem ipsum dolor sit vulputate",
"label": "Buy Now",
"image": "../../images/card_product.png",
"cta": "Learn More",
"url": "#",
"attributes": {
"theme": "pink",
"layout": "product"
},
"hide": true
}
},
{
"card": {
"title": "Resource Title 100 char] velit, sodales vel venenatis vitae, ultrices quis risus. Aenean varius mauris vel",
"label": "Tool",
"subtitle": "Resource Subtitle 100 char] velit, sodales vel venenatis",
"topic": "Global Topic text",
"image": "",
"attributes": {
"theme": "black",
"layout": "resource"
},
"hide": true
}
}
]
},
"homepage_banner": {
"title": "About Stanford [150 Char Max]",
"text": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.",
"hide": true
}
}
No notes defined.