CTAs/Buttons

Usage guidelines

Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto itaque quos similique officia dicta totam rem, iure facere, asperiores, possimus ipsum! Qui tempore maxime quisquam, incidunt ab voluptas expedita officiis voluptates laboriosam debitis iste minima cupiditate explicabo nihil temporibus, sequi quae deleniti veniam minus dolore placeat dolores quidem.

General Guidelines

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui?
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Lorem ipsum, dolor sit amet.
Lorem ipsum, dolor sit amet. Lorem, ipsum dolor.

Use Cases

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui?
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Lorem ipsum, dolor sit amet.
Lorem ipsum, dolor sit amet. Lorem, ipsum dolor.

Light Theme

Primary CTA Secondary CTA Tertiary CTA Skip to Section


              
                <a href="https://molestreet.com"
                  class="cta-primary">Primary CTA</a>
                <a href="https://molestreet.com"
                  class="cta-secondary">Secondary CTA</a>
                <a href="https://molestreet.com"
                  class="cta-tertiary">Tertiary CTA</a>
                <a href="#section-1" class="cta-tertiary arrow-down">Skip
                  to Section</a>
              

              
                
                Copied to clipboard

Dark Theme

Primary CTA Secondary CTA Tertiary CTA Skip to Section


              
                <a href="https://molestreet.com" class="cta-primary
                  light">Primary CTA</a>
                <a href="https://molestreet.com" class="cta-secondary
                  light">Secondary CTA</a>
                <a href="https://molestreet.com" class="cta-tertiary
                  light">Tertiary CTA</a>
                <a href="#section-1#" class="cta-tertiary light
                  arrow-down">Skip to Section</a>
                            

              
                
                Copied to clipboard

Name

cta_type

Choice Field

hubspot-cta
link

Default

link

Description

Whether or not the CTA will be a custom CTA or a HubSpot CTA

Name

button_label

Text Field

Default

Sample CTA

Description

CTA text content

Name

button_style

Choice Field

primary
secondary
tertiary

Default

Primary

Description

Decides variant of button

Typography

[H1] Header Text

[H2] Header Text

[H3] Header Text

[H4] Header Text

[H5] Header Text

[H6] Header Text

Body Copy

Spacing

Spacing 1

Spacing 2

Spacing 3

Spacing 4

Spacing 5

Spacing 6

Spacing 7

Spacing 8

Spacing 9

Spacing 10

Spacing 11

Spacing 12

Spacing 13

Colors

Primary

Secondary

Tertiary