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.
- CTA1 - Full Width Content Footer CTA
- The outer container requires the class
.cta__container--stripe
, and adiv
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.
- The outer container requires the class
- 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
.
- This CTA is used in the content section on various pages, thus it must be contained within the
- 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.
- CTA3 - Full Width Centered CTA
- The outer container requires the class
.cta__container--stripe
, and adiv
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.
- The outer container requires the class
- CTA4 - Full Width Quote CTA
- This requires the
.cta__container--wide
modifier class on the outer-most container.
- This requires the
- 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.
- Content Width Dual CTA [Light]: Requires the
- 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.
- The outer-most container requires the
- 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.
- Full Width Asset CTA [Dark Blue Pattern Background]: Both the image and video variations require the
- CTA8 - Content Width Split CTA
- This CTA requires the
.cta__container--full-image
modifier on the outer-most container.
- This CTA requires the
- 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
.
- This CTA requires the
- CTA10 - Content Width Centered Ribbon CTA
- Inside the
.cta__wrapper
class is a.ribbon-container
with the additional classes,.cta__ribbon-container ribbon-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.
- Inside the
- 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.
- Must use the class
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
CTA2 Content Width 3 Column
Take our two minute quiz to find out which products best suite your business needs!
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!
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 MoreVertex 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 MoreCTA7 - 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 MoreSAP Ariba Live 2020
-
See intelligent spend in action. Tempor id eu nisl nunc mi. Ut tellus elementum sagittis vitae.
View All SAP EventsCTA10 - Content Width Centered Ribbon CTA
CTA11 - Rail CTA | Asset
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