Call to action

When to use this component

Use the call to action component on a page:

  • To guide users to the next step to reach a certain goal related to the page.
  • To present specific contact information to get help or to get more information from a specific service to reach a certain goal.
  • To promote a certain action for the user to take.

When not to use this component

Do not use the call to action component for other uses than the uses listed above.

When the focus is on contacting a specific entity, location or person using a telephone number or e-mail address, the contact block component can also be used instead.

How it works

The call to action component consists of the following parts:

  • A title representing the call to action (required)
  • A spot illustration (required and fixed, depending on the type of the primary action)
  • A short text explaining the call to action (optional)
  • A primary action (required)
  • A secondary action (optional)

The primary action and the optional secondary action can both be one of the following types:

  • A link to a web page (internal or external)
  • A link to a document
  • A link to an e-mail address (mailto-link)
  • A link to a telephone number (tel-link)

Links to web pages, e-mail addresses and telephone numbers are presented using a link. Links to documents are presented using a file download.

When using a call to action, please note the following:

  • The optional short text explaining the call to action cannot contain links. Links can only be added to a call to action using the primary and secondary action of the call to action. A call to action may never have more than two actions.
  • Use clear and distinct labels for the primary and secondary action of the call to action.
  • Avoid having a primary action and secondary action of the same type. This can be confusing for users.

Behavior of this component

A call to action has a certain behavior:

  • On desktop resolutions and tablet in landscape mode, a call to action should always have a width of 10/12 based on the container. This means the container needs to make sure that call to actions can never be bigger then 10/12 of itself.
  • On tablet in portrait mode and mobile resolutions, a call to action should always be the full width of the container.
  • The text in a call to action:
    • Should always have a max-width of 40 rems.
    • Can never be centered.
    • Can never be justified.
<div class="cta-block box-{{ top ? 'top' : 'left' }} {{ type }}">
  <div class="inner-box">
    <div>
      {% 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>
<div class="cta-block box-left link">
    <div class="inner-box">
        <div>
            <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>

            <a href='https://stad.gent' class="button button-primary" title="This is a title">
                An external link</a>

        </div>
    </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": "An external link",
      "url": "https://stad.gent"
    }
  ]
}
  • 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%;
    
            @include tablet {
              padding: 5rem 2rem 2rem;
    
              &::before {
                top: 0;
                right: 0;
                left: 0;
              }
            }
          }
        }
      }
    }
    
  • URL: /components/raw/cta-block/_cta-block.scss
  • Filesystem Path: components/31-molecules/cta-block/_cta-block.scss
  • Size: 1.1 KB