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.
Example

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!

Take Quiz

CTA7 Full-Width

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

Take Quiz

CTA2 - Content Width 3 Column CTA    Return to List

Don't see your industry?

Learn how Vertex can help.
Get In Touch

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.

Get In Touch

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

Take Quiz

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.

Get in touch

CTA4 - Full Width Quote CTA    Return to List

LL Bean Centralizes Sales Tax Across all Systems

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut euismod turpis vitae blandit mollis. Proin ac pharetra odio, eu tincidunt ante. Vivamus volutpat nibh nec massa blandit congue."
Meg McLaughlin
Tax Accountant, LL Bean
See Customer Story

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.

See Our Integrations

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.

See Our Partners

Dual Container Dark BG

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

See Our Integrations

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.

See Our Integrations

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.

Video Thumbnail Name Watch Video

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.

Video Thumbnail Name Watch Video

CTA8 - Content Width Split CTA    Return to List

CTA Title 25 characters max

CTA Description Recommended max characters: 30-50.

Find A Career

CTA9 - Content Width Centered Ribbon CTA    Return to List

U.S. Taxes for an International Company

See how Vertex Cloud helped Degrenne manage sales and use tax.

Explore

See How It Works

Vertex Cloud for Magento

Watch Demo

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

Our Clients

We create solutions for industry leaders from all over the world.

See Our Clients

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.

Discover 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.

Discover O series Edge 

<h2 id="CTA1" class="h4">CTA1 - Full Width Content Footer CTA &nbsp;&nbsp; <a href="#component_list">Return to List</a></h2>

<div class="cta__container cta__container--stripe">
    <div class="cta__container-inner">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1 col-lg-8 col-lg-offset-2 cta__inner cta__inner--two-thirds">
                    <div class="cta__content">
                        <h2 class="u-padding-bottom-sm cta__title h4">CTA7 Two-Thirds</h2>
                        <div class="u-margin-top wysiwyg">
                            <p>Take our two minute quiz to find out which products best suite your business needs!</p>
                        </div>
                    </div>
                    <div class="u-margin-top cta__btn-container">
                        <a href="#" class="btn btn--tertiary cta__btn">Take Quiz</a>
                    </div>
                </div>
                <!-- /.cta__inner -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </div>
    <!-- /.cta__container-inner -->
</div>
<div class="cta__container cta__container--stripe">
    <div class="cta__container-inner">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-10 col-md-offset-1 cta__inner cta__inner--full">
                    <div class="u-text-center cta__content">
                        <h2 class="u-margin-hug-top cta__title h3">CTA7 Full-Width</h2>
                        <div class="u-margin-top-md wysiwyg">
                            <p>Take our two minute quiz to find out which products best suite your business needs!</p>
                        </div>
                    <div class="u-margin-top-md">
                        <a href="#" class="btn btn--tertiary cta__btn">Take Quiz</a>
                    </div>
                    </div>
                </div>
                <!-- /.cta__inner -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </div>
    <!-- /.cta__container-inner -->
</div>
<!-- /.cta__container -->

<h2 id="CTA2a" class="h4">CTA2 - Content Width 3 Column CTA &nbsp;&nbsp; <a href="#component_list">Return to List</a></h2>
<div class="container-fluid">
    <div class="row">
        <div class="cta__container cta__container--3-col">
            <div class="col-12 col-sm-6 col-lg-4">
                <h2 class="h4 u-color-neutral-darkest u-padding-bottom-sm cta__title">Don't see your industry?</h2>
            </div>
            <div class="col-12 col-sm-6 col-lg-8 cta__desc-container">
                <div class="cta__description u-color-neutral-darkest">Learn how Vertex can help.</div>
                <div class="cta__btn-container">
                    <a href="#" class="btn btn--secondary cta__btn">Get In Touch</a>
                </div>
            </div>
        </div>
        <!-- /.cta__container -->
    </div>
    <!-- /.row -->
</div>
<!-- /.container-fluid -->

