<a href="javascript:(void);" class="cta-link">
  <span class="icon icon-clip"></span>
  <h3 class="title">Do you want more info?</h3>
  <span class="document">Download</span>
</a>
<a href="{{ url }}" class="cta-link">
  <span class="icon icon-{{ modifier }}"></span>
  <h3 class="title">{{ title }}</h3>
  <span class="document">{{ link_text }}</span>
</a>
{
  "title": "Do you want more info?",
  "link_text": "Download",
  "url": "javascript:(void);",
  "modifier": "clip"
}
  • Content:
    a.cta-link {
      @include themify {
        @include element-states($cta-link-background, $cta-link-background-hover, $property: "background");
        @include element-states($cta-link-border, $cta-link-border-hover, $property: "border");
    
        .title {
          color: $cta-link-title-color;
        }
    
        .document {
          color: $cta-link-document-color;
        }
    
        .icon {
          border: $cta-link-icon-border;
          background: $button-background;
          color: $button-color;
        }
    
        &:focus,
        &:hover {
          .title {
            color: $cta-link-title-color-hover;
          }
    
          .document {
            color: $cta-link-document-color-hover;
          }
    
          .icon {
            border: $button-border-hover;
            background: $button-background-hover;
            color: $button-color-hover;
          }
        }
      }
    
      display: inline-block;
      position: relative;
      width: calc(87% + 1px);
      padding: .625rem 1.25rem;
      transition: .11s ease-in-out;
      transition-property: background, color, border;
      border-radius: $radius-2;
      text-decoration: none;
    
      h3 {
        margin-top: 0;
      }
    
      .icon {
        position: absolute;
        top: 0;
        right: calc(-15% - 1px);
        bottom: 0;
        width: 15%;
        min-height: 4rem;
        margin: auto;
        padding-top: 1.4rem;
        padding-bottom: 1.4rem;
        border-radius: $radius-2;
        font-size: 1.3rem;
        text-align: center;
      }
    
      .title {
        margin-bottom: 0;
      }
    }
    
  • URL: /components/raw/cta-link/_cta-link.scss
  • Filesystem Path: components/31-molecules/building-blocks/cta-link/_cta-link.scss
  • Size: 1.4 KB

CTA links

A CTA link has a certain behavior.

  • It should always have a width based on the page container of 7/12. This means the container needs to make sure CTA links can never be bigger then 7/12 of itself.
  • It always has a max-width 40 rems on desktop.
  • For a mobile layout a CTA link is always full width.

Examples of paragraphs are defined in paragraph variants: