<div class="c-home-dropdown l-wrap l-container--full ">
<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>
{% set base_class = home_dropdown.base_class|default('c-home-dropdown') %}
<div class="{{ bem(base_class, home_dropdown.element, home_dropdown.modifiers, home_dropdown.extra) }} l-wrap l-container--full {% if home_dropdown.hide %}is-hidden{% endif %}">
<p class={{ bem(base_class, "label") }} id="select-home-label">{{home_dropdown.label}}</p>
{% include "@select-home" with {
"select_home": home_dropdown.select_home
} %}
</div>
{
"home_dropdown": {
"label": "I'm Curious About:",
"hide": false,
"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"
}
]
}
}
}
.c-home-dropdown {
display: flex;
flex-direction: column;
align-items: center;
padding-top: var(--ds-space-super);
z-index: var(--ds-z-index-top);
&.is-hidden {
opacity: 0;
visibility: hidden;
}
&__label {
display: block;
text-align: center;
}
}
No notes defined.