Call to action

VIEWPORTS Full Width 1366px 1024px 768px 480px 320px

CTA Style

1 = Green or Primary 1 / 2
2 = White
3 = Transparent with White border
4 = Transparent with Black border
5 = Grey
6 = Text Link

Code

HTML Twig CSS SCSS 
<a class="button button--1" href="/call-to-action">Link Text</a>

 

{%
  set classes = [
    'paragraph',
    'paragraph--type--' ~ paragraph.bundle|clean_class,
    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
  ]
%}
{% block paragraph %}
  {% if content.field_cta.0 is not empty and content.field_cta_style.0 is not empty %}
    <div class="button__wrapper">

      {% for key, item in content.field_cta if key|first != '#'%}
      <a
        class="
          {% if content.field_cta_style.0 is not empty %}button button--{{ content.field_cta_style.0 }}{% endif %}
        {% if content.field_cta[key]['#options'].attributes.overlay == "_yes" %} overlay {% endif %}
        "

        href="{{ content.field_cta[key]['#url'] }}"

        {% if content.field_cta[key]['#options'].attributes.target is not empty %}
        target="{{ content.field_cta[key]['#options'].attributes.target }}"          
        {% endif %}

        {% if content.field_cta[key]['#options'].attributes.rel is not empty %}
        rel="{{ content.field_cta[key]['#options'].attributes.rel }}"
        {% endif %}

        {% if content.field_cta[key]['#options'].attributes.title is not empty %}
        title="{{ content.field_cta[key]['#options'].attributes.title }}"
        {% endif %}
{#
        {% if content.field_cta[key]['#options'].attributes.dataoverlay is not empty %}
        data-overlay="{{ content.field_cta[key]['#options'].attributes.dataoverlay }}"
        {% endif %}
        
        {% if content.field_cta[key]['#options'].attributes.dataformtitle is not empty %}
        data-form-title="{{ content.field_cta[key]['#options'].attributes.dataformtitle }}"
        {% endif %}

        {% if content.field_cta[key]['#options'].attributes.dataformthankyou is not empty %}
        data-form-thankyou="{{ content.field_cta[key]['#options'].attributes.dataformthankyou }}"
        {% endif %}

        {% if content.field_cta[key]['#options'].attributes.datatitle is not empty %}
        data-title="{{ content.field_cta[key]['#options'].attributes.datatitle }}"
        {% endif %}

        data-url="{{ content.field_cta[key]['#options'].attributes.dataurl }}"
  #}    
      >
        {{ content.field_cta[key]['#title'] }}
      </a>
      {% endfor %}

    </div>
  {% endif %}
{% endblock paragraph %}

 

.button, .mktoButton,
.button--primary,
.form-submit:not(.search__submit), #edit-preview {
  height: auto;
  padding: var(--button-padding);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  letter-spacing: var(--button-letter-spacing);
  line-height: var(--button-line-height);
  text-align: center;
  text-transform: var(--button-text-transform);
  border: var(--button-border);
  border-radius: var(--button-border-radius);
  transition: all 360ms ease;
  cursor: pointer;
  display: inline-block;
}

.button:hover, .mktoButton:hover,
.button--primary:hover,
.form-submit:hover:not(.search__submit), #edit-preview:hover, .button:focus, .mktoButton:focus,
.button--primary:focus,
.form-submit:focus:not(.search__submit), #edit-preview:focus {
  text-decoration: none;
}

.button--fill {
  width: 100%;
}

.button--fixed {
  width: var(--button-width-fixed);
}

.button--1, .mktoButton,
.button--primary,
.form-submit:not(.search__submit) {
  background: var(--button-background);
  border: 0.2rem solid var(--button-border);
  color: var(--button-color);
}

.button--1:hover, .mktoButton:hover,
.button--primary:hover,
.form-submit:hover:not(.search__submit), .button--1:focus, .mktoButton:focus,
.button--primary:focus,
.form-submit:focus:not(.search__submit) {
  background: var(--button-hover-background);
  border-color: var(--button-hover-border);
  color: var(--button-hover-color);
}

