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 

<!-- Default -->
{% 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
  ]
} %}

<!-- Default With Optional Information -->
{% 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
  ]
} %}

<!-- With Secondary Action -->
{% 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
  ]
} %}

<!-- Phone -->
{% 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
  ]
} %}

<!-- E Mail -->
{% 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
  ]
} %}

<!-- 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
  ]
} %}

<!-- Double -->
<div class="cta-block--multiple">
  {% include '@cta-block' with items[0]|merge({'top' : true}) %}
  {% include '@cta-block' with items[1]|merge({'top' : true}) %}
</div>
 
<!-- Default -->
<section class="highlight cta-block link highlight--left">
    <div class="highlight__inner">
        <h2>This is a title</h2>

        <div class="links">

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

        </div class="links">

    </div>
</section>


<!-- Default With Optional Information -->
<section class="highlight cta-block link 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>

        <div class="links">

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

        </div class="links">

    </div>
</section>


<!-- With Secondary Action -->
<section class="highlight cta-block link 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" title="This is a title">
                    Internal link </a>

            </li>

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

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

    </div>
</section>


<!-- Phone -->
<section class="highlight cta-block phone highlight--left">
    <div class="highlight__inner">
        <h2>Contact us</h2>

        <p class="">Nulla nec eros lorem. Morbi at augue eu purus congue auctor. Sed id volutpat odio. Nunc congue diam vel diam venenatis, ut consequat urna dapibus. Vivamus at lobortis odio. Sed felis mauris, mattis eget purus at, pharetra ullamcorper risus.</p>

        <ul class="links">

            <li>
                <a href='tel:#' class="button button-primary" title="Contact us">
                    09 123 123 </a>

            </li>

            <li>
                <a href='#' class="standalone-link" title="Contact us">
                    Check all contact details </a>

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

    </div>
</section>


<!-- E Mail -->
<section class="highlight cta-block mail highlight--left">
    <div class="highlight__inner">
        <h2>Contact us</h2>

        <p class="">Nulla nec eros lorem. Morbi at augue eu purus congue auctor. Sed id volutpat odio. Nunc congue diam vel diam venenatis, ut consequat urna dapibus. Vivamus at lobortis odio. Sed felis mauris, mattis eget purus at, pharetra ullamcorper risus.</p>

        <ul class="links">

            <li>
                <a href='mailto:#' class="button button-primary" title="Contact us">
                    info@stad.gent </a>

            </li>

            <li>
                <a href='#' class="standalone-link" title="Contact us">
                    Check all contact details </a>

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

    </div>
</section>


<!-- Download -->
<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>


<!-- Double -->
<div class="cta-block--multiple">

    <section class="highlight cta-block download highlight--top">
        <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" download title="This is a title">
                        Another download link </a>

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

        </div>
    </section>

    <section class="highlight cta-block link highlight--top">
        <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" title="This is a title">
                        An internal link </a>

                </li>

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

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

        </div>
    </section>
</div>


/* Default */
{
  "type": "link",
  "title": "This is a title",
  "description": false,
  "links": [
    {
      "text": "An internal link",
      "url": "#"
    }
  ]
}


/* Default With Optional Information */
{
  "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"
    }
  ]
}


/* With Secondary Action */
{
  "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": "Internal link",
      "url": "#"
    },
    {
      "text": "Internal link",
      "url": "#"
    }
  ]
}


/* Phone */
{
  "type": "phone",
  "title": "Contact us",
  "description": "Nulla nec eros lorem. Morbi at augue eu purus congue auctor. Sed id volutpat odio. Nunc congue diam vel diam venenatis, ut consequat urna dapibus. Vivamus at lobortis odio. Sed felis mauris, mattis eget purus at, pharetra ullamcorper risus.",
  "links": [
    {
      "text": "09 123 123",
      "url": "tel:#"
    },
    {
      "text": "Check all contact details",
      "url": "#"
    }
  ]
}


/* E Mail */
{
  "type": "mail",
  "title": "Contact us",
  "description": "Nulla nec eros lorem. Morbi at augue eu purus congue auctor. Sed id volutpat odio. Nunc congue diam vel diam venenatis, ut consequat urna dapibus. Vivamus at lobortis odio. Sed felis mauris, mattis eget purus at, pharetra ullamcorper risus.",
  "links": [
    {
      "text": "info@stad.gent",
      "url": "mailto:#"
    },
    {
      "text": "Check all contact details",
      "url": "#"
    }
  ]
}


/* Download */
{
  "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": "#"
    }
  ]
}


/* Double */
{
  "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.",
  "double": true,
  "items": [
    {
      "type": "download",
      "links": [
        {
          "text": "A download link",
          "url": "#",
          "document": "document",
          "size": "102kb"
        },
        {
          "text": "Another download link",
          "url": "#",
          "document": "document",
          "size": "102kb"
        }
      ]
    },
    {
      "links": [
        {
          "text": "An internal link",
          "url": "#"
        },
        {
          "text": "A download link",
          "url": "#",
          "document": "document",
          "size": "102kb"
        }
      ]
    }
  ]
}
  • 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