<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>
{% set base_class = select_home.base_class|default('o-select-home') %}
<div class="{{ bem(base_class, select_home.element, select_home.modifiers, select_home.extra) }} js-this">
<div class="{{ bem(base_class, 'container') }} l-container">
<button type="button" class="{{ bem(base_class, 'button') }} js-toggle" data-toggled="this" data-prefix="o-select-home" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="selected-option">
<span class="{{ bem(base_class, 'button-text') }}" id="selected-option">
{% if select_home.options[0].bold_text in select_home.options[0].text %}
{{ select_home.options[0].text|replace({(select_home.options[0].bold_text): '<span class="styled">' ~ select_home.options[0].bold_text ~ '</span>'})|raw }}
{% else %}
{{ ('<span class="styled">' ~ select_home.options[0].bold_text ~ '</span>' ~ select_home.options[0].text|replace({(select_home.options[0].bold_text): ''}))|raw }}
{% endif %}
</span>
<span class="{{ bem(base_class, 'button-arrow') }} o-button o-button--icon has-icon" aria-label="Open">
{% include "@icon" with {
"icon": {
"name": "chevron-down",
"class": "chevron"
}
} %}
</span>
</button>
<div class="{{ bem(base_class, 'list') }}" role="listbox" aria-labelledby="close-button" tabindex="1">
{% for option in select_home.options %}
<button role="option" class="{{ bem(base_class, 'option') }} option-{{ loop.index }}" aria-selected="{{ loop.first ? 'true' : 'false' }}">
{% if option.bold_text in option.text %}
{% set sanitized_text = option.text|escape %}
{% set sanitized_bold = option.bold_text|escape %}
{{ sanitized_text|replace({(sanitized_bold): '<span class="styled">' ~ sanitized_bold ~ '</span>'})|raw }}
{% else %}
{% set sanitized_text = option.text|escape %}
{% set sanitized_bold = option.bold_text|escape %}
{{ ('<span class="styled">' ~ sanitized_bold ~ '</span>' ~ sanitized_text|replace({(sanitized_bold): ''}))|raw }}
{% endif %}
</button>
{% endfor %}
</div>
</div>
</div>
{
"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"
}
]
}
}
No notes defined.