CTA

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.