<div class="homepage-carousel-item">
    <div class="homepage-carousel-item__image-container">
        <figure class="captioned-image">
            <picture class="captioned-image__picture">
                <source srcset="https://picsum.photos/1488/1040?random=1 1600w " sizes="100vw" type="image/webp">
                <source srcset="https://picsum.photos/1488/1040?random=1 1600w " sizes="100vw" type="image/jpeg">
                <img class="captioned-image__image" loading="lazy" src="https://picsum.photos/1488/1040?random=1" alt="">
            </picture>
        </figure>

        <div class="homepage-carousel-item__blurred-image-container">
            <figure class="captioned-image">
                <picture class="captioned-image__picture">
                    <source srcset="https://picsum.photos/1488/1040?random=1 1600w " sizes="100vw" type="image/webp">
                    <source srcset="https://picsum.photos/1488/1040?random=1 1600w " sizes="100vw" type="image/jpeg">
                    <img class="captioned-image__image" loading="lazy" src="https://picsum.photos/1488/1040?random=1" alt="">
                </picture>
            </figure>

        </div>
        <div class="homepage-carousel-item__image-overlay"></div>
        <div class="homepage-carousel-item__image-blur"></div>
        <div class="homepage-carousel-item__white-block"></div>
        <div class="homepage-carousel-item__orange-image-overlay"></div>
    </div>
    <div class="homepage-carousel-item__title-container">
        <div class="homepage-carousel-item__title-content">
            <div class="homepage-carousel-item__orange-line">
                <svg class="orange-line" width="32" height="8" viewBox="0 0 32 8" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <rect width="32" height="8" />
</svg>
            </div>
            <h2 class="homepage-carousel-item__header">
                Planning for sustainability
            </h2>
        </div>
    </div>
    <div class="homepage-carousel-item__text-container">
        <div class="homepage-carousel-item__text-content">
            <div class="homepage-carousel-item__text-overlay"></div>
            <div class="homepage-carousel-item__quote-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="20" viewBox="0 0 24 20">
    <path fill="#E84A27" fill-rule="evenodd" d="M24 10h-4.5c0-3.162 1.586-4.814 4.5-5V0c-5 0-8.078 2.17-9.318 6.262C14.186 7.998 14 10.106 14 13.64V20h10V10zm-14 0H5.5c0-3.162 1.586-4.814 4.5-5V0C5 0 1.922 2.17.682 6.262.186 7.998 0 10.106 0 13.64V20h10V10z"/>
</svg>
            </div>
            <p class="homepage-carousel-item__text">
                I examine how growing ethnic and racial diversity in the Midwest is understood and utilized by cities that have seen a significant increase in immigration.
            </p>
            <a class="homepage-carousel-item__link" href="" data-carousel-link-index="">
                <span class="homepage-carousel-item__link-prefix">
                                            Meet
                                    </span>
                <span class="homepage-carousel-item__link-text">
                                            
                                    </span>
                <span class="homepage-carousel-item__link-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>
            </a>
            <p class="homepage-carousel-item__reference-description">

            </p>
        </div>
    </div>
</div>
{% import "bits/macros/imageSource.twig" as imageMacros %}
<div class="homepage-carousel-item">
    <div class="homepage-carousel-item__image-container">
        {{ imageMacros.createAlwaysFullWidth(item.image, 1600, 1120, background) }}
        <div class="homepage-carousel-item__blurred-image-container">
            {{ imageMacros.createAlwaysFullWidth(item.image, 1600, 1120, background) }}
        </div>
        <div class="homepage-carousel-item__image-overlay"></div>
        <div class="homepage-carousel-item__image-blur"></div>
        <div class="homepage-carousel-item__white-block"></div>
        <div class="homepage-carousel-item__orange-image-overlay"></div>
    </div>
    <div class="homepage-carousel-item__title-container">
        <div class="homepage-carousel-item__title-content">
            <div class="homepage-carousel-item__orange-line">
                {% include 'bits/orange-line/orange-line.twig' %}
            </div>
            <h2 class="homepage-carousel-item__header">
                {{ item.topic }}
            </h2>
        </div>
    </div>
    <div class="homepage-carousel-item__text-container">
        <div class="homepage-carousel-item__text-content">
            <div class="homepage-carousel-item__text-overlay"></div>
            <div class="homepage-carousel-item__quote-icon">
                {% include 'bits/icons/quote.twig' %}
            </div>
            <p class="homepage-carousel-item__text">
                {{ item.quote }}
            </p>
            <a class="homepage-carousel-item__link" href="{{ item.reference.url }}" data-carousel-link-index="{{ loop.index }}">
                <span class="homepage-carousel-item__link-prefix">
                    {% if item.reference.postType == 'news' %}
                        Read
                    {% else %}
                        Meet
                    {% endif %}
                </span>
                <span class="homepage-carousel-item__link-text">
                    {% if item.reference.postType == 'news' %}
                        more
                    {% else %}
                        {{ item.reference.name }}
                    {% endif %}
                </span>
                <span class="homepage-carousel-item__link-icon">
                    {% include 'bits/icons/right-chevron.twig' %}
                </span>
            </a>
            <p class="homepage-carousel-item__reference-description">
                {{ item.reference.description }}
            </p>
        </div>
    </div>