<h2 id="CTA2b" class="h4">CTA2 - Content Width 3 Column CTA (With long paragraph) &nbsp;&nbsp; <a href="#component_list">Return to List</a></h2>
<div class="container-fluid">
    <div class="row">
        <div class="cta__container cta__container--3-col">
            <div class="col-12 col-sm-6 col-lg-4">
                <h2 class="h4 u-color-neutral-darkest u-padding-bottom-sm cta__title">Don't see your industry?</h2>
            </div>
            <div class="col-12 col-sm-6 col-lg-8 cta__desc-container">
                <p class="u-color-neutral-darkest">
                    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.
                </p>
                <div class="cta__btn-container">
                    <a href="#" class="btn btn--secondary cta__btn">Get In Touch</a>
                </div>
            </div>
        </div>
        <!-- /.cta__container -->
    </div>
    <!-- /.row -->
</div>
<!-- /.container-fluid -->

<h2 id="CTA2c" class="h4">CTA2 (Without Paragraph element) &nbsp;&nbsp; <a href="#component_list">Return to List</a></h2>
<div class="container-fluid">
    <div class="row">
        <div class="cta__container cta__container--3-col">
            <div class="col-12 col-sm-8 col-lg-8">
                <h2 class="h4 u-color-neutral-darkest cta__title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut placerat quam id varius congue. Fusce lectus purus, faucibus ultricies aliquam</h2>
            </div>
            <div class="col-12 col-sm-4 col-lg-4 cta__desc-container">
                <div class="cta__btn-container">
                    <a href="#" class="btn btn--secondary cta__btn">Take Quiz</a>
                </div>
            </div>
        </div>
        <!-- /.cta__container -->
    </div>
    <!-- /.row -->
</div>
<!-- /.container-fluid -->

<h2 id="CTA3" class="h4">CTA3 - Full Width Centered CTA &nbsp;&nbsp; <a href="#component_list">Return to List</a></h2>
<div class="cta__container cta__container--stripe cta__container--3">
    <div class="cta__container-inner" style="background-image: url(../../images/cta3-background.svg);">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-10 col-md-offset-1 cta__inner cta__inner--full">
                    <div class="u-text-center cta__content">
                        <p class="u-margin-bottom-sm cta__eyebrow h3">Get in touch</p>
                        <h2 class="u-margin-hug-top cta__title h1">Full Width CTA Centered</h2>
                        <div class="u-margin-top wysiwyg">
                            <p>Drop us a line and find out how Vertex can help you do business better.</p>
                        </div>
                        <div class="u-margin-top">
                            <a href="#" class="btn btn--tertiary cta__btn">Get in touch</a>
                        </div>
                    </div>
                </div>
                <!-- /.cta__inner--full -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid-->
    </div>
    <!-- /.cta__container-inner -->
</div>
<!-- /.cta__container-->

<h2 id="CTA4" class="h4">CTA4 - Full Width Quote CTA &nbsp;&nbsp; <a href="#component_list">Return to List</a></h2>
<div class="cta__container cta__container--wide">
    <a href="#" class="cta__link" aria-label="Meaningful link description here" style="background-image: url(../../images/TEMP-cta-01-@2x.jpg);">
        <div class="u-text-center cta__content col-md-9 cta__content--full-image-center">
            <h2 class="h2 cta__title">LL Bean Centralizes Sales Tax Across all Systems</h2>
            <figure class="cta__desc">
                <blockquote class="cta__quote">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut euismod turpis vitae blandit mollis. Proin ac pharetra odio, eu tincidunt ante. Vivamus volutpat nibh nec massa blandit congue."</blockquote>
                <figcaption>
                    Meg McLaughlin<br>Tax Accountant, LL Bean
                </figcaption>
            </figure>
            <span class="btn btn--primary">See Customer Story</span>
        </div>
    </a>
</div>
<!-- /.cta__container -->

