<div class="homepage-alumni">
    <div class="homepage-alumni__container">
        <div class="homepage-alumni__wrapper">

            <div class="alumni-feature-component js-alumni-feature-component alumni-feature-component--durp alumni-feature-component--">
                <div class="alumni-feature-component__top">
                    <h2 class="alumni-feature-component__header alumni-feature-component__header--dark alumni-feature-component__header--strong" id="Join a community of change-makers">
                        Join a community of change-makers
                    </h2>
                    <div class="alumni-feature-component__controls">
                        <button class="alumni-feature-component__control-button-previous js-alumni-previous-button" type="button" aria-label="Move carousel items to the right">
                <svg class="left-chevron" xmlns="http://www.w3.org/2000/svg" width="8" height="16" viewBox="0 0 8 16">
    <path class="_mark left-chevron__shape" fill="#E84A27" fill-rule="nonzero" d="M7.768 1.65c.346-.419.3-1.05-.104-1.41a.937.937 0 0 0-1.356.11L0 8l6.308 7.65a.937.937 0 0 0 1.356.11c.403-.36.45-.991.104-1.41L2.534 8l5.234-6.35z"/>
</svg>
            </button>
                        <button class="alumni-feature-component__control-button-next js-alumni-next-button" type="button" aria-label="Move carousel items to the left">
                <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>

            </button>
                    </div>
                </div>
                <div class="alumni-feature-component__carousel js-alumni-carousel">
                    <div class="alumni-feature-component__background"></div>
                    <div class="alumni-feature-component__carousel-item js-alumni-carousel-item">

                        <div class="alumni-carousel-item alumni-carousel-item--full
            alumni-carousel-item--durp">
                            <div class="alumni-carousel-item__image">
                                <figure class="captioned-image">
                                    <img class="captioned-image__image" src="https://picsum.photos/272/320?random=1" alt="alt text" width="332" height="432">
                                </figure>

                            </div>
                            <div class="alumni-carousel-item__content alumni-carousel-item__content--odd-dark">
                                <a class="alumni-carousel-item__link
            alumni-carousel-item__link--full
            alumni-carousel-item__link--dark" data-alumni-carousel-link-index="1" href="">
            Solving mobility challenges for the 21st century<span class="alumni-carousel-item__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>
                                <p class="alumni-carousel-item__title alumni-carousel-item__title--full alumni-carousel-item__title--dark">
                                    Ana Mendoza
                                </p>
                                <p class="alumni-carousel-item__graduation-class alumni-carousel-item__graduation-class--dark">
                                    MUP 2017
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="alumni-feature-component__carousel-item js-alumni-carousel-item">

                        <div class="alumni-carousel-item alumni-carousel-item--full
            alumni-carousel-item--durp">
                            <div class="alumni-carousel-item__image">
                                <figure class="captioned-image">
                                    <img class="captioned-image__image" src="https://picsum.photos/272/320?random=1" alt="alt text" width="332" height="432">
                                </figure>

                            </div>
                            <div class="alumni-carousel-item__content alumni-carousel-item__content--even-dark">
                                <a class="alumni-carousel-item__link
            alumni-carousel-item__link--full
            alumni-carousel-item__link--dark" data-alumni-carousel-link-index="2" href="">
            Helping to develop one of the most progressive and innovative cities in the U.S.<span class="alumni-carousel-item__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>
                                <p class="alumni-carousel-item__title alumni-carousel-item__title--full alumni-carousel-item__title--dark">
                                    Aarav Pujari
                                </p>
                                <p class="alumni-carousel-item__graduation-class alumni-carousel-item__graduation-class--dark">
                                    BAUP 2014
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="alumni-feature-component__carousel-item js-alumni-carousel-item">

                        <div class="alumni-carousel-item alumni-carousel-item--full
            alumni-carousel-item--durp">
                            <div class="alumni-carousel-item__image">
                                <figure class="captioned-image">
                                    <img class="captioned-image__image" src="https://picsum.photos/272/320?random=1" alt="alt text" width="332" height="432">
                                </figure>

                            </div>
                            <div class="alumni-carousel-item__content alumni-carousel-item__content--odd-dark">
                                <a class="alumni-carousel-item__link
            alumni-carousel-item__link--full
            alumni-carousel-item__link--dark" data-alumni-carousel-link-index="3" href="">
            Supporting businesses looking to relocate and expand in the city of Chicago<span class="alumni-carousel-item__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>
                                <p class="alumni-carousel-item__title alumni-carousel-item__title--full alumni-carousel-item__title--dark">
                                    Yolanda Richards-Albert
                                </p>
                                <p class="alumni-carousel-item__graduation-class alumni-carousel-item__graduation-class--dark">
                                    MUP 2011
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="alumni-feature-component__carousel-item js-alumni-carousel-item">

                        <div class="alumni-carousel-item alumni-carousel-item--full
            alumni-carousel-item--durp">
                            <div class="alumni-carousel-item__image">
                                <figure class="captioned-image">
                                    <img class="captioned-image__image" src="https://picsum.photos/272/320?random=1" alt="alt text" width="332" height="432">
                                </figure>

                            </div>
                            <div class="alumni-carousel-item__content alumni-carousel-item__content--even-dark">
                                <a class="alumni-carousel-item__link
            alumni-carousel-item__link--full
            alumni-carousel-item__link--dark" data-alumni-carousel-link-index="4" href="">
            Helping small business owners apply for complicated permits<span class="alumni-carousel-item__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>
                                <p class="alumni-carousel-item__title alumni-carousel-item__title--full alumni-carousel-item__title--dark">
                                    Teresa Chandler
                                </p>
                                <p class="alumni-carousel-item__graduation-class alumni-carousel-item__graduation-class--dark">
                                    MUP 2017
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="alumni-feature-component__button">

                    <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">I’m ready to learn more!</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>
    </div>
