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>Dit is een titel. Liquorice chocolate ice cream cheesecake jelly beans marzipan chocolate.</h2>

        <a href='#' class="button button-primary" title="Dit is een titel. Liquorice chocolate ice cream cheesecake jelly beans marzipan chocolate.">
            When the weather is hot</a>

    </div>
</div>
{
  "type": "link",
  "title": "Dit is een titel. Liquorice chocolate ice cream cheesecake jelly beans marzipan chocolate.",
  "description": null,
  "links": [
    {
      "text": "When the weather is hot",
      "url": "#"
    }
  ]
}
  • 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