.button--2 {
  background: var(--button-background);
  border: 0.2rem solid var(--button-border);
  color: var(--button-color);
}

.button--2:hover, .button--2:focus {
  background: var(--button-hover-background);
  border-color: var(--button-hover-border);
  color: var(--button-hover-color);
}

.button--3 {
  background: var(--button-background);
  border: 0.2rem solid var(--button-border);
  color: var(--button-color);
}

.button--3:hover, .button--3:focus {
  background: var(--button-hover-background);
  border-color: var(--button-hover-border);
  color: var(--button-hover-color);
}

.button--4, #edit-preview {
  background: var(--button-background);
  border: 0.2rem solid var(--button-border);
  color: var(--button-color);
}

.button--4:hover, #edit-preview:hover, .button--4:focus, #edit-preview:focus {
  background: var(--button-hover-background);
  border-color: var(--button-hover-border);
  color: var(--button-hover-color);
}

.button--5 {
  background: var(--button-background);
  border: 0.2rem solid var(--button-border);
  color: var(--button-color);
}

.button--5:hover, .button--5:focus {
  background: var(--button-hover-background);
  border-color: var(--button-hover-border);
  color: var(--button-hover-color);
}

.button--6 {
  background: var(--button-background);
  border: 0.2rem solid var(--button-border);
  color: var(--button-color);
}

.button--6:hover, .button--6:focus {
  background: var(--button-hover-background);
  border-color: var(--button-hover-border);
  color: var(--button-hover-color);
}

.button--6 {
  padding: 0;
}

.button--svg {
  height: 4.7rem;
  padding: 0;
  background: none;
}

.button--svg rect {
  width: 100%;
  height: 100%;
  fill: var(--button-svg-background);
  transition: all 360ms ease;
}

.button--svg rect:hover, .button--svg rect:focus {
  fill: var(--button-svg-background-hover);
}

.button--action {
  position: relative;
  padding: var(--button-action-padding);
  font-size: var(--button-action-font-size);
  text-align: center;
  border-radius: var(--button-action-border-radius);
  color: var(--inverted-text-color);
  cursor: pointer;
}

.button--action-1 {
  background: var(--button-background);
  border: 0.2rem solid var(--button-border);
  color: var(--button-color);
}

.button--action-1:hover, .button--action-1:focus {
  background: var(--button-hover-background);
  border-color: var(--button-hover-border);
  color: var(--button-hover-color);
}

.button--action-2 {
  background: var(--button-background);
  border: 0.2rem solid var(--button-border);
  color: var(--button-color);
}

.button--action-2:hover, .button--action-2:focus {
  background: var(--button-hover-background);
  border-color: var(--button-hover-border);
  color: var(--button-hover-color);
}

.button--action-3 {
  background: var(--button-background);
  border: 0.2rem solid var(--button-border);
  color: var(--button-color);
}

.button--action-3:hover, .button--action-3:focus {
  background: var(--button-hover-background);
  border-color: var(--button-hover-border);
  color: var(--button-hover-color);
}

.button--login {
  padding: var(--button-login-padding);
  background: var(--button-login-background);
  font-size: var(--font-size-2);
  line-height: 0.6;
  text-align: center;
  color: var(--button-login-color);
  border-radius: var(--button-login-border-radius);
  cursor: pointer;
  /* iPhone 6 onwards */
}

@media only screen and (max-width: 480px) {
  .button--login {
    padding: 0.5rem 0.9rem;
    line-height: 1.1;
  }
}

.button--login.active {
  background: var(--border-color);
  color: var(--button-login-color);
}

.button--login:hover, .button--login:focus {
  background: var(--button-login-background-hover);
  color: var(--button-login-color-hover);
}

.button__wrapper {
  width: 100%;
  margin-top: calc(var(--spacing-1) * -1);
}

.button__wrapper .button, .button__wrapper .mktoButton,
.button__wrapper .button--primary,
.button__wrapper .form-submit:not(.search__submit), .button__wrapper #edit-preview {
  margin-top: var(--spacing-1);
  display: inline-block;
}