<h2 id="CTA5" class="h4">CTA5 - Content Width Dual CTA - variations &nbsp;&nbsp; <a href="#component_list">Return to List</a></h2>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-10 col-lg-offset-1">
            <div class="cta__container cta__container--dual-callout cta__container--dual-callout--light">
                <div class="cta__wrapper">
                    <div class="u-text-center cta__content">
                        <h3 class="cta__title">Dual Container Light BG</h3>
                        <div class="cta__desc">
                            <p>Recommended Character Count: 50-70. Vide iisque omittam eos ne. Pri explicari constituto ex, est vidit dicunt cu.</p>
                        </div>
                        <div class="cta__btn">
                            <a href="#" class="btn btn--secondary">See Our Integrations</a>
                        </div>
                    </div>
                </div>
                <div class="cta__wrapper">
                    <div class="u-text-center cta__content">
                        <h3 class="cta__title">Partners</h3>
                        <div class="cta__desc">
                            <p>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.</p>
                        </div>
                        <div class="cta__btn">
                            <a href="#" class="btn btn--secondary">See Our Partners</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /.cta__container -->

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-10 col-lg-offset-1">
            <div class="cta__container cta__container--dual-callout cta__container--dual-callout--dark">
                <div class="cta__wrapper">
                    <div class="u-text-center cta__content">
                        <h3 class="cta__title">Dual Container Dark BG</h3>
                        <div class="cta__desc">
                            <p>Recommended Character Count: 50-70. Vide iisque omittam eos ne. Pri explicari constituto ex, est vidit dicunt cu.</p>
                        </div>
                        <div class="cta__btn">
                            <a href="#" class="btn btn--secondary">See Our Integrations</a>
                        </div>
                    </div>
                </div>
                <div class="cta__wrapper">
                    <div class="u-text-center cta__content">
                        <h3 class="cta__title">Partners</h3>
                        <div class="cta__desc">
                            <p>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.</p>
                        </div>
                        <div class="cta__btn">
                            <a href="#" class="btn btn--secondary">See Our Integrations</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /.cta__container -->
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-10 col-lg-offset-1">
            <div class="cta__container cta__container--dual-callout cta__container--dual-callout--image">
                <div class="cta__wrapper">
                    <div class="cta__content cta__content--blue">
                        <h3 class="cta__title">Vertex Cloud Indirect Tax</h3>
                        <div class="u-margin-hug cta__desc">
                            <p class="u-margin-hug">A SaaS solution to help any size business simplify tax while expanding their enterprise.</p>
                        </div>
                        <div class="u-margin-hug cta__btn">
                            <a href="#" class="btn btn--secondary" itemprop="url">View <span class="u-sr-only">the Vertex Cloud Indirect Tax </span>Product</a>
                        </div>
                    </div>
                    <img src="../../images/TEMP-cta-01-@2x.jpg" width="188" height="350" alt="Man giving a presentation to a group of people">
                </div>
                <div class="cta__wrapper">
                    <div class="cta__content cta__content--green">
                        <h3 class="cta__title">Vertex Cloud Indirect Tax</h3>
                        <div class="u-margin-hug cta__desc">
                            <p class="u-margin-hug">A SaaS solution to help any size business simplify tax while expanding their enterprise.</p>
                        </div>
                        <div class="u-margin-hug cta__btn">
                            <a href="#" class="btn btn--tertiary" itemprop="url">View <span class="u-sr-only">the Vertex Cloud Indirect Tax </span>Product</a>
                        </div>
                    </div>
                    <img src="../../images/vertexinc-sut-modal-photographic-bg.jpg" width="188" height="350" alt="Woman looking at a tablet">
                </div>
            </div>
            <div class="cta__container cta__container--dual-callout cta__container--dual-callout--image cta__container--dual-callout--image--single">
                <div class="cta__wrapper">
                    <div class="cta__content cta__content--teal">
                        <h3 class="cta__title">Vertex Cloud Indirect Tax</h3>
                        <div class="u-margin-hug cta__desc">
                            <p class="u-margin-hug">A SaaS solution to help any size business simplify tax while expanding their enterprise.</p>
                        </div>
                        <div class="u-margin-hug cta__btn">
                            <a href="#" class="btn btn--tertiary" itemprop="url">View <span class="u-sr-only">the Vertex Cloud Indirect Tax </span>Product</a>
                        </div>
                    </div>
                    <img src="../../images/vertexinc-sut-modal-photographic-bg.jpg" width="530" height="350" alt="Woman looking at a tablet">
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /.cta__container -->

