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:

<div class="cta-block box-{{ top ? 'top' : 'left' }} {{ type }}">
  <div class="inner-box">
    {% if title %}
      {% include '@heading' with {
      'type': 'h2',
      'heading_text': title
      } %}
    {% endif %}

    {% if description %}
      {% include '@paragraph' with {
      'text': description
      } %}
    {% endif %}

    {% if links|length > 1 %}
    <ul class="links">
    {% endif %}
      {% for link in links %}
        {% set options = {
          link: link.url,
          text: link.text,
          modifier: loop.first ? 'button button-primary' : 'standalone-link'
        } %}

        {% if link.size|length %}
          {% set options = options|merge({
            file: {
              size: link.size,
              type: 'pdf'
            }
          }) %}
        {% endif %}

        {% if links|length > 1 %}
        <li>
        {% endif %}
          {% include '@file-download' with options %}
        {% if links|length > 1 %}
        </li>
        {% endif %}
      {% endfor %}

      {% if links|length > 1 %}
      </ul>
      {% endif %}
  </div>
</div>
<div class="cta-block box-left link">
    <div class="inner-box">
        <h2>This is a title</h2>

        <p class="">Nulla nec eros lorem. Morbi at augue eu purus congue auctor. Sed id volutpat odio. Nunc congue diam vel diam venenatis.</p>

        <ul class="links">

            <li>
                <a href='#' class="button button-primary" title="This is a title">
                    In the summertime</a>

            </li>

            <li>
                <a href='#' class="standalone-link" download title="This is a title">
                    When the weather is hot</a>

                <span class="file-type">
                    pdf
                    <span class="file-size">
                        (102kb)
                    </span>
                </span>
            </li>

        </ul>
    </div>
</div>
{
  "type": "link",
  "title": "This is a title",
  "description": "Nulla nec eros lorem. Morbi at augue eu purus congue auctor. Sed id volutpat odio. Nunc congue diam vel diam venenatis.",
  "links": [
    {
      "text": "In the summertime",
      "url": "#"
    },
    {
      "text": "When the weather is hot",
      "url": "#",
      "document": "document",
      "size": "102kb"
    }
  ]
}
  • Content:
    .cta-block {
    
      &.link .inner-box::before {
        @include spot-image('link-light', 7rem);
      }
    
      &.download .inner-box::before {
        @include spot-image('download-light', 7rem);
      }
    
      .inner-box {
    
        min-height: 11rem;
    
        li {
          width: 100%;
          margin-top: .8rem;
    
          &:first-of-type a {
            @extend %button-primary;
            @include button;
            @include button-icon;
          }
    
          &:last-of-type {
            @include theme('border-color', 'color-primary--lighten-4', 'more-info-block-border-color');
    
            padding-top: .8rem;
            border-top: 2px solid;
          }
        }
      }
    
      &--multiple {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-right: -1rem;
        margin-left: -1rem;
    
        > .cta-block {
          flex: 1 0 20rem;
          max-width: calc(100% - 2rem);
          margin-right: 1rem;
          margin-left: 1rem;
    
          .inner-box {
            height: 100%;
          }
        }
      }
    }
    
  • URL: /components/raw/cta-block/_cta-block.scss
  • Filesystem Path: components/31-molecules/cta-block/_cta-block.scss
  • Size: 934 Bytes