FAA Pattern Library - Department of Urban and Regional Planning

Homepage Programs Section 

<div class="music-programs">
    <div class="music-programs__heading">
        <h2 class="music-programs__title">Explore the possibilities</h2>
        <div class="music-programs__subtitle">
            <p>The School of <em>Music</em> offers a selection of programs as vast and varied as the career paths they support.</p>
        </div>
    </div>
    <div class="music-programs__areas-of-study">
        <div class="music-programs__area" tabindex="1">
            <img class="music-programs__area-background" src="https://picsum.photos/640/575?random=1" alt="alt" width="500" height="446">
            <div class="music-programs__area-container">
                <h3 class="music-programs__area-title">Music education</h3>
                <ul class="music-programs__area-degrees">
                    <li class="music-programs__degree-li">
                        <a href="#" tabindex="1" class="music-programs__degree-link">
                                    Bachelors of education
                                    <span class="music-programs__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
                                </a>
                    </li>
                    <li class="music-programs__degree-li">
                        <a href="#" tabindex="1" class="music-programs__degree-link">
                                    Bachelors of a lot of text here ok
                                    <span class="music-programs__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
                                </a>
                    </li>
                    <li class="music-programs__degree-li">
                        <a href="#" tabindex="1" class="music-programs__degree-link">
                                    Bachelors
                                    <span class="music-programs__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
                                </a>
                    </li>
                    <li class="music-programs__degree-li">
                        <a href="#" tabindex="1" class="music-programs__degree-link">
                                    Bachelors
                                    <span class="music-programs__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
                                </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="music-programs__area" tabindex="1">
            <img class="music-programs__area-background" src="https://picsum.photos/640/575?random=2" alt="alt" width="500" height="446">
            <div class="music-programs__area-container">
                <h3 class="music-programs__area-title">Performance</h3>
                <ul class="music-programs__area-degrees">
                    <li class="music-programs__degree-li">
                        <a href="#" tabindex="1" class="music-programs__degree-link">
                                    Bachelors of education
                                    <span class="music-programs__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
                                </a>
                    </li>
                    <li class="music-programs__degree-li">
                        <a href="#" tabindex="1" class="music-programs__degree-link">
                                    Bachelors of a lot of text here ok
                                    <span class="music-programs__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
                                </a>
                    </li>
                    <li class="music-programs__degree-li">
                        <a href="#" tabindex="1" class="music-programs__degree-link">
                                    Bachelors
                                    <span class="music-programs__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
                                </a>
                    </li>
                    <li class="music-programs__degree-li">
                        <a href="#" tabindex="1" class="music-programs__degree-link">
                                    Bachelors
                                    <span class="music-programs__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
                                </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="music-programs__area" tabindex="1">
            <img class="music-programs__area-background" src="https://picsum.photos/640/575?random=3" alt="alt" width="500" height="446">
            <div class="music-programs__area-container">
                <h3 class="music-programs__area-title">Coaching and conducting</h3>
                <ul class="music-programs__area-degrees">
                    <li class="music-programs__degree-li">
                        <a href="#" tabindex="1" class="music-programs__degree-link">
                                    Bachelors of education
                                    <span class="music-programs__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
                                </a>
                    </li>
                    <li class="music-programs__degree-li">
                        <a href="#" tabindex="1" class="music-programs__degree-link">
                                    Bachelors of a lot of text here ok
                                    <span class="music-programs__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
                                </a>
                    </li>
                    <li class="music-programs__degree-li">
                        <a href="#" tabindex="1" class="music-programs__degree-link">
                                    Bachelors
                                    <span class="music-programs__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
                                </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="music-programs__area" tabindex="1">
            <img class="music-programs__area-background" src="https://picsum.photos/640/575?random=4" alt="alt" width="500" height="446">
            <div class="music-programs__area-container">
                <h3 class="music-programs__area-title">Composition</h3>
                <ul class="music-programs__area-degrees">
                    <li class="music-programs__degree-li">
                        <a href="#" tabindex="1" class="music-programs__degree-link">
                                    Bachelors
                                    <span class="music-programs__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
                                </a>
                    </li>
                    <li class="music-programs__degree-li">
                        <a href="#" tabindex="1" class="music-programs__degree-link">
                                    Bachelors
                                    <span class="music-programs__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
                                </a>
                    </li>
                    <li class="music-programs__degree-li">
                        <a href="#" tabindex="1" class="music-programs__degree-link">
                                    Bachelors
                                    <span class="music-programs__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
                                </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="music-programs__area" tabindex="1">
            <img class="music-programs__area-background" src="https://picsum.photos/640/575?random=5" alt="alt" width="500" height="446">
            <div class="music-programs__area-container">
                <h3 class="music-programs__area-title">Musicology</h3>
                <ul class="music-programs__area-degrees">
                    <li class="music-programs__degree-li">
                        <a href="#" tabindex="1" class="music-programs__degree-link">
                                    Bachelors
                                    <span class="music-programs__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
                                </a>
                    </li>
                    <li class="music-programs__degree-li">
                        <a href="#" tabindex="1" class="music-programs__degree-link">
                                    Bachelors of education
                                    <span class="music-programs__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
                                </a>
                    </li>
                    <li class="music-programs__degree-li">
                        <a href="#" tabindex="1" class="music-programs__degree-link">
                                    Bachelors of a lot of text here ok
                                    <span class="music-programs__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
                                </a>
                    </li>
                    <li class="music-programs__degree-li">
                        <a href="#" tabindex="1" class="music-programs__degree-link">
                                    Bachelors
                                    <span class="music-programs__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
                                </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="music-programs__area" tabindex="1">
            <img class="music-programs__area-background" src="https://picsum.photos/640/575?random=6" alt="alt" width="500" height="446">
            <div class="music-programs__area-container">
                <h3 class="music-programs__area-title">Music education</h3>
                <ul class="music-programs__area-degrees">
                    <li class="music-programs__degree-li">
                        <a href="#" tabindex="1" class="music-programs__degree-link">
                                    Bachelors
                                    <span class="music-programs__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
                                </a>
                    </li>
                    <li class="music-programs__degree-li">
                        <a href="#" tabindex="1" class="music-programs__degree-link">
                                    Bachelors
                                    <span class="music-programs__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
                                </a>
                    </li>
                    <li class="music-programs__degree-li">
                        <a href="#" tabindex="1" class="music-programs__degree-link">
                                    Bachelors
                                    <span class="music-programs__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
                                </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="music-programs__area" tabindex="1">
            <img class="music-programs__area-background" src="https://picsum.photos/640/575?random=7" alt="alt" width="500" height="446">
            <div class="music-programs__area-container">
                <h3 class="music-programs__area-title">Music education</h3>
                <ul class="music-programs__area-degrees">
                    <li class="music-programs__degree-li">
                        <a href="#" tabindex="1" class="music-programs__degree-link">
                                    Bachelors
                                    <span class="music-programs__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
                                </a>
                    </li>
                    <li class="music-programs__degree-li">
                        <a href="#" tabindex="1" class="music-programs__degree-link">
                                    Bachelors of education
                                    <span class="music-programs__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
                                </a>
                    </li>
                    <li class="music-programs__degree-li">
                        <a href="#" tabindex="1" class="music-programs__degree-link">
                                    Bachelors of a lot of text here ok
                                    <span class="music-programs__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
                                </a>
                    </li>
                    <li class="music-programs__degree-li">
                        <a href="#" tabindex="1" class="music-programs__degree-link">
                                    Bachelors
                                    <span class="music-programs__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
                                </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="music-programs__area" tabindex="1">
            <img class="music-programs__area-background" src="https://picsum.photos/640/575?random=8" alt="alt" width="500" height="446">
            <div class="music-programs__area-container">
                <h3 class="music-programs__area-title">Music education</h3>
                <ul class="music-programs__area-degrees">
                    <li class="music-programs__degree-li">
                        <a href="#" tabindex="1" class="music-programs__degree-link">
                                    Bachelors
                                    <span class="music-programs__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
                                </a>
                    </li>
                    <li class="music-programs__degree-li">
                        <a href="#" tabindex="1" class="music-programs__degree-link">
                                    Bachelors of education
                                    <span class="music-programs__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
                                </a>
                    </li>
                    <li class="music-programs__degree-li">
                        <a href="#" tabindex="1" class="music-programs__degree-link">
                                    Bachelors of a lot of text here ok
                                    <span class="music-programs__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
                                </a>
                    </li>
                    <li class="music-programs__degree-li">
                        <a href="#" tabindex="1" class="music-programs__degree-link">
                                    Bachelors
                                    <span class="music-programs__link-icon">&nbsp;<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>