<h2 id="CTA6" class="h4">CTA6 - Full Width Content Footer Form CTA &nbsp;&nbsp; <a href="#component_list">Return to List</a></h2>
<div class="cta__container cta__container--full-dark">
    <div class="cta__wrapper container-fluid">
        <div class="row">
            <div class="col-sm-10 col-sm-offset-1 col-xl-12 col-xl-offset-0 cta__inner">
                <div class="cta__content">
                    <h2 class="u-margin-hug-top cta__title">Stay Ahead of Complex Regulations and Changing Technology</h2>
                    <p class="cta__lede">Learn more about how Vertex can help provide accuracy and consistency in every transaction, every day, around the world.</p>
                    <div class="u-hidden-max-tablet cta__image">
                        <img src="http://picsum.photos/920/560" alt width="390" height="215">
                    </div>
                </div>

                <!-- /.cta__content -->
                <div class="cta__content cta__content--form">
                    <div class="form-container form-container--cta">
                        <form action="#" method="POST" class="form form--2-col form--inverse">
                            <div class="form__grid">
                                <div class="form__item form__item--2-col">
                                    <label for="cta-firstname" class="u-sr-only">First Name</label>
                                    <div class="input__wrapper">
                                        <input type="text" id="cta-firstname" name="cta-firstname" placeholder="First Name">
                                    </div>
                                </div>
                                <div class="form__item form__item--2-col">
                                    <label for="cta-lastname" class="u-sr-only">Last Name</label>
                                    <div class="input__wrapper">
                                        <input type="text" id="cta-lastname" name="cta-lastname" placeholder="Last Name">
                                    </div>
                                </div>
                                <div class="form__item form__item--2-col">
                                    <label for="cta-company" class="u-sr-only">Company</label>
                                    <div class="input__wrapper">
                                        <input type="text" id="cta-company" name="cta-company" placeholder="Company">
                                    </div>
                                </div>
                                <div class="form__item form__item--2-col">
                                    <label for="cta-phone" class="u-sr-only">Phone</label>
                                    <div class="input__wrapper">
                                        <input type="text" id="cta-phone" name="cta-phone" placeholder="Phone">
                                    </div>
                                </div>
                                <div class="form__item">
                                    <label for="cta-company-email" class="u-sr-only">Company Email</label>
                                    <div class="input__wrapper">
                                        <input type="email" id="cta-company-email" name="cta-company-email" placeholder="Company Email">
                                    </div>
                                </div>
                                <div class="form__item form__item--2-col">
                                    <label for="cta-country-select" class="u-sr-only">Country</label>
                                    <div class="input__wrapper">
                                        <select id="cta-country-select" name="cta-country-select" required>
                                            <option value disabled="disabled" hidden="hidden" selected="selected">Country</option>
                                            <option value="0">First Option</option>
                                            <option value="1">Another Option</option>
                                            <option value="2">One Last Option</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form__item form__item--2-col">
                                    <label for="cta-state-select" class="u-sr-only">State</label>
                                    <div class="input__wrapper">
                                        <select id="cta-state-select" name="cta-state-select" required>
                                            <option value disabled="disabled" hidden="hidden" selected="selected">State</option>
                                            <option value="0">First Option</option>
                                            <option value="1">Another Option</option>
                                            <option value="2">One Last Option</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form__item">
                                    <div class="custom__cb">
                                        <input type="checkbox" id="cta-terms-check" name="cta-terms-check"><label for="cta-terms-check" class="form-required">Yes, I understand and accept the <a href="#">Terms and Conditions</a> and <a href="#">Privacy Policy</a> and consent to my information being used as above.</label>
                                    </div>
                                </div>
                                <div class="u-margin-hug form__item">
                                    <input type="submit" class="u-margin-hug btn btn--primary" value="Schedule a Demo">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- /.cta__content--form -->
            </div>
        </div>
    </div>
    <!-- /.cta__wrapper -->
</div>
<!-- /.cta__container -->