.button__wrapper .button:hover, .button__wrapper .mktoButton:hover,
.button__wrapper .button--primary:hover,
.button__wrapper .form-submit:hover:not(.search__submit), .button__wrapper #edit-preview:hover, .button__wrapper .button:focus, .button__wrapper .mktoButton:focus,
.button__wrapper .button--primary:focus,
.button__wrapper .form-submit:focus:not(.search__submit), .button__wrapper #edit-preview:focus {
  text-decoration: none;
}

.button__wrapper .button + .button, .button__wrapper .mktoButton + .button, .button__wrapper .button--primary + .button, .button__wrapper .form-submit:not(.search__submit) + .button, .button__wrapper #edit-preview + .button, .button__wrapper .button + .mktoButton, .button__wrapper .mktoButton + .mktoButton, .button__wrapper .button--primary + .mktoButton, .button__wrapper .form-submit:not(.search__submit) + .mktoButton, .button__wrapper #edit-preview + .mktoButton,
.button__wrapper .button + .button--primary,
.button__wrapper .mktoButton + .button--primary,
.button__wrapper .button--primary + .button--primary,
.button__wrapper .form-submit:not(.search__submit) + .button--primary,
.button__wrapper #edit-preview + .button--primary,
.button__wrapper .button + .form-submit:not(.search__submit),
.button__wrapper .mktoButton + .form-submit:not(.search__submit),
.button__wrapper .button--primary + .form-submit:not(.search__submit),
.button__wrapper .form-submit:not(.search__submit) + .form-submit:not(.search__submit),
.button__wrapper #edit-preview + .form-submit:not(.search__submit), .button__wrapper .button + #edit-preview, .button__wrapper .mktoButton + #edit-preview, .button__wrapper .button--primary + #edit-preview, .button__wrapper .form-submit:not(.search__submit) + #edit-preview, .button__wrapper #edit-preview + #edit-preview {
  margin: .6rem 1.8rem 0 0;
}

.button__wrapper a.button:first-of-type:not(:only-of-type), .button__wrapper a.mktoButton:first-of-type:not(:only-of-type),
.button__wrapper a.button--primary:first-of-type:not(:only-of-type),
.button__wrapper a.form-submit:first-of-type:not(:only-of-type):not(.search__submit), .button__wrapper a#edit-preview:first-of-type:not(:only-of-type) {
  margin: .6rem 1.8rem 0 0;
}

.button__wrapper .button--action {
  margin: 0;
}

.button__wrapper--1 {
  text-align: left;
}

.button__wrapper--2 {
  text-align: center;
}

.button__wrapper--3 {
  text-align: right;
}

[style*="background-color: var(--mostly-white);"] .button--4, [style*="background-color: var(--mostly-white);"] #edit-preview,
[style*="background-color: var(--mostly-white);"] #edit-preview {
  border: 0.2rem solid var(--black);
  color: var(--black);
}

[style*="background-color: var(--mostly-white);"] .button--4:hover, [style*="background-color: var(--mostly-white);"] #edit-preview:hover, [style*="background-color: var(--mostly-white);"] .button--4:active, [style*="background-color: var(--mostly-white);"] #edit-preview:active, [style*="background-color: var(--mostly-white);"] .button--4:focus, [style*="background-color: var(--mostly-white);"] #edit-preview:focus,
[style*="background-color: var(--mostly-white);"] #edit-preview:hover,
[style*="background-color: var(--mostly-white);"] #edit-preview:active,
[style*="background-color: var(--mostly-white);"] #edit-preview:focus {
  color: var(--inverted-text-color);
}

[style*="background-color: var(--mostly-white);"] {
  color: var(--black);
}

#edit-preview {
  margin-left: 1.2rem;
}

/* iPhone 5 */
@media only screen and (max-width: 320px) {
  .button:not(.button--login):not(.button--svg):not(.button--action):not(.button--6), .mktoButton:not(.button--login):not(.button--svg):not(.button--action):not(.button--6),
  .button--primary:not(.button--login):not(.button--svg):not(.button--action):not(.button--6),
  .form-submit:not(.button--login):not(.button--svg):not(.button--action):not(.button--6):not(.search__submit), #edit-preview:not(.button--login):not(.button--svg):not(.button--action):not(.button--6) {
    padding: 0.9rem 1.7rem;
    font-size: var(--font-size-2);
  }
}