</span>
                                </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="music-programs__cta">

        <a href="#" class="standard-button standard-button--durp standard-button--dark
            standard-button---width standard-button--primary">
            <div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">View all programs</span><span class="standard-button__icon"><svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16"><path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/></svg></span></span>
            </div>
        </a>
    </div>
</div>
 
<div class="music-programs">
    <div class="music-programs__heading">
        <h2 class="music-programs__title">{{ programs.title }}</h2>
        <div class="music-programs__subtitle">{{ programs.subtitle | raw }}</div>
    </div>
    <div class="music-programs__areas-of-study">
        {% for area in programs.areasOfStudy %}
            <div class="music-programs__area" tabindex="1">
                <img class="music-programs__area-background"
                     src="{{ area.backgroundImage.src|towebp|resize(500, 446) }}"
                     alt="{{ area.backgroundImage.altText | escape }}"
                     width="500"
                     height="446"
                >
                <div class="music-programs__area-container">
                    <h3 class="music-programs__area-title">{{ area.title }}</h3>
                    <ul class="music-programs__area-degrees">
                        {% for degree in area.degrees %}
                            <li class="music-programs__degree-li">
                                <a href="{{ degree.url }}" tabindex="1" class="music-programs__degree-link">
                                    {{ degree.text }}
                                    <span class="music-programs__link-icon">&nbsp;{% include "bits/icons/right-chevron.twig" %}</span>
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        {% endfor %}
    </div>
    <div class="music-programs__cta">
        {% include 'bits/standard-button/standard-button.twig' with {
            button: {
                type: 'primary',
                icon: 'right-chevron',
                text: programs.cta.text,
                url: programs.cta.url,
            }
        } %}
    </div>