<h2 id="CTA6A" class="h4">CTA6A - Full Width Content Footer Form CTA with Gradient &nbsp;&nbsp; <a href="#component_list">Return to List</a></h2>
<div class="cta__container cta__container--full-gradient">
    <div class="cta__wrapper container-fluid">
        <div class="row">
            <div class="col-sm-10 col-sm-offset-1 col-xl-12 col-xl-offset-0 cta__inner">
                <div class="cta__content">
                    <h2 class="u-margin-hug-top cta__title">Stay Ahead of Complex Regulations and Changing Technology</h2>
                    <p class="cta__lede">Learn more about how Vertex can help provide accuracy and consistency in every transaction, every day, around the world.</p>
                    <div class="u-hidden-max-tablet cta__image">
                        <img src="http://picsum.photos/920/560" alt width="390" height="215">
                    </div>
                </div>

                <!-- /.cta__content -->
                <div class="cta__content cta__content--form">
                    <div class="form-container form-container--cta">
                        <form action="#" method="POST" class="form form--2-col form--inverse">
                            <div class="form__grid">
                                <div class="form__item form__item--2-col">
                                    <label for="cta-firstname" class="u-sr-only">First Name</label>
                                    <div class="input__wrapper">
                                        <input type="text" id="cta-firstname" name="cta-firstname" placeholder="First Name">
                                    </div>
                                </div>
                                <div class="form__item form__item--2-col">
                                    <label for="cta-lastname" class="u-sr-only">Last Name</label>
                                    <div class="input__wrapper">
                                        <input type="text" id="cta-lastname" name="cta-lastname" placeholder="Last Name">
                                    </div>
                                </div>
                                <div class="form__item form__item--2-col">
                                    <label for="cta-company" class="u-sr-only">Company</label>
                                    <div class="input__wrapper">
                                        <input type="text" id="cta-company" name="cta-company" placeholder="Company">
                                    </div>
                                </div>
                                <div class="form__item form__item--2-col">
                                    <label for="cta-phone" class="u-sr-only">Phone</label>
                                    <div class="input__wrapper">
                                        <input type="text" id="cta-phone" name="cta-phone" placeholder="Phone">
                                    </div>
                                </div>
                                <div class="form__item">
                                    <label for="cta-company-email" class="u-sr-only">Company Email</label>
                                    <div class="input__wrapper">
                                        <input type="email" id="cta-company-email" name="cta-company-email" placeholder="Company Email">
                                    </div>
                                </div>
                                <div class="form__item form__item--2-col">
                                    <label for="cta-country-select" class="u-sr-only">Country</label>
                                    <div class="input__wrapper">
                                        <select id="cta-country-select" name="cta-country-select" required>
                                            <option value disabled="disabled" hidden="hidden" selected="selected">Country</option>
                                            <option value="0">First Option</option>
                                            <option value="1">Another Option</option>
                                            <option value="2">One Last Option</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form__item form__item--2-col">
                                    <label for="cta-state-select" class="u-sr-only">State</label>
                                    <div class="input__wrapper">
                                        <select id="cta-state-select" name="cta-state-select" required>
                                            <option value disabled="disabled" hidden="hidden" selected="selected">State</option>
                                            <option value="0">First Option</option>
                                            <option value="1">Another Option</option>
                                            <option value="2">One Last Option</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form__item">
                                    <div class="custom__cb">
                                        <input type="checkbox" id="cta-terms-check1" name="cta-terms-check"><label for="cta-terms-check1" class="form-required">Yes, I understand and accept the <a href="#">Terms and Conditions</a> and <a href="#">Privacy Policy</a> and consent to my information being used as above.</label>
                                    </div>
                                </div>
                                <div class="u-margin-hug form__item">
                                    <input type="submit" class="u-margin-hug btn btn--primary" value="Schedule a Demo">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- /.cta__content--form -->
            </div>
        </div>
    </div>
    <!-- /.cta__wrapper -->
</div>
<!-- /.cta__container -->

<h2 id="CTA7" class="h4">CTA7 - Full Width Asset CTA, AKA "Callout shelf simple, image half content" &nbsp;&nbsp; <a href="#component_list">Return to List</a></h2>
<div class="cta__container cta__container--gradient">
    <div class="cta__container-inner">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1 cta__inner">
                    <div class="cta__content cta__content--gradient">
                        <div class="cta__content-inner">
                            <h2 class="u-margin-hug-top cta__title">CTA7 Teal - Image</h2>
                            <p class="cta__lede">See how Vertex and Magento Commerce Cloud parter to provide a seamless tax automation experience for Magento customers.</p>
                            <a href="#" class="btn btn--tertiary" title="BUTTON_NAME">Read More</a>
                        </div>
                        <!-- /.cta__content-inner -->
                    </div>
                    <div class="cta__asset cta__asset--gradient cta__asset--image">
                        <div class="u-text-center cta__asset__asset-holder">
                            <img src="http://picsum.photos/920/560" class="cta__asset__image" alt="Video Thumbnail Name">
                        </div>
                        <!-- /.cta__asset__asset-holder -->
                    </div>
                    <!-- /.cta__asset--image -->
                </div>
                <!-- /.cta__inner -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </div>
    <!-- /.cta__container-inner -->
