Component

CTA

SCSS Location: /styles/scss/partial/_cta.scss
  • Status: Design
  • Status: Development
  • Status: Documentation

Description

CTA buckets for displaying targeted content with a link to other pages.

Guidelines

Item Design Guidelines Not Provided

Usage

CTA content can be standalone, displayed side-by-side, or as a single item in the right rail. The standalone and side-by-side verions be either be inline with content or in a region below the primary content container.

  1. CTA1 - Full Width Content Footer CTA
    • The outer container requires the class .cta__container--stripe, and a div inside that provides the stripe treatment using these classes, .stripe stripe--se stripe--cta.
    • This CTA requires that the modifier class .cta__inner--two-thirds be added to .cta__inner container.
  2. CTA2 - Content Width 3 Column CTA
    • This CTA is used in the content section on various pages, thus it must be contained within the .container-fluid and .row containers. This CTA requires the modifier class, .cta__container--3-col.
  3. CTA2 (Without Paragraph element)
    • This CTA is for the condition when a paragraph element is not used. The title column is expanded and cta column reduced.
  4. CTA3 - Full Width Centered CTA
    • The outer container requires the class .cta__container--stripe, and a div inside that provides the stripe treatment using these classes, .stripe stripe--se stripe--cta.
    • The CTA requires that the modifier class, .cta__inner--full be added to .cta__inner container.
  5. CTA4 - Full Width Quote CTA
    • This requires the .cta__container--wide modifier class on the outer-most container.
  6. CTA5 - Content Width Dual CTA
    • Content Width Dual CTA [Light]: Requires the .cta__container--dual-light modifier class.
    • Content Width Dual CTA [Dark]: Requires the .cta__container--dual-dark modifier class.
    • Content Width Dual CTA [Ribbon]: Requires the .cta__container--dual-image modifier class. Each internal .cta-wrapper contains a ribbon container. Ribbon containers are described below in the details for CTA10.
  7. CTA6 - Full Width Content Footer Form CTA
    • The outer-most container requires the .cta__container--full-dark class.
    • The .cta__content container, which holds the form, requires the .cta__content--form class, while the form-container itself requires the .form-container--cta modifier class.
    • The form element should utilize the .form--inverse modifier class.
  8. CTA7 - Full Width Asset CTA
    • Full Width Asset CTA [Dark Blue Pattern Background]: Both the image and video variations require the .cta__container--gradient modifier on the outer-most container. The Dark Blue Pattern variations also require the .cta__content--gradient modifier on the content container.
    • Full Width Asset CTA [White Background]: Requires the .cta-content--bg-light modifier on the outer-most container.
  9. CTA8 - Content Width Split CTA
    • This CTA requires the .cta__container--full-image modifier on the outer-most container.
  10. CTA9 - Full Width Diagonal Split CTA
    • This CTA requires the .cta__container--diagonal modifier on the outer-most container.
    • This CTA contains a .cta__background-container for the image and a separate stripe container with the classes .stripe--se stripe--cta-diag.
  11. CTA10 - Content Width Centered Ribbon CTA
    • Inside the .cta__wrapper class is a .inner-container with the additional classes, .cta__inner-container inner-container--corners applied.
    • Inside this container are two Riboon Container divs. These divs display the ribbon visual effects at the corresponding outer corners according to the ribbon classes applied, in this case, to the northwest and southeast corners.
    • For CTA's that open a video modal, the .cta__content container should have the class .cta__content--video-modal. Additionally, the .cta__desc container needs the class, .cta__desc--video-modal applied.
  12. CTA11 - Rail CTA
    • Must use the class .cta__container--rail along with either a .cta__container--rail--asset or a .cta__container--rail--bg-image modifier class.
    • The entire component is clickable when using the bg-image variety.
    • Since the link is optional when using the asset variety, only the link is clickable.

CTA1 - Full Width Content Footer CTA

CTA7 Two-Thirds

Take our two minute quiz to find out which products best suite your business needs!

CTA2 - Content Width 3 Column CTA

Don't see your industry?

Learn how Vertex can help.

CTA2 - Content Width 3 Column CTA (With long paragraph)

Don't see your industry?

Learn how Vertex can help. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue.

CTA2 (Without Paragraph element)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut placerat quam id varius congue. Fusce lectus purus, faucibus ultricies aliquam

CTA3 - Full Width Centered CTA

Full Width CTA Centered

Take our two minute quiz to find out which products best suite your business needs!

Watch Vertex for Retail Video

CTA4 - Full Width Quote CTA

CTA5 - Content Width Dual CTA - variations

Dual Container Light BG

Recommended Character Count: 50-70. Vide iisque omittam eos ne. Pri explicari constituto ex, est vidit dicunt cu.

Partners

We partner with leading software and services providers to deliver corporate tax technology solutions that help you work more efficiently and utilize resources more effectively.

Dual Container Dark BG

Recommended Character Count: 50-70. Vide iisque omittam eos ne. Pri explicari constituto ex, est vidit dicunt cu.

Partners

We partner with leading software and services providers to deliver corporate tax technology solutions that help you work more efficiently and utilize resources more effectively.

CTA6 - Full Width Content Footer Form CTA

Stay Ahead of Complex Regulations and Changing Technology

Learn more about how Vertex can help provide accuracy and consistency in every transaction, every day, around the world.

CTA7 - Full Width Asset CTA

CTA7 Dark Blue Pattern Background - Image

See how Vertex and Magento Commerce Cloud parter to provide a seamless tax automation experience for Magento customers.

Read More
Video Thumbnail Name

Vertex Wins Reader’s Choice Awards from CPA Practice Advisor

See how Vertex and Magento Commerce Cloud parter to provide a seamless tax automation experience for Magento customers.

CTA7 White Background - Image

See how Vertex and Magento Commerce Cloud parter to provide a seamless tax automation experience for Magento customers.

Read More
Image Thumbnail Name

CTA7 - White Background - Video

See how Vertex and Magento Commerce Cloud parter to provide a seamless tax automation experience for Magento customers.

CTA8 - Content Width Split CTA

CTA9 - Full Width Diagonal Split CTA

South Dakota V. Wayfair Inc. Knowlege Center

Members of our Chief Tax Office have shared their insights and addressed frequently asked questions through blog posts, webcasts, podcasts and panel discussions.

Learn More

SAP Ariba Live 2020

-

See intelligent spend in action. Tempor id eu nisl nunc mi. Ut tellus elementum sagittis vitae.

View All SAP Events

CTA10 - Content Width Centered Ribbon CTA

CTA11 - Rail CTA | Asset

Image Alt Text

Lorem Ipsum Dolor Sit Amet Lorem Ipsum

Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum.

Example Link Text

CTA11 - Rail CTA | Background Image