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
    • 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
    • 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 - 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.
  11. CTA10 - 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    Return to List

CTA7 Two-Thirds

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

CTA7 Full-Width

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

CTA2 - Content Width 3 Column CTA    Return to List

Don't see your industry?

Learn how Vertex can help.

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

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)    Return to List

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    Return to List

Get in touch

Full Width CTA Centered

Drop us a line and find out how Vertex can help you do business better.

CTA4 - Full Width Quote CTA    Return to List

CTA5 - Content Width Dual CTA - variations    Return to List

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.

Vertex Cloud Indirect Tax

A SaaS solution to help any size business simplify tax while expanding their enterprise.

Man giving a presentation to a group of people

Vertex Cloud Indirect Tax

A SaaS solution to help any size business simplify tax while expanding their enterprise.

Woman looking at a tablet

Vertex Cloud Indirect Tax

A SaaS solution to help any size business simplify tax while expanding their enterprise.

Woman looking at a tablet

CTA6 - Full Width Content Footer Form CTA    Return to List

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.

CTA6A - Full Width Content Footer Form CTA with Gradient    Return to List

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, AKA "Callout shelf simple, image half content"    Return to List

CTA7 Teal - 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    Return to List

CTA9 - Content Width Centered Ribbon CTA    Return to List

CTA10 - Rail CTA | Asset    Return to List

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

CTA10 - Rail CTA | Background Image

CTA11 Product CTA

Take Tax Compliance to the Edge

Manage tax calculation at the point of sale for frictionless commerce with Vertex O Series Edge.

Take Tax Compliance to the Edge

Manage tax calculation at the point of sale for frictionless commerce with Vertex O Series Edge.