Cta Component: Jumbo Call To Action

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="cta-component cta-component--light cta-component--music cta-component--jumbo cta-component--large">
    <h2 class="cta-component__header cta-component__header--light cta-component__header--" id="Interested in learning more?">
        Interested in learning more?
    </h2>

    <ul class="cta-component__link-list">
        <li class="cta-component__list-item">
            <div class="cta-component__divider-line cta-component__divider-line--light"></div>
            <div class="link-with-icon link-with-icon--music">
                <a class="link-with-icon__link" href="#">
        <span class="link-with-icon__icon">
            <div class="color-circle-icon color-circle-icon--music">
            <span class="color-circle-icon__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path fill="#FFF" fill-rule="evenodd" d="M13 2a1 1 0 0 1 .117 1.993L13 4H2v18h18V11a1 1 0 0 1 1.993-.117L22 11v13H0V2h13zm5 2l2 2L8.5 17.5 5 19l1.5-3.5L18 4zm4-4l2 2-3 3-2-2 3-3z"/>
</svg>
</span>
    </div>
        </span>
        <span class="link-with-icon__text link-with-icon__text--light">
            Apply now
        </span>
    </a>
            </div>
        </li>
        <li class="cta-component__list-item">
            <div class="cta-component__divider-line cta-component__divider-line--light"></div>
            <div class="link-with-icon link-with-icon--music">
                <a class="link-with-icon__link" href="#">
        <span class="link-with-icon__icon">
            <div class="color-circle-icon color-circle-icon--music">
            <span class="color-circle-icon__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path fill="#FFF" fill-rule="nonzero" d="M24 0v18H11l-7 6v-6H0V0h24zm-2 2H2v14h4v3.651L10.26 16H22V2z"/>
</svg>
</span>
    </div>
        </span>
        <span class="link-with-icon__text link-with-icon__text--light">
            Contact us
        </span>
    </a>
            </div>
        </li>
        <li class="cta-component__list-item">
            <div class="cta-component__divider-line cta-component__divider-line--light"></div>
            <div class="link-with-icon link-with-icon--music">
                <a class="link-with-icon__link" href="#">
        <span class="link-with-icon__icon">
            <div class="color-circle-icon color-circle-icon--music">
            <span class="color-circle-icon__icon"><svg xmlns="http://www.w3.org/2000/svg" width="26" height="24" viewBox="0 0 26 24">
    <path fill="#FFF" fill-rule="nonzero" d="M23 5a1 1 0 0 1-1.993.117L21 5V1a1 1 0 0 1 1.993-.117L23 1v1h3v22H0V2h3V1A1 1 0 0 1 4.993.883L5 1v4a1 1 0 0 1-1.993.117L3 5V4H2v18h22V4h-1v1zM5 19v2H3v-2h2zm3 0v2H6v-2h2zm3 0v2H9v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm3-3v2h-2v-2h2zM5 16v2H3v-2h2zm3 0v2H6v-2h2zm3 0v2H9v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm-9-3v2H9v-2h2zm-6 0v2H3v-2h2zm3 0v2H6v-2h2zm6 0v2h-2v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zM5 10v2H3v-2h2zm3 0v2H6v-2h2zm3 0v2H9v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm3 0v2h-2v-2h2zm0-3v2h-2V7h2zM11 7v2H9V7h2zm3 0v2h-2V7h2zm3 0v2h-2V7h2zm3 0v2h-2V7h2zm0-5v2H6V2h14z"/>
</svg>
</span>
    </div>
        </span>
        <span class="link-with-icon__text link-with-icon__text--light">
            Upcoming events
        </span>
    </a>
            </div>
        </li>
        <li class="cta-component__list-item">
            <div class="cta-component__divider-line cta-component__divider-line--light"></div>
            <div class="link-with-icon link-with-icon--music">
                <a class="link-with-icon__link" href="#">
        <span class="link-with-icon__icon">
            <div class="color-circle-icon color-circle-icon--music">
            <span class="color-circle-icon__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>
    </div>
        </span>
        <span class="link-with-icon__text link-with-icon__text--light">
            Find out more
        </span>
    </a>
            </div>
        </li>
        <li class="cta-component__list-item">
            <div class="cta-component__divider-line cta-component__divider-line--light"></div>
            <div class="link-with-icon link-with-icon--music">
                <a class="link-with-icon__link" href="#">
        <span class="link-with-icon__icon">
            <div class="color-circle-icon color-circle-icon--music">
            <span class="color-circle-icon__icon"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="24" viewBox="0 0 22 24">
    <path fill="#FFF" fill-rule="evenodd" d="M10.621 13.001h.758l.74.008C18.424 13.115 22 14.164 22 17c-2.333 4.667-6 7-11 7s-8.667-2.333-11-7c0-2.945 3.856-3.963 10.621-3.999zM11 0c2.761 0 5 2 5 6 0 3.314-2.239 6-5 6S6 9.314 6 6c0-4 2.239-6 5-6z"/>
