<div class="homepage-cta">
    <div class="homepage-cta__container">
        <div class="homepage-cta__wrapper">
            <div class="homepage-cta__text">
                <div class="homepage-cta__line"></div>
                <h2 class="homepage-cta__header" id="Feel your future calling? Take the next step.">
                    Feel your future calling? Take the next step.
                </h2>
            </div>
            <ul class="homepage-cta__cta">
                <li class="homepage-cta__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">I’m ready to learn more!</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-cta__cta-list">

                    <a href="#" class="standard-button standard-button--durp standard-button--dark
            standard-button---width standard-button--secondary">
                        <div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">I’d like to reach out with a question</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-cta">
    <div class="homepage-cta__container">
        <div class="homepage-cta__wrapper">
            <div class="homepage-cta__text">
                <div class="homepage-cta__line"></div>
                <h2 class="homepage-cta__header"
                    id="{{ cta.header|sanitize }}">
                    {{ cta.header }}
                </h2>
            </div>
            <ul class="homepage-cta__cta">
                <li class="homepage-cta__cta-list">
                    {% include 'bits/standard-button/standard-button.twig' with {
                        button: {
                            icon: 'internal-link',
                            type: 'primary',
                            text: cta.cta1.text,
                            url: cta.cta1.url,
                            width: regular,
                        }
                    } %}
                </li>
                {% if cta.cta2.text and cta.cta2.url %}
                    <li class="homepage-cta__cta-list">
                        {% include 'bits/standard-button/standard-button.twig' with {
                            button: {
                                icon: 'internal-link',
                                type: 'secondary',
                                text: cta.cta2.text,
                                url: cta.cta2.url,
                                width: regular,
                            }
                        } %}
                    </li>
                {% endif %}
            </ul>
        </div>
    </div>
</div>
{
  "siteUnit": "durp",
  "departmentName": "Department of Urban and Regional Planning",
  "background": "dark",
  "cta": {
    "header": "Feel your future calling? Take the next step.",
    "cta1": {
      "text": "I’m ready to learn more!",
      "url": "#"
    },
    "cta2": {
      "text": "I’d like to reach out with a question",
      "url": "#"
    }
  }
}
  • Content:
    breakpointSmall = 784px
    breakpointLarge = 1300px
    
    .homepage-cta
        background-color charcoalLighter
        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
        &__line
            border-top 8px solid illiniOrange
            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
        &__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-cta/homepage-cta.styl
  • Filesystem Path: components/partials/homepages/durp/homepage-cta/homepage-cta.styl
  • Size: 1.4 KB
  • Handle: @homepage-cta
  • Preview:
  • Filesystem Path: components/partials/homepages/durp/homepage-cta/homepage-cta.twig

There are no notes for this item.