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:

  • An image (optional)
  • A title representing the call to action (required)
  • 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:
    • Can never be centered.
    • Can never be justified.

Call To Action: Download 

{% if content is not defined %}
  {% set content %}
    {% 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-large button-secondary' : '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 %}
{% endif %}

{% if color is not defined %}
  {% set color = 'secondary' %}
{% endif %}

{% set background_class = '' %}

{% if color == 'primary' %}
  {% set background_class = 'dark-background' %}
{% endif %}

{% if layout is not defined %}
  {% set layout = 'image-none' %}
{% endif %}

<section class="cta-block {{ modifier }} {{ layout }}">
  {% if layout != 'image-none' and src is defined %}
    <div class="cta-block__image">
      <img src="{{ src }}" alt="{{ alt_text }}" />
    </div>
  {% endif %}
  <div class="cta-block__content">
    {% include '@feature-block' with {
      'modifier': color ~ ' ' ~ background_class,
      'title': title,
      'content': content
    } %}
  </div>
</section>
 
<section class="cta-block  image-none">
      <div class="cta-block__content">

          <div class="feature-block secondary ">
              <h2>This is a title</h2>

              <p>
              <p>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='https://stad.gent/download' class="button button-large button-secondary" download title="This is a title">
                          An external 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">
              </p>
          </div>
      </div>
  </section>
 
{
  "layout": "image-none",
  "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.",
  "color": "secondary",
  "links": [
    {
      "text": "An external download link",
      "url": "https://stad.gent/download",
      "document": "document",
      "size": "102kb"
    },
    {
      "text": "An internal link",
      "url": "#"
    }
  ]
}
  • Content: 
    .cta-block {
  display: flex;
  position: relative;
  flex-flow: column;
  max-width: $bp-max-content;
  margin: 60px 0;

  @include phablet {
    flex-flow: row;
  }

  &.image-none {
    max-width: 48.5rem;
    z-index: 1;

    .cta-block__content {
      @include theme-content('color-info-pastel', 'cta-shadow-color') {
        @include abstract-shadow('bottom', 'left', $theme-color, null, 260px, 260px);

        margin-left: 0; // Overwrite only the h-margin.
      }
    }
  }

  &.image-left,
  &.image-right {
    @include phablet {
      margin-bottom: 130px;
    }
  }

  .cta-block__image {
    @include phablet {
      flex-shrink: .3;
    }

    @include desktop {
      min-width: 470px;
      min-height: 470px;
    }
  }

  .cta-block__content {
    position: relative;
    width: 100%;
    z-index: 1;

    @include phablet {
      margin-top: auto;
    }

    li {
      margin-top: 16px;

      a {
        font-size: .8rem;
      }

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

  &.image-left {
    .cta-block__image {
      margin-right: 20px;

      @include phablet {
        margin-right: inherit;
      }
    }

    .cta-block__content {
      top: -20px;
      left: 20px;

      @include phablet {
        top: auto;
        bottom: -90px;
        left: -60px;

        .feature-block {
          width: calc(100% + 60px);
        }
      }
    }
  }

  &.image-right {
    @include phablet {
      flex-direction: row-reverse;
    }

    .cta-block__image {
      margin-left: 20px;

      @include phablet {
        margin-left: inherit;
      }
    }

    .cta-block__content {
      top: -20px;
      margin-right: 20px;

      @include phablet {
        top: auto;
        bottom: -90px;
      }

      .feature-block {
        margin-right: 20px;

        @include phablet {
          width: calc(100% + 60px);
          margin-right: inherit;
        }
      }
    }
  }

  &--multiple {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-right: -20px;
    margin-left: -20px;

    > .cta-block {
      flex: 1 0 400px;
      max-width: calc(100% - 40px);
      margin-right: 20px;
      margin-left: 20px;
    }
  }
}
  • URL: /components/raw/cta-block/_cta-block.scss
  • Filesystem Path: components/31-molecules/cta-block/_cta-block.scss
  • Size: 2.3 KB