</div>
<!-- /.cta__container -->

<div class="cta__container cta__container--gradient">
    <div class="cta__container-inner">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1 cta__inner">
                    <div class="cta__content cta__content--gradient">
                        <div class="cta__content-inner">
                            <h2 class="u-margin-hug-top cta__title">Vertex Wins Reader’s Choice Awards from CPA Practice Advisor</h2>
                            <p class="cta__lede">See how Vertex and Magento Commerce Cloud parter to provide a seamless tax automation experience for Magento customers.</p>
                        </div>
                        <!-- /.cta__content-inner -->
                    </div>
                    <div class="cta__asset cta__asset--gradient cta__asset--image">
                        <div class="u-text-center cta__asset__asset-holder">
                            <a href="https://www.youtube.com/embed/bT2Y-VzTslQ?autoplay=1&amp;modestbranding=1&amp;rel=0&amp;showinfo=0&amp;" class="cta__video-link" data-modal="video">
                                <img src="../../images/cta_video-thumbnail.jpg" class="cta__asset__image" alt="Video Thumbnail Name">
                                <span class="btn btn--primary video__btn">
                                    Watch Video
                                    <svg class="u-icon-play-knockout-default-dims u-icon-right btn__icon btn__icon--video" role="presentation" aria-hidden="true">
                                        <use xlink:href="/themes/vertexinc/images/sprite-ui.svg#play-knockout-default"></use>
                                    </svg>
                                </span>
                            </a>
                        </div>
                        <!-- /.cta__asset__asset-holder -->
                    </div>
                    <!-- /.cta__asset--image -->
                </div>
                <!-- /.cta__inner -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </div>
    <!-- /.cta__container-inner -->
</div>
<!-- /.cta__container -->

<div class="cta__container cta__container--bg-light">
    <div class="cta__container-inner">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1 cta__inner">
                    <div class="cta__content">
                        <div class="cta__content-inner">
                            <h2 class="u-margin-hug-top cta__title">CTA7 White Background - Image</h2>
                            <p class="cta__lede">See how Vertex and Magento Commerce Cloud parter to provide a seamless tax automation experience for Magento customers.</p>
                            <a href="#" class="btn btn--primary" title="BUTTON_NAME">Read More</a>
                        </div>
                        <!-- /.cta__content-inner -->
                    </div>
                    <div class="cta__asset cta__asset--image">
                        <div class="u-text-center cta__asset__asset-holder">
                            <img src="http://picsum.photos/920/560" class="cta__asset__image" alt="Image Thumbnail Name">
                        </div>
                        <!-- /.cta__asset__asset-holder -->
                    </div>
                    <!-- /.cta__asset--image -->
                </div>
                <!-- /.cta__inner -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </div>
    <!-- /.cta__container-inner -->
</div>
<!-- /.cta__container -->

<div class="cta__container cta__container--bg-light">
    <div class="cta__container-inner">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1 cta__inner">
                    <div class="cta__content">
                        <div class="cta__content-inner">
                            <h2 class="u-margin-hug-top cta__title">CTA7 - White Background - Video</h2>
                            <p class="cta__lede">See how Vertex and Magento Commerce Cloud parter to provide a seamless tax automation experience for Magento customers.</p>
                        </div>
                        <!-- /.cta__content-inner -->
                    </div>
                    <div class="cta__asset cta__asset--gradient cta__asset--image">
                        <div class="u-text-center cta__asset__asset-holder">
                            <a href="https://www.youtube.com/embed/bT2Y-VzTslQ?autoplay=1&amp;modestbranding=1&amp;rel=0&amp;showinfo=0&amp;" class="cta__video-link" data-modal="video">
                                <img src="../../images/cta_video-thumbnail.jpg" class="cta__asset__image" alt="Video Thumbnail Name">
                                <span class="btn btn--primary video__btn">
                                    Watch Video
                                    <svg class="u-icon-play-knockout-default-dims u-icon-right btn__icon btn__icon--video" role="presentation" aria-hidden="true">
                                        <use xlink:href="/themes/vertexinc/images/sprite-ui.svg#play-knockout-default"></use>
                                    </svg>
                                </span>
                            </a>
                        </div>
                        <!-- /.cta__asset__asset-holder -->
                    </div>
                    <!-- /.cta__asset--image -->
                </div>
                <!-- /.cta__inner -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </div>
    <!-- /.cta__container-inner -->
