Custom theme (replace with client name)

Call To Action: Long Cta Text 

<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 about this interesting topic?
    </h2>

    <div class="call-to-action__button" data-cy="call-to-action__button" data-is-jumbo="false">
        <a href="" class="
            standard-button
            standard-button--natural-width
            

        ">
            <span class="standard-button__text">
                Learn more
            </span>

            <span class="standard-button__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>
        </a>
    </div>
</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 about this interesting topic?",
    "isJumbo": false,
    "linkText": "Learn more",
    "linkUrl": "#",
    "showDescription": false,
    "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.