City of Ghent Style Guide

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 let users contact a specific entity, location or person using a telephone number or e-mail address.
  • 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.

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.

Call To Action: Download 

{% set content %}
  {% if title %}
    {% include '@heading' with {
      'type': 'h2',
      'heading_text': title
    } %}
  {% endif %}

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

  <{{ links|length > 1 ? 'ul' : 'div'}} class="links">
  {% 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 %}
  <{{ links|length > 1 ? '/ul' : '/div'}} class="links">
{% endset %}

{% include "@highlight" with {
  content: content,
  modifier: top ? 'top' : 'left',
  classes: [
    'cta-block',
    type
  ]
} %}
 
<section class="highlight cta-block download highlight--left">
    <div class="highlight__inner">
        <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" download title="This is a title">
                    A download link </a>

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

            <li>
                <a href='#' class="standalone-link" title="This is a title">
                    An internal link </a>

            </li>
        </ul class="links">

    </div>
</section>
 
{
  "type": "download",
  "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": "A download link",
      "url": "#",
      "document": "document",
      "size": "102kb"
    },
    {
      "text": "An internal link",
      "url": "#"
    }
  ]
}
  • Content: 
    .cta-block {

  .highlight__inner {

    li {
      margin-top: .8rem;

      &:first-of-type a {
        @extend %button-primary;
        @include button;
        @include button-icon;
      }

      &:not(:last-of-type) {
        @include theme('border-color', 'color-primary--lighten-4', 'more-info-block-border-color');

        padding-bottom: .8rem;
        border-bottom: 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;

      .highlight__inner {
        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: 919 Bytes