/* Print */
@media print {
  .button, .mktoButton,
  .button--primary,
  .form-submit:not(.search__submit), #edit-preview,
  .mktoButton,
  .button--primary,
  .form-submit:not(.search__submit),
  #edit-preview, .button__wrapper .button, .button__wrapper .mktoButton,
  .button__wrapper .button--primary,
  .button__wrapper .form-submit:not(.search__submit), .button__wrapper #edit-preview,
  .button__wrapper .mktoButton,
  .button__wrapper .button--primary,
  .button__wrapper .form-submit:not(.search__submit),
  .button__wrapper #edit-preview {
    display: none;
  }
}

 

.button {
  height: auto;
  padding: var(--button-padding);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  letter-spacing: var(--button-letter-spacing);
  line-height: var(--button-line-height);
  text-align: center;
  text-transform: var(--button-text-transform);
  border:  var(--button-border);
  border-radius: var(--button-border-radius);
  transition: all 360ms ease;
  cursor: pointer;
  display: inline-block;

  &:hover,
  &:focus {
    text-decoration: none;
  }

  &--fill {
    width: 100%;
  }
  &--fixed {
    width: var(--button-width-fixed);
  }
  $buttons: (1,2,3,4,5,6);
  @each $button in $buttons {
    &--#{$button} {
      background: var(--button-background);
      border: 0.2rem solid var(--button-border);
      color: var(--button-color);

      &:hover,
      &:focus {
        background: var(--button-hover-background);
        border-color: var(--button-hover-border);
        color: var(--button-hover-color);
      }
    }
  }

  &--6 {
    padding: 0;
  }

  &--svg {
    height: 4.7rem;
    padding: 0;
    background: none;

    rect {
      width: 100%;
      height: 100%;
      fill: var(--button-svg-background);
      transition: all 360ms ease;
      
      &:hover,
      &:focus {
        fill: var(--button-svg-background-hover);
      }
    }
  }

  &--action {
    position: relative;
    padding: var(--button-action-padding);
    font-size: var(--button-action-font-size);
    text-align: center;
    border-radius: var(--button-action-border-radius);
    color: var(--inverted-text-color);
    cursor: pointer;

    $buttons: (1,2,3);
    @each $button in $buttons {
      &-#{$button} {
        background: var(--button-background);
        border: 0.2rem solid var(--button-border);
        color: var(--button-color);

        &:hover,
        &:focus {
          background: var(--button-hover-background);
          border-color: var(--button-hover-border);
          color: var(--button-hover-color);
        }
      }
    }
  }

  &--login {
    padding: var(--button-login-padding);
    background: var(--button-login-background);
    font-size: var(--font-size-2);
    line-height: 0.6;
    text-align: center;
    color: var(--button-login-color);
    border-radius: var(--button-login-border-radius);
    cursor: pointer;

    @include mq-4 {
      padding: 0.5rem 0.9rem;
      line-height: 1.1;
    }
    
    &.active {
      background: var(--border-color);
      color: var(--button-login-color);
    }
    &:hover,
    &:focus {
      background: var(--button-login-background-hover);
      color: var(--button-login-color-hover);
    }
  }

  &__wrapper {
    width: 100%;
    margin-top: calc(var(--spacing-1) * -1);

    .button {
      margin-top: var(--spacing-1);
      display: inline-block;

      &:hover,
      &:focus {
        text-decoration: none;
      }
      
      + .button {
        margin: .6rem 1.8rem 0 0;
      }
      }
      a.button:first-of-type:not(:only-of-type) {
      margin: .6rem 1.8rem 0 0
      }
    .button--action {
      margin: 0;
    }

    &--1 {
      text-align: left;
    }
    &--2 {
      text-align: center;
    }
    &--3 {
      text-align: right;
    }
  }
}


