Custom theme (replace with client name)

Call To Action: Jumbo Call To Action 

<div class="call-to-action" data-cy="call-to-action">
    <h2 class="call-to-action__lead-in-text" data-cy="call-to-action__lead-in-text">
        Interested in learning more?
    </h2>

    <p class="call-to-action__description" data-cy="call-to-action__description" data-description="true">
        Here is more information to get your attention.
    </p>
    <ul class="call-to-action__link-list" data-cy="call-to-action__link-list" data-is-jumbo="true">

        <div class="link-with-icon">
            <a class="link-with-icon__link" href="#">
                <span class="link-with-icon__icon">
                    <div class="color-circle-icon">
                        <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">
                    Apply now
                </span>
            </a>
        </div>
        <div class="link-with-icon">
            <a class="link-with-icon__link" href="#">
                <span class="link-with-icon__icon">
                    <div class="color-circle-icon">
                        <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">
                    Contact us
                </span>
            </a>
        </div>
        <div class="link-with-icon">
            <a class="link-with-icon__link" href="#">
                <span class="link-with-icon__icon">
                    <div class="color-circle-icon">
                        <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">
                    Upcoming events
                </span>
            </a>
        </div>
        <div class="link-with-icon">
            <a class="link-with-icon__link" href="#">
                <span class="link-with-icon__icon">
                    <div class="color-circle-icon">
                        <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-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">
                    Find out more
                </span>
            </a>
        </div>
        <div class="link-with-icon">
            <a class="link-with-icon__link" href="#">
                <span class="link-with-icon__icon">
                    <div class="color-circle-icon">
                        <span class="color-circle-icon__icon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
                                <path d="M17.3 10.1c0-2.5-2.1-4.4-4.8-4.4-2.2 0-4.1 1.4-4.6 3.3h-.2C5.7 9 4 10.7 4 12.8c0 2.1 1.7 3.8 3.7 3.8h9c1.8 0 3.2-1.5 3.2-3.3.1-1.6-1.1-2.9-2.6-3.2zm-.5 5.1h-9c-1.2 0-2.2-1.1-2.2-2.3s1-2.4 2.2-2.4h1.3l.3-1.1c.4-1.3 1.7-2.2 3.2-2.2 1.8 0 3.3 1.3 3.3 2.9v1.3l1.3.2c.8.1 1.4.9 1.4 1.8-.1 1-.9 1.8-1.8 1.8z"></path>
                            </svg>
                        </span>
                    </div>
                </span>
                <span class="link-with-icon__text">
                    Read the bio
                </span>
            </a>
        </div>
        <div class="link-with-icon">
            <a class="link-with-icon__link" href="#">
                <span class="link-with-icon__icon">
                    <div class="color-circle-icon">
                        <span class="color-circle-icon__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>
                        </span>
                    </div>
                </span>
                <span class="link-with-icon__text">
                    Ask a question
                </span>
            </a>
        </div>
        <div class="link-with-icon">
            <a class="link-with-icon__link" href="#">
                <span class="link-with-icon__icon">
                    <div class="color-circle-icon">
                        <span class="color-circle-icon__icon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
                                <path d="M17.3 10.1c0-2.5-2.1-4.4-4.8-4.4-2.2 0-4.1 1.4-4.6 3.3h-.2C5.7 9 4 10.7 4 12.8c0 2.1 1.7 3.8 3.7 3.8h9c1.8 0 3.2-1.5 3.2-3.3.1-1.6-1.1-2.9-2.6-3.2zm-.5 5.1h-9c-1.2 0-2.2-1.1-2.2-2.3s1-2.4 2.2-2.4h1.3l.3-1.1c.4-1.3 1.7-2.2 3.2-2.2 1.8 0 3.3 1.3 3.3 2.9v1.3l1.3.2c.8.1 1.4.9 1.4 1.8-.1 1-.9 1.8-1.8 1.8z"></path>
                            </svg>
                        </span>
                    </div>
                </span>
                <span class="link-with-icon__text">
                    See your location
                </span>
            </a>
        </div>
        <div class="link-with-icon">
            <a class="link-with-icon__link" href="#">
                <span class="link-with-icon__icon">
                    <div class="color-circle-icon">
                        <span class="color-circle-icon__icon">
                            <svg aria-label="File download" xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16">
                                <path fill="#E84A27" d="M10 0l4 4v12H0V0h10zM9 2H2v12h10V5H9V2zm1 9v1H4v-1h6zm0-2v1H4V9h6zm0-2v1H4V7h6zM6 4v1H4V4h2z" />
                            </svg>
                        </span>
                    </div>
                </span>
                <span class="link-with-icon__text">
                    Visit the website
                </span>
            </a>
        </div>
    </ul>
