<div class="homepage-campus">
    <div class="homepage-campus__container">
        <div class="homepage-campus__wrapper">
            <div class="homepage-campus__text">
                <div class="homepage-campus__line"></div>
                <h2 class="homepage-campus__header">
                    World-class university, micro-urban city
                </h2>
                <div class="homepage-campus__body">
                    <p>Studying urban planning at UIUC means you have access to the resources, facilities, and minds of a global R1 university. It also makes you part of a long tradition—planning has been offered at Illinois since 1912.</p>
                    <p>Getting involved in planning issues at all levels is easy in Champaign-Urbana. Work with three plan commissions, two city councils, a county board, the Bicycle and Pedestrian Advisory Board, the Sustainability Advisory Commission,
                        the Community Development Commission, and more!</p>
                </div>
            </div>
            <ul class="homepage-campus__cta">
                <li class="homepage-campus__cta-list">

                    <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">See the benefits of studying at the U of I</span><span class="standard-button__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="8" height="16" viewBox="0 0 8 16"><path class="icon-fill" fill="#E84A27" 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>
                </li>
                <li class="homepage-campus__cta-list">

                    <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">Explore life in Champaign-Urbana</span><span class="standard-button__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="8" height="16" viewBox="0 0 8 16"><path class="icon-fill" fill="#E84A27" 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>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="homepage-campus">
    <div class="homepage-campus__container">
        <div class="homepage-campus__wrapper">
            <div class="homepage-campus__text">
                <div class="homepage-campus__line"></div>
                <h2 class="homepage-campus__header">
                    {{ campus.header }}
                </h2>
                <div class="homepage-campus__body">
                    {{ campus.body | raw }}
                </div>
            </div>
            <ul class="homepage-campus__cta">
                <li class="homepage-campus__cta-list">
                    {% include 'bits/standard-button/standard-button.twig' with {
                        button: {
                            type: 'primary',
                            icon: 'internal-link',
                            text: campus.cta1.text,
                            url: campus.cta1.url,
                            width: regular,
                        }
                    } %}
                </li>
                {% if campus.cta2.text and campus.cta2.url %}
                    <li class="homepage-campus__cta-list">
                        {% include 'bits/standard-button/standard-button.twig' with {
                            button: {
                                type: 'primary',
                                icon: 'internal-link',
                                text: campus.cta2.text,
                                url: campus.cta2.url,
                                width: regular,
                            }
                        } %}
                    </li>
                {% endif %}
            </ul>
        </div>
    </div>
</div>
{
  "siteUnit": "durp",
  "departmentName": "Department of Urban and Regional Planning",
  "background": "dark",
  "campus": {
    "header": "World-class university, micro-urban city",
    "body": "<p>Studying urban planning at UIUC means you have access to the resources, facilities, and minds of a global R1 university. It also makes you part of a long tradition—planning has been offered at Illinois since 1912.</p><p>Getting involved in planning issues at all levels is easy in Champaign-Urbana. Work with three plan commissions, two city councils, a county board, the Bicycle and Pedestrian Advisory Board, the Sustainability Advisory Commission, the Community Development Commission, and more!</p>",
    "cta1": {
      "text": "See the benefits of studying at the U of I",
      "url": "#"
    },
    "cta2": {
      "text": "Explore life in Champaign-Urbana",
      "url": "#"
    }
  }
}
  • Content:
    breakpointSmall = 784px
    breakpointLarge = 1300px
    
    backgroundPosition()
        content ""
        display block
        height 75vw
        left 0
        position absolute
        top 0
        width 100vw
        +above(breakpointSmall)
            bottom 0
            height auto
            left calc(100% * (3 / 8))
            position absolute
            top 0
            width s('calc((%s * (5 / 8)) + ((100vw - %s) / 2) + 16px)', maxContentWidth, maxContentWidth)
        +above(breakpointLarge)
            left calc(100% * (4 / 12))
            width s('calc((%s * (8 / 12)) + ((100vw - %s) / 2) + 16px)', maxContentWidth, maxContentWidth)
    
    .homepage-campus
        background-color altgeld
        position relative
        &__container
            @extends $contentContainer
        &__wrapper
            padding-top 80px
            padding-bottom 96px
            +above(breakpointSmall)
                @supports (display: grid)
                    display grid
                grid-template-columns 5fr 3fr
                padding-bottom 128px
                padding-top 128px
                position relative
            +above(breakpointLarge)
                grid-template-columns 8fr 4fr
                padding-bottom 160px
                padding-top 160px
            &:before
                background transparent url('../assets/images/uiuc-campus.jpg') no-repeat left center
                background-size cover
                mix-blend-mode multiply
                opacity 0.15
                backgroundPosition()
        &__line
            border-top 8px solid white
            left 0
            position absolute
            top 0
            width 100vw
            z-index 1
            +above(breakpointSmall)
                margin-bottom 32px
        &__text
            padding-top 24px
            +above(breakpointSmall)
                padding-top 40px
                padding-right 48px
            +above(breakpointLarge)
                padding-right 128px
            position relative
            z-index 1
        &__header
            @extends $primaryTitle
            color white
            margin-bottom 16px
        &__body
            & em
                font-style italic
            & strong
                font-weight 500
            & p
                @extends $primaryParagraph
                color white
            & a
                border-bottom 1px solid white
                color white
                cursor pointer
                font-weight 500
                text-decoration none
                transition all 0.3s
                &:focus
                &:hover
                &:active
                    background-color charcoalLighter
        &__cta
            align-content start
            @supports (display: grid)
                display grid
            grid-gap 16px
            grid-template-columns 1fr
            padding-top 32px
            +above(breakpointSmall)
                padding-top 40px
            position relative
            z-index 1
    
    
  • URL: /components/raw/homepage-campus/homepage-campus.styl
  • Filesystem Path: components/partials/homepages/durp/homepage-campus/homepage-campus.styl
  • Size: 2.7 KB
  • Handle: @homepage-campus
  • Preview:
  • Filesystem Path: components/partials/homepages/durp/homepage-campus/homepage-campus.twig

There are no notes for this item.