[style*="background-color: var(--mostly-white);"] .button--4,
[style*="background-color: var(--mostly-white);"] #edit-preview {
  border: .2rem solid var(--black);
  color: var(--black);

  &:hover, &:active, &:focus {
    color: var(--inverted-text-color);
  }
}

[style*="background-color: var(--mostly-white);"]{
  color: var(--black);
}

.mktoButton,
.button--primary,
.form-submit:not(.search__submit) {
  @extend .button;
  @extend .button--1;
}
#edit-preview {
  margin-left: 1.2rem;
  @extend .button;
  @extend .button--4;
}

@include mq-5 {
  .button:not(.button--login):not(.button--svg):not(.button--action):not(.button--6) {
    padding: 0.9rem 1.7rem;
    font-size: var(--font-size-2);
  }
}
@include print {
  .button,
  .mktoButton,
  .button--primary,
  .form-submit:not(.search__submit),
  #edit-preview,
  .button__wrapper .button,
  .button__wrapper .mktoButton,
  .button__wrapper .button--primary,
  .button__wrapper .form-submit:not(.search__submit),
  .button__wrapper #edit-preview  {
    display: none;
  }
}

 

Design Files

Figma

Fields

Label Machine name Field type Values Character Limit Required
CTA field_cta Link   N/A Yes
CTA Style field_cta_style List (integer) 0|1
1|2
2|3
3|4
4|5
5|6		 N/A Yes

Use Case

A call to action can be used to open a new page, site or open a popup to show a form or message.

The call to action component can have the follow set:

  • target
  • rel
  • class
  • data overlay
  • data form title
  • data form thank you
  • data title
  • data url

Component Options

Component Options

CTA Style

1 = Green or Primary 1 / 2
2 = White
3 = Transparent with White border
4 = Transparent with Black border
5 = Grey
6 = Text Link

Component
Call to Action
Copyright © 2024 GAMEWORK | Nicholas Game
How To
Upgrading to Drupal 10
Velocity for Marketo
jQuery: The Basics
Homebrew
Gulp
Making the Grade
Formatting SVG Logos for the Website
Marketo Landing Page Builder
Work with our submodules
Drush Launcher
Upgrade PHP and change PATH
Qualtrics
Bitbucket SSH Key
Git
VS code extensions
Guide
Profile Banner
Fitch Ratings - Analyst Listing Page
CSS Custom Properties (Variables)
Carousel - Waterwheel
Mix it Up
Brand Navigation
Top Bar
Fitch Ratings - Podcast
Fitch Ratings - Analyst Profile
Event
Long Read
Article
Code test
Search Demo
Profile - Sustainable Fitch
Search Icon
Login
Language Filter
Theme Switch
Flip Card
Overlay
Infographic CDS
Interactive Map
Iframe
Footer
Main
Header
Accordion
Wrappers
Podcasts
DOM Layout
Figure
Search Tools
Search Bar
Search Overlay
Ratings Process
Ratings Definitions
Language Switch
Video Teaser
Video Player
Video Banner
Profile Teaser
Event Teaser
Back to Top
Pager
Navigation - Dropdown
Navigation - Overlay
Profile - Leadership FR
Profile - Leadership FG V2
Leadership Overview - FG
Forms
Leveraged Finance
Tags
Profile - Leadership FG V1
Profile - Analyst
Banner V2
Promo Hightlight
Tables
History - Fitch Group
Insights
Event Teaser
Event Listing
Overview
Logos
Title
Video
Text
Tab Wrapper
Tab
Sub Title
Section More
Showcase
Section
Quote
Promo Box
Post
Page Teaser
Page Promo
Page Layout - Left or Right Column with Main Column
Number
Node Reference
Map
Key Point
Key Highlight
Image
Icon Teaser
Highlight
Grid Column Wrapper
Grid Column
From library
Figure
Column Wrapper
Column
Carousel Slide
Carousel
Card
Call to action
Box
Block Reference
Banner
Email Guide
View Online
Email Components
Fitch Group
Fitch Ratings
Fitch Solutions