<div class="homepage-faculty">
    <div class="homepage-faculty__container">
        <div class="homepage-faculty__box">
            <div class="homepage-faculty__content">
                <h2 class="homepage-faculty__header">
                    An extraordinary opportunity to build relationships
                </h2>
                <div class="homepage-faculty__body">
                    <p>Our program <a href="#">attracts people</a> who are passionate about what they do, and the size of our department makes it easy to bond with classmates and faculty. Members of our faculty are approachable both in and out of the classroom.
                        Join us for the holiday gathering in the Atrium, kickball on the South Quad, or potuck dinners at a faculty member’s house.</p>
                </div>
                <div class="homepage-faculty__cta">

                    <a href="#" class="standard-button standard-button--durp standard-button--light
            standard-button---width standard-button--primary">
                        <div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Meet Planning at Illinois faculty</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>
                </div>
            </div>
            <div class="homepage-faculty__image">
                <figure class="captioned-image">
                    <img class="captioned-image__image" src="https://picsum.photos/1000/480?random=1" alt="" width="960" height="480">
                </figure>

            </div>
        </div>
    </div>
</div>
{% import "bits/macros/imageSource.twig" as imageMacros %}
<div class="homepage-faculty">
    <div class="homepage-faculty__container">
        <div class="homepage-faculty__box">
            <div class="homepage-faculty__content">
                <h2 class="homepage-faculty__header">
                    {{ faculty.header }}
                </h2>
                <div class="homepage-faculty__body">
                    {{ faculty.body | raw }}
                </div>
                <div class="homepage-faculty__cta">
                    {% include 'bits/standard-button/standard-button.twig' with {
                        button: {
                            type: 'primary',
                            icon: 'internal-link',
                            text: faculty.link.text,
                            url: faculty.link.url,
                            width: regular,
                        }
                    } %}
                </div>
            </div>
            <div class="homepage-faculty__image">
                {{ imageMacros.create(faculty.image, 960, 480, background) }}
            </div>
        </div>
    </div>
</div>
{
  "siteUnit": "durp",
  "departmentName": "Department of Urban and Regional Planning",
  "background": "light",
  "faculty": {
    "header": "An extraordinary opportunity to build relationships",
    "body": "<p>Our program <a href=\"#\">attracts people</a> who are passionate about what they do, and the size of our department makes it easy to bond with classmates and faculty. Members of our faculty are approachable both in and out of the classroom. Join us for the holiday gathering in the Atrium, kickball on the South Quad, or potuck dinners at a faculty member’s house.</p>",
    "link": {
      "text": "Meet Planning at Illinois faculty",
      "url": "#"
    },
    "image": {
      "src": "https://picsum.photos/1000/480?random=1",
      "alt": "Example alt text"
    }
  }
}
  • Content:
    breakpointSmall = 784px
    breakpointLarge = 1300px
    .homepage-faculty
        background-color cloud
        padding-top 80px
        +above(breakpointSmall)
            padding-top 128px
        +above(breakpointLarge)
            padding-top 0
        +between(breakpointSmall, breakpointLarge)
            padding-bottom 128px
        &__container
            @extends $contentContainer
        &__box
            +above(breakpointSmall)
                align-items center
                @supports (display: grid)
                    display grid
                grid-template-columns 5fr 3fr
            +above(breakpointLarge)
                grid-template-columns 8fr 4fr
            +between(breakpointSmall, breakpointLarge)
                align-items start
        &__content
            padding-right 32px
        &__header
            @extends $tertiaryTitle
            margin-bottom 16px
        &__body
            @extends $richText
            margin-bottom 24px
        &__image
            position relative
            height 256px
            margin-bottom 80px
            +below(breakpointSmall)
                margin-top 48px
                fullViewportWidthInContainer()
            +above(breakpointSmall)
                margin-top 0
            +above(breakpointLarge)
                height 480px
                margin-bottom 160px
            & figure
                position absolute
                width 100%
                height 256px
                +above(breakpointSmall)
                    width 512px
                +above(breakpointLarge)
                    width s('calc(%s - (%s * (8 / 12)) + ((100vw - %s) / 2) + 16px)', maxContentWidth, maxContentWidth, maxContentWidth)
                    height 480px
                &:before
                    background-color illiniOrange
                    content ""
                    display block
                    height 128px
                    left 0
                    mix-blend-mode multiply
                    position absolute
                    right 0
                    top 208px
                    z-index 1
                    +above(breakpointLarge)
                        height 224px
                        top 416px
    
    
  • URL: /components/raw/homepage-faculty-section/homepage-faculty-section.styl
  • Filesystem Path: components/partials/homepages/durp/homepage-faculty-section/homepage-faculty-section.styl
  • Size: 2 KB
  • Handle: @homepage-faculty-section
  • Preview:
  • Filesystem Path: components/partials/homepages/durp/homepage-faculty-section/homepage-faculty-section.twig

There are no notes for this item.