</div>
 
{
  "siteUnit": "durp",
  "departmentName": "Department of Urban and Regional Planning",
  "background": "dark",
  "programs": {
    "title": "Explore the possibilities",
    "subtitle": "<p>The School of <em>Music</em> offers a selection of programs as vast and varied as the career paths they support.</p>",
    "areasOfStudy": [
      {
        "title": "Music education",
        "backgroundImage": {
          "src": "https://picsum.photos/640/575?random=1",
          "altText": "alt"
        },
        "degrees": [
          {
            "text": "Bachelors of education",
            "url": "#"
          },
          {
            "text": "Bachelors of a lot of text here ok",
            "url": "#"
          },
          {
            "text": "Bachelors",
            "url": "#"
          },
          {
            "text": "Bachelors",
            "url": "#"
          }
        ]
      },
      {
        "title": "Performance",
        "backgroundImage": {
          "src": "https://picsum.photos/640/575?random=2",
          "altText": "alt"
        },
        "degrees": [
          {
            "text": "Bachelors of education",
            "url": "#"
          },
          {
            "text": "Bachelors of a lot of text here ok",
            "url": "#"
          },
          {
            "text": "Bachelors",
            "url": "#"
          },
          {
            "text": "Bachelors",
            "url": "#"
          }
        ]
      },
      {
        "title": "Coaching and conducting",
        "backgroundImage": {
          "src": "https://picsum.photos/640/575?random=3",
          "altText": "alt"
        },
        "degrees": [
          {
            "text": "Bachelors of education",
            "url": "#"
          },
          {
            "text": "Bachelors of a lot of text here ok",
            "url": "#"
          },
          {
            "text": "Bachelors",
            "url": "#"
          }
        ]
      },
      {
        "title": "Composition",
        "backgroundImage": {
          "src": "https://picsum.photos/640/575?random=4",
          "altText": "alt"
        },
        "degrees": [
          {
            "text": "Bachelors",
            "url": "#"
          },
          {
            "text": "Bachelors",
            "url": "#"
          },
          {
            "text": "Bachelors",
            "url": "#"
          }
        ]
      },
      {
        "title": "Musicology",
        "backgroundImage": {
          "src": "https://picsum.photos/640/575?random=5",
          "altText": "alt"
        },
        "degrees": [
          {
            "text": "Bachelors",
            "url": "#"
          },
          {
            "text": "Bachelors of education",
            "url": "#"
          },
          {
            "text": "Bachelors of a lot of text here ok",
            "url": "#"
          },
          {
            "text": "Bachelors",
            "url": "#"
          }
        ]
      },
      {
        "title": "Music education",
        "backgroundImage": {
          "src": "https://picsum.photos/640/575?random=6",
          "altText": "alt"
        },
        "degrees": [
          {
            "text": "Bachelors",
            "url": "#"
          },
          {
            "text": "Bachelors",
            "url": "#"
          },
          {
            "text": "Bachelors",
            "url": "#"
          }
        ]
      },
      {
        "title": "Music education",
        "backgroundImage": {
          "src": "https://picsum.photos/640/575?random=7",
          "altText": "alt"
        },
        "degrees": [
          {
            "text": "Bachelors",
            "url": "#"
          },
          {
            "text": "Bachelors of education",
            "url": "#"
          },
          {
            "text": "Bachelors of a lot of text here ok",
            "url": "#"
          },
          {
            "text": "Bachelors",
            "url": "#"
          }
        ]
      },
      {
        "title": "Music education",
        "backgroundImage": {
          "src": "https://picsum.photos/640/575?random=8",
          "altText": "alt"
        },
        "degrees": [
          {
            "text": "Bachelors",
            "url": "#"
          },
          {
            "text": "Bachelors of education",
            "url": "#"
          },
          {
            "text": "Bachelors of a lot of text here ok",
            "url": "#"
          },
          {
            "text": "Bachelors",
            "url": "#"
          }
        ]
      }
    ],
    "cta": {
      "text": "View all programs",
      "url": "#"
    }
  }
}
  • Handle: @music-programs
  • Preview:
  • Filesystem Path: components/partials/homepages/music/programs/music-programs.twig

There are no notes for this item.