University of Florida College of the Arts Pattern Library

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--light
            standard-button---width standard-button--primary">
            <div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Learn more</span><span class="standard-button__icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <mask id="mask0_5509_8875" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
                                <rect width="24" height="24" fill="#D9D9D9" />
                            </mask>
                            <g mask="url(#mask0_5509_8875)">
                                <path d="M16.175 13H4V11H16.175L10.575 5.4L12 4L20 12L12 20L10.575 18.6L16.175 13Z" fill="white" />
                            </g>
                        </svg></span></span></div>
        </a>
    </div>
</div>
 
<div class="call-to-action {{  fields.isJumbo ? 'call-to-action--jumbo' : '' }}
        {{  background == 'dark' ? 'call-to-action--dark' : '' }}"
     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,
                    type: 'primary',
                    url: fields.linkReference,
                },
                background: 'light'
            } %}
        </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": "chat"
            }
          }
        },
        {
          "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": "user"
            }
          }
        },
        {
          "fields": {
            "linkText": "Ask a question",
            "linkUrl": "#",
            "icon": {
              "name": "help"
            }
          }
        },
        {
          "fields": {
            "linkText": "See your location",
            "linkUrl": "#",
            "icon": {
              "name": "location"
            }
          }
        },
        {
          "fields": {
            "linkText": "Visit the website",
            "linkUrl": "#",
            "icon": {
              "name": "link"
            }
          }
        }
      ]
    }
  }
}
  • Content: 
    .call-to-action
    --backgroundColor beige
    --textColor blue500

    &--jumbo
        --backgroundColor white

    &--jumbo&--dark
        --backgroundColor linear-gradient(180deg, #002657 0%, #162F93 100%)
        --textColor white

    @extends $componentWithMargin
    background var(--backgroundColor)
    border-radius 16px
    padding 48px
    position relative

    &__lead-in-text
        @extends $headline2alt
        color blue500

    &__button
        margin-top spacingLg

    &__description
        @extends $bodyLarge
        margin-top spacingSm

    &__link-list
        margin-top spacingLg

        @supports (display: grid)
            display grid
            grid-gap 24px 32px
            grid-template-columns repeat(auto-fit, minmax(300px, 1fr))

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

    &__list-item
        padding 8px 20px 8px 0px
  • URL: /components/raw/call-to-action/call-to-action.styl
  • Filesystem Path: patterns/blocks/call-to-action/call-to-action.styl
  • Size: 988 Bytes

No notes defined.