</div>
<!-- /.cta__container -->

<h2 id="CTA8" class="h4">CTA8 - Content Width Split CTA &nbsp;&nbsp; <a href="#component_list">Return to List</a></h2>
<div class="cta__container cta__container--full-image">
    <div class="cta__wrapper">
        <a href="#" class="cta__link" title="CTA Title" style="background-image: url('http://picsum.photos/1200/800');">
            <div class="cta__content">
                <h2 class="cta__title">CTA Title 25 characters max</h2>
                <div class="u-margin-top u-margin-hug-bottom wysiwyg cta__desc">
                    <p>CTA Description Recommended max characters: 30-50.</p>
                </div>
                <div class="u-margin-top-md">
                    <span class="btn btn--secondary">Find A Career</span>
                </div>
            </div>
        </a>
    </div>
</div>
<!-- /.cta__container -->

<h2 id="CTA9" class="h4">CTA9 - Content Width Centered Ribbon CTA &nbsp;&nbsp; <a href="#component_list">Return to List</a></h2>
<div class="cta__container cta__container--center-ribbon" style="margin-bottom: 40px;"> <!-- Inner Style is FPO -->
    <a href="#" class="cta__link" title="U.S. Taxes for an International Company" style="background-image: url(../../images/TEMP-cta-01-@2x.jpg);">
        <div class="u-text-center cta__content">
            <h2 class="cta__title">U.S. Taxes for an International Company</h2>
            <div class="u-margin-top u-margin-hug-bottom wysiwyg cta__desc">
                <p>See how Vertex Cloud helped Degrenne manage sales and use tax.</p>
            </div>
            <div class="u-margin-top-md">
                <span class="btn btn--secondary">Explore</span>
            </div>
        </div>
    </a>
</div>
<!-- /.cta__container -->

<div class="cta__container">
    <div class="cta__wrapper">
        <div class="inner-container">
            <a href="https://www.youtube.com/embed/bT2Y-VzTslQ?autoplay=1&amp;modestbranding=1&amp;rel=0&amp;showinfo=0&amp;" class="cta__link cta__link--video-modal video__link" title="Ease of Use" style="background-image: url(../../images/TEMP-cta-02-@2x.jpg);" data-modal="video" data-modaal-scope="modaal_1602180340658fde2e3f5334da">
                <div class="u-text-center cta__content cta__content--video-modal">
                    <p class="h2 cta__title">See How It Works</p>
                    <p class="h3 cta__desc cta__desc--video-modal">Vertex Cloud for Magento</p>
                    <span class="btn btn--primary">
                        Watch Demo
                        <svg class="u-icon-play-knockout-default-dims u-icon-right btn__icon btn__icon--video" role="presentation" aria-hidden="true">
                            <use xlink:href="/themes/vertexinc/images/sprite-ui.svg#play-knockout-default"></use>
                        </svg>
                    </span>
                </div>
            </a>
        </div>
    </div>
</div>
<!-- /.cta__container -->

<h2 id="CTA10" class="h4">CTA10 - Rail CTA | Asset &nbsp;&nbsp; <a href="#component_list">Return to List</a></h2>
<div class="cta__container cta__container--rail cta__container--rail--asset">
    <div class="u-text-center cta__content">
        <div class="cta__asset cta__asset--rail">
            <div class="u-text-center cta__asset__asset-holder">
                <img src="https://picsum.photos/340/340" class="cta__asset__image" alt="Image Alt Text">
            </div>
            <!-- /.cta__asset__asset-holder -->
        </div>
        <!-- /.cta__asset--image -->
        <p class="u-text-brand-font-bold cta__title">Lorem Ipsum Dolor Sit Amet Lorem Ipsum</p>
        <p class="cta__desc">Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum.</p>
        <a href="#" class="u-text-brand-font-bold u-color-primary cta__text-link">Example Link Text</a>
    </div>
    