</div>
<div class="homepage-alumni">
    <div class="homepage-alumni__container">
        <div class="homepage-alumni__wrapper">
            {% include 'components/alumni-feature-component/alumni-feature-component.twig' with
                {
                    component: alumni,
                    isOnFullWidthPage: true,
                    is_wordpress: is_wordpress|default
                }
            %}
        </div>
    </div>
</div>
{
  "siteUnit": "durp",
  "departmentName": "Department of Urban and Regional Planning",
  "background": "dark",
  "alumni": {
    "header": "Join a community of change-makers",
    "callToAction": {
      "text": "I’m ready to learn more!",
      "url": "#"
    },
    "alumni": [
      {
        "image": {
          "src": "https://picsum.photos/272/320?random=1",
          "altText": "alt text"
        },
        "name": "Solving mobility challenges for the 21st century",
        "title": "Ana Mendoza",
        "graduationClass": "MUP 2017"
      },
      {
        "image": {
          "src": "https://picsum.photos/272/320?random=1",
          "altText": "alt text"
        },
        "name": "Helping to develop one of the most progressive and innovative cities in the U.S.",
        "title": "Aarav Pujari",
        "graduationClass": "BAUP 2014"
      },
      {
        "image": {
          "src": "https://picsum.photos/272/320?random=1",
          "altText": "alt text"
        },
        "name": "Supporting businesses looking to relocate and expand in the city of Chicago",
        "title": "Yolanda Richards-Albert",
        "graduationClass": "MUP 2011"
      },
      {
        "image": {
          "src": "https://picsum.photos/272/320?random=1",
          "altText": "alt text"
        },
        "name": "Helping small business owners apply for complicated permits",
        "title": "Teresa Chandler",
        "graduationClass": "MUP 2017"
      }
    ]
  }
}
  • Content:
    .homepage-alumni
        background-color cloud
        overflow hidden
        position relative
        fluid(padding-bottom padding-top, 320px, maxContentWidth, 80px, 160px)
        &__container
            @extends $contentContainer
    
  • URL: /components/raw/homepage-alumni/homepage-alumni.styl
  • Filesystem Path: components/partials/homepages/durp/homepage-alumni/homepage-alumni.styl
  • Size: 213 Bytes
  • Handle: @homepage-alumni
  • Preview:
  • Filesystem Path: components/partials/homepages/durp/homepage-alumni/homepage-alumni.twig

There are no notes for this item.