</div>
 
<div class="call-to-action"
     data-cy="call-to-action">
    <h2 class="call-to-action__lead-in-text"
        data-cy="call-to-action__lead-in-text">
        {{ fields.leadInText }}
    </h2>

    {% if fields.isJumbo|default(false) %}
        {% if fields.showDescription|default(false) %}
            <p class="call-to-action__description"
                data-cy="call-to-action__description"
                {{ fields.description ? 'data-description="true"' : 'data-description="false"'}}>
                {{ fields.description }}
            </p>
        {% endif %}
        <ul class="call-to-action__link-list"
            data-cy="call-to-action__link-list"
            {{ fields.isJumbo ? 'data-is-jumbo="true"' : 'data-is-jumbo="false"'}}>
            {{ content }}
            {% for item in fields.innerBlocks.callToActionList  %}
                {% include 'blocks/link-with-icon/link-with-icon.twig' with item %}
            {% endfor %}
        </ul>
    {% else %}
        <div class="call-to-action__button" data-cy="call-to-action__button"
            {{ fields.isJumbo ? 'data-is-jumbo="true"' : 'data-is-jumbo="false"'}}>
            {% include 'bits/standard-button/standard-button.twig' with {
                button: {
                    text: fields.linkText,
                    url: fields.linkReference,
                }
            } %}
        </div>
    {% endif %}
</div>
 
{
  "fields": {
    "type": "cta",
    "leadInText": "Interested in learning more?",
    "isJumbo": true,
    "linkText": "Learn more",
    "linkUrl": "#",
    "showDescription": true,
    "description": "Here is more information to get your attention.",
    "innerBlocks": {
      "callToActionList": [
        {
          "fields": {
            "linkText": "Apply now",
            "linkUrl": "#",
            "icon": {
              "name": "edit"
            }
          }
        },
        {
          "fields": {
            "linkText": "Contact us",
            "linkUrl": "#",
            "icon": {
              "name": "calendar"
            }
          }
        },
        {
          "fields": {
            "linkText": "Upcoming events",
            "linkUrl": "#",
            "icon": {
              "name": "calendar"
            }
          }
        },
        {
          "fields": {
            "linkText": "Find out more",
            "linkUrl": "#",
            "icon": {
              "name": "right-chevron"
            }
          }
        },
        {
          "fields": {
            "linkText": "Read the bio",
            "linkUrl": "#",
            "icon": {
              "name": "star-filled"
            }
          }
        },
        {
          "fields": {
            "linkText": "Ask a question",
            "linkUrl": "#",
            "icon": {
              "name": "quote"
            }
          }
        },
        {
          "fields": {
            "linkText": "See your location",
            "linkUrl": "#",
            "icon": {
              "name": "cloud"
            }
          }
        },
        {
          "fields": {
            "linkText": "Visit the website",
            "linkUrl": "#",
            "icon": {
              "name": "file-link"
            }
          }
        }
      ]
    }
  }
}
  • Content: 
    .call-to-action
    --backgroundColor cloud

    @extends $componentWithMargin
    position relative

    &__lead-in-text
        @extends $secondaryTitle
        font-size responsive 40px 56px
        margin-bottom 32px

    &__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%

    &__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
  • URL: /components/raw/call-to-action/call-to-action.styl
  • Filesystem Path: patterns/blocks/call-to-action/call-to-action.styl
  • Size: 1 KB

No notes defined.