</div>
<!-- /.cta__container -->

<h2 class="h4">CTA10 - Rail CTA | Background Image</h2>
<div class="cta__container cta__container--rail cta__container--rail--bg-image">
    <a href="#" class="cta__link" title="See Our Clients" style="background-image: url(../../images/TEMP-cta-01-@2x.jpg);">
        <div class="u-text-center cta__content">
            <p class="h2 cta__title">Our Clients</p>
            <p class="cta__desc">We create solutions for industry leaders from all over the world.</p>
            <span class="btn btn--secondary">See Our Clients</span>
        </div>
    </a>
</div>
<!-- /.cta__container -->

<h2 class="h4">CTA11 Product CTA </h2>
<section class="container-fluid">
    <div class="row">
        <div class="col-lg-10 col-lg-offset-1">
            <div class="cta__container cta__container--product cta__container--product--green">
                <picture class="product-cta__picture">
                    <img src="../../images/vertex-product-launch.jpeg" width="248" height="350" alt>
                </picture>
                <div class="cta__content">
                    <h2 class="u-margin-hug">Take Tax Compliance to the Edge</h2>
                    <p class="u-margin-hug">Manage tax calculation at the point of sale for frictionless commerce with Vertex O Series Edge.</p>
                    <div class=" product-cta__btn">
                        <a href="#" class="btn btn--secondary">
                            Discover O series Edge
                            <svg class="u-icon-play-knockout-default-dims u-icon-right btn__icon btn__icon--video" role="presentation" aria-hidden="true">
                                <use xlink:href="/themes/vertexinc/images/sprite-ui.svg#arrow-right-rounded-default"></use>
                            </svg>
                        </a>
                    </div>
                </div>
                <div class="product-cta__svg-container">
                    <svg class="product-cta__svg" xmlns="http://www.w3.org/2000/svg" width="174" height="239" fill="none"><path stroke="#F3CF40" stroke-linecap="round" stroke-linejoin="round" stroke-width="25" d="M15.297 158.703 158.703 15.297v97.627l-.308-97.627H60.87"></path><path stroke="#F3CF40" stroke-linecap="round" stroke-linejoin="round" stroke-width="20" d="m61.473 228.527 70.055-70.054v47.691l-.151-47.691H83.735"></path></svg>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="container-fluid">
    <div class="row">
        <div class="col-lg-10 col-lg-offset-1">
            <div class="cta__container cta__container--product cta__container--product--blue">
                <picture class="product-cta__picture">
                    <img src="../../images/vertex-product-launch.jpeg" width="248" height="350" alt>
                </picture>
                <div class="cta__content">
                    <h2 class="u-margin-hug">Take Tax Compliance to the Edge</h2>
                    <p class="u-margin-hug">Manage tax calculation at the point of sale for frictionless commerce with Vertex O Series Edge.</p>
                    <div class=" product-cta__btn">
                        <a href="#" class="btn btn--secondary">
                            Discover O series Edge
                            <svg class="u-icon-play-knockout-default-dims u-icon-right btn__icon btn__icon--video" role="presentation" aria-hidden="true">
                                <use xlink:href="/themes/vertexinc/images/sprite-ui.svg#arrow-right-rounded-default"></use>
                            </svg>
                        </a>
                    </div>
                </div>
                <div class="product-cta__svg-container">
                    <svg class="product-cta__svg" xmlns="http://www.w3.org/2000/svg" width="174" height="239" fill="none"><path stroke="#6FD44E" stroke-linecap="round" stroke-linejoin="round" stroke-width="25" d="M15.297 158.703 158.703 15.297v97.627l-.308-97.627H60.87"></path><path stroke="#6FD44E" stroke-linecap="round" stroke-linejoin="round" stroke-width="20" d="m61.473 228.527 70.055-70.054v47.691l-.151-47.691H83.735"></path></svg>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- /.cta__container -->

Markup
Copy

Style Guide Version 1.0.0

Last Updated:
© 2017 Vertex Inc All Rights Reserved