</div>
{
  "siteUnit": "durp",
  "departmentName": "Department of Urban and Regional Planning",
  "background": "dark",
  "item": {
    "image": {
      "src": "https://picsum.photos/1488/1040?random=1",
      "alt": "A cute kitten"
    },
    "topic": "Planning for sustainability",
    "quote": "I examine how growing ethnic and racial diversity in the Midwest is understood and utilized by cities that have seen a significant increase in immigration.",
    "person": {
      "name": "Ana Mendoza",
      "description": "PhD candidate"
    }
  }
}
  • Content:
    .homepage-carousel-item
        position relative
        width 100vw
    
        &__image-container
            padding-right 7.5vw
            position relative
    
            & figure
                width 100%
                min-height 100%
                max-width unset
                min-width 100vw
                width auto
    
            & img
                height 372px
                object-fit cover
                +above(largeDeviceBreakpoint)
                    height 800px
    
                +above(maxContentWidth)
                    height 1040px
    
    
        $leftOverlay
            overflow hidden
            position absolute
            top 0
            bottom 0
            left 0
            width 25vw
    
            +above(largeDeviceBreakpoint)
                right calc(50% + 80px)
                width auto
    
        &__blurred-image-container
            @extends $leftOverlay
    
            & figure
                filter blur(5px)
                height 100%
                left 0
                max-width unset
                position absolute
                top 0
    
                +above(largeDeviceBreakpoint)
                    height auto
                    min-height 100%
                    min-width 100vw
    
        &__image-overlay
            background-color #3D454C
            position absolute
            top 0
            right 7.5vw
            bottom 0
            left 0
            opacity .5
    
            @supports (mix-blend-mode: multiply)
                mix-blend-mode multiply
    
            @supports not (mix-blend-mode: multiply)
                opacity .1
    
        &__image-blur
            @extends $leftOverlay
            background-color #3D454C
            opacity .7
    
            @supports (mix-blend-mode: multiply)
                mix-blend-mode multiply
    
            @supports not (mix-blend-mode: multiply)
                opacity .25
    
        &__white-block
            background-color white
            position absolute
            top 0
            right 0
            bottom 0
            width 7.5vw
    
        &__orange-image-overlay
            background-color illiniOrange
            position absolute
            top 0
            right 0
            bottom 0
            width 25vw
    
            @supports (mix-blend-mode: multiply)
                mix-blend-mode multiply
    
            @supports not (mix-blend-mode: multiply)
                opacity .25
    
        &__title-container
            @extends $contentContainer
            position absolute
            top 32px
            right 0
            left 0
    
            +above(largeDeviceBreakpoint)
                top 48px
    
            +above(maxContentWidth)
                top 96px
    
        &__title-content
            +above(largeDeviceBreakpoint)
                max-width 67vw
    
            +above(maxContentWidth)
                max-width 880px
    
        &__orange-line
            margin-bottom 16px
    
            +above(largeDeviceBreakpoint)
                margin-bottom 24px
    
        &__header
            @extends $billboardTitle
            color white
    
        &__text-container
            @extends $contentContainer
            background-color cloudDark
            padding-bottom 20px
            position relative
    
            +above(largeDeviceBreakpoint)
                background-color transparent
                padding-bottom 0
                position absolute
                right 0
                bottom 48px
                left 0
    
            +above(maxContentWidth)
                bottom 104px
    
        &__text-content
            +above(largeDeviceBreakpoint)
                max-width calc(50vw - 150px)
    
            +above(maxContentWidth)
                max-width 540px
    
        &__text-overlay
            background-color cloudDark
            height 24px
            left 0
            position absolute
            top -24px
            width 152px
    
            +above(largeDeviceBreakpoint)
                display none
    
        &__quote-icon
            margin -4px 0 8px
    
        &__text
            @extends $primaryParagraph
            margin-bottom 16px
    
            +above(largeDeviceBreakpoint)
                color white
    
        &__link
            color charcoalLight
            font-family metaSerifPro
            font-size 24px
            text-decoration none
    
            +above(largeDeviceBreakpoint)
                color white
    
            &:focus
            &:hover
            &:active
                .homepage-carousel-item__link-icon
                    transform translate(4px, 0)
    
        &__link-prefix
            color illiniOrangeLight
            display inline
    
        &__link-icon
            display inline-block
            transition all 0.3s ease
    
        &__reference-description
            @extends $primaryParagraph
    
            +above(largeDeviceBreakpoint)
                color white
    
  • URL: /components/raw/homepage-carousel-item/homepage-carousel-item.styl
  • Filesystem Path: components/partials/homepage-carousel-item/homepage-carousel-item.styl
  • Size: 4.3 KB
  • Handle: @homepage-carousel-item
  • Preview:
  • Filesystem Path: components/partials/homepage-carousel-item/homepage-carousel-item.twig

There are no notes for this item.