</svg>
</span>
    </div>
        </span>
        <span class="link-with-icon__text link-with-icon__text--light">
            Read the bio
        </span>
    </a>
            </div>
        </li>
        <li class="cta-component__list-item">
            <div class="cta-component__divider-line cta-component__divider-line--light"></div>
            <div class="link-with-icon link-with-icon--music">
                <a class="link-with-icon__link" href="#">
        <span class="link-with-icon__icon">
            <div class="color-circle-icon color-circle-icon--music">
            <span class="color-circle-icon__icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="24" viewBox="0 0 16 24">
    <path fill="#FFF" d="M7 20c1.105 0 2 .895 2 2s-.895 2-2 2-2-.895-2-2 .895-2 2-2zM8.192 0c4.611 0 7.683 2.73 7.804 6.472L16 6.77c0 4.141-3.378 6.583-7.247 7.193L8.5 14 8 18H6l-.5-6c4.433-.1 7.572-2.191 7.707-4.944l.004-.252c0-2.437-1.952-4.4-5.089-4.4-2.48 0-4.67 1.478-6.415 3.367L1.5 6 0 4c1.987-2.336 4.462-4 8.192-4z"/>
</svg>
</span>
    </div>
        </span>
        <span class="link-with-icon__text link-with-icon__text--light">
            Ask a question
        </span>
    </a>
            </div>
        </li>
        <li class="cta-component__list-item">
            <div class="cta-component__divider-line cta-component__divider-line--light"></div>
            <div class="link-with-icon link-with-icon--music">
                <a class="link-with-icon__link" href="#">
        <span class="link-with-icon__icon">
            <div class="color-circle-icon color-circle-icon--music">
            <span class="color-circle-icon__icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="24" viewBox="0 0 16 24">
    <path fill="#FFF" fill-rule="evenodd" d="M14.578 12.554a8 8 0 1 0-13.156 0L8 24l6.578-11.446zM8 13.334A5.333 5.333 0 1 0 8 2.666a5.333 5.333 0 0 0 0 10.666z"/>
</svg>
</span>
    </div>
        </span>
        <span class="link-with-icon__text link-with-icon__text--light">
            See your location
        </span>
    </a>
            </div>
        </li>
        <li class="cta-component__list-item">
            <div class="cta-component__divider-line cta-component__divider-line--light"></div>
            <div class="link-with-icon link-with-icon--music">
                <a class="link-with-icon__link" href="#">
        <span class="link-with-icon__icon">
            <div class="color-circle-icon color-circle-icon--music">
            <span class="color-circle-icon__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path fill="#E84A27" fill-rule="evenodd" d="M14.682 10.66a.948.948 0 0 1-1.258 1.414L13.34 12l-.67-.67a4.74 4.74 0 0 0-6.556-.143l-.149.143-2.681 2.681a4.74 4.74 0 0 0 6.555 6.847l.149-.143 3.352-3.352a.948.948 0 0 1 1.414 1.258l-.073.083-3.352 3.352a6.637 6.637 0 0 1-9.545-9.222l.159-.164L4.625 9.99a6.637 6.637 0 0 1 9.222-.159l.164.159.67.67zm7.374-8.716a6.637 6.637 0 0 1 .159 9.222l-.159.164-2.681 2.681a6.637 6.637 0 0 1-9.222.159l-.164-.159-.67-.67a.948.948 0 0 1 1.257-1.415l.083.074.67.67a4.74 4.74 0 0 0 6.556.143l.149-.143 2.681-2.681a4.74 4.74 0 0 0-6.555-6.847l-.149.143-3.352 3.352a.948.948 0 0 1-1.414-1.258l.073-.083 3.352-3.352a6.637 6.637 0 0 1 9.386 0z"/>
</svg>
</span>
    </div>
        </span>
        <span class="link-with-icon__text link-with-icon__text--light">
            Visit the website
        </span>
    </a>
            </div>
        </li>
    </ul>
</div>


        {% set width = component.jumbo == true ? 'jumbo' : 'regular' %}
<div class="cta-component cta-component--{{ background }} cta-component--{{ siteUnit }} cta-component--{{ width }} cta-component--{{ componentSpacing }}">
    {% set hasHeader = component.header|default and (component.header|trim) %}
    {% if component.header|default and (component.header|trim) %}
        <h2 class="cta-component__header cta-component__header--{{ background }} cta-component__header--{{ component.hideHeader ? 'invisible' }}"
            id="{{ component.header|sanitize }}">
            {{ component.header }}
        </h2>
    {% endif %}

    {% if component.jumbo|default(false) %}
        <ul class="cta-component__link-list">
            {% for iconLink in component.callToActionList %}
                <li class="cta-component__list-item">
                    <div class="cta-component__divider-line cta-component__divider-line--{{ background }}"></div>
                    {% include 'partials/link-with-icon/link-with-icon.twig' with {
                        iconLink: iconLink
                    }%}
                </li>
            {% endfor %}
        </ul>
    {% else %}
        <div class="cta-component__button">
            {% set buttonWidth = hasHeader ? 'regular' : 'full' %}
            {% include 'bits/standard-button/standard-button.twig' with {
                button: {
                    type: 'primary',
                    icon: component.callToAction.type|default('internal') ~ '-link',
                    style: 'cta-component',
                    text: component.callToAction.text,
                    url: component.callToAction.url,
                    width: buttonWidth,
                }
            } %}
        </div>
    {% endif %}
</div>


        
            
            {
  "siteUnit": "music",
  "departmentName": "Music",
  "background": "light",
  "componentSpacing": "large",
  "component": {
    "type": "cta",
    "header": "Interested in learning more?",
    "callToAction": null,
    "jumbo": true,
    "callToActionList": [
      {
        "text": "Apply now",
        "url": "#",
        "icon": "edit"
      },
      {
        "text": "Contact us",
        "url": "#",
        "icon": "chat"
      },
      {
        "text": "Upcoming events",
        "url": "#",
        "icon": "calendar"
      },
      {
        "text": "Find out more",
        "url": "#",
        "icon": "right-chevron"
      },
      {
        "text": "Read the bio",
        "url": "#",
        "icon": "person"
      },
      {
        "text": "Ask a question",
        "url": "#",
        "icon": "question-mark"
      },
      {
        "text": "See your location",
        "url": "#",
        "icon": "location-marker"
      },
      {
        "text": "Visit the website",
        "url": "#",
        "icon": "url-link"
      }
    ]
  }
}

File:

Content:


                                .cta-component
    --backgroundColor cloud

    &--arch
        --backgroundColor cloud

    &--art
        --backgroundColor cloud

    &--college
        --backgroundColor cloud

    &--dance
        --backgroundColor cloud

    &--landarch
        --backgroundColor cloud

    &--theatre
        --backgroundColor cloud

    &--music
        --backgroundColor cloud

    &--light
        --backgroundColor cloud

    &--dark
        --backgroundColor charcoalLighter

    &--large
        @extends $componentWithMargin

    &--medium
        @extends $componentWithMarginMedium

    &--small
        @extends $componentWithMarginSmall

    padding 24px 16px
    position relative
    fluid(padding-top padding-bottom, 500px, maxContentWidth, 48px, 64px)
    fluid(padding-left padding-right, 500px, maxContentWidth, 24px, 48px)

    &--light
        background-color cloud

    &--dark
        background-color charcoalLighter

    &__header
        @extends $secondaryTitle
        font-size responsive 40px 56px
        margin-bottom 32px
        &--invisible
            @extends $visuallyHidden

    &__link-list
        @supports (display: grid)
            display grid
            grid-template-columns repeat(auto-fit, minmax(300px, 1fr))
        margin-top 24px

    &__divider-line
        background-color cloudDark
        content ""
        display block
        height 2px
        margin-bottom 8px
        width 100%

        &--dark
            background-color charcoalLight

    &__list-item
        padding 8px 20px 8px 0px

    &--jumbo
        &:before
            background-color var(--backgroundColor)
            content ''
            height 100%
            position absolute
            right -100vw
            top 0
            width 100vw

        &:after
            background-color var(--backgroundColor)
            content ''
            height 100%
            position absolute
            left -100vw
            top 0
            width 100vw


$orangeStripe
    background-color illiniOrange
    bottom 0
    content ""
    display block
    position absolute
    top 24px
    height 8px
    width 100vw

.unit-durp .cta-component__header
    &:before
        @extends $orangeStripe
        fluid(top, 500px, maxContentWidth, 24px, 32px)

URL: /components/raw/cta-component/cta-component.styl
Filesystem Path: components/components/cta-component/cta-component.styl
Size: 2.3 KB

Handle: @cta-component--jumbo-call-to-action
Variants (7): Default , Durp Orange Line , No Header , Long Cta Text , Dark , Jumbo Call To Action , Jumbo Call To Action Dark
Preview:
- With layout
- Component only
Filesystem Path: components/components/cta-component/cta-component.twig

There are no notes for this item.