Skip to main content

User testing

Help us improve this service. Take part in a short online exercise

Call to action

Important information:
This component requires documentation.

Default

<div class="ons-call-to-action">
  <div class="ons-container">
    <div class="ons-grid ons-grid--flex ons-grid--vertical-center ons-grid--no-wrap@s">
      <div class="ons-grid__col ons-col-auto ons-u-flex-shrink@s">
        <h2 class="ons-call-to-action__heading ons-u-fs-r--b ons-u-di">Call to action heading.</h2>
        <p class="ons-call-to-action__text ons-u-di">Descriptive text about call to action</p>
      </div>
      <div class="ons-grid__col ons-col-auto ons-u-flex-no-grow ons-u-mt-xs@xxs@s">
        <a href="#0" role="button" class="ons-btn ons-btn--small ons-btn--link ons-js-submit-btn">
          <span class="ons-btn__inner">Start
            <svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 17 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
              <path d="m10 .2-.9.9c-.1.1-.1.4 0 .5l4 4H.6c-.2 0-.4.2-.4.4v1.2c0 .2.2.4.4.4h12.5l-3.9 3.7c-.2.2-.2.4 0 .6l.8.9c.2.2.4.2.6 0L16.8 7c.2-.2.2-.4 0-.6L10.7.3c-.3-.2-.5-.2-.7-.1z" />
            </svg>
          </span>
        </a>
      </div>
    </div>
  </div>
</div>
{% from "components/call-to-action/_macro.njk" import onsCallToAction %}
{{-
    onsCallToAction({
        "headingText": 'Call to action heading.',
        "paragraphText": 'Descriptive text about call to action',
        "button": {
            "text": 'Start',
            "variants": 'small',
            "url": '#0'
        }
    })
}}
{% macro onsCallToAction(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    <div class="ons-call-to-action">
        <div class="ons-container">
            <div class="ons-grid ons-grid--flex ons-grid--vertical-center ons-grid--no-wrap@s">
                <div class="ons-grid__col ons-col-auto ons-u-flex-shrink@s">
                    <h2 class="ons-call-to-action__heading ons-u-fs-r--b ons-u-di">{{ params.headingText }}</h2>
                    <p class="ons-call-to-action__text ons-u-di">{{ params.paragraphText }}</p>
                </div>
                <div class="ons-grid__col ons-col-auto ons-u-flex-no-grow ons-u-mt-xs@xxs@s">
                    {{ onsButton({
                        "text": params.button.text,
                        "url": params.button.url,
                        "variants": "small"
                    })}}
                </div>
            </div>
        </div>
    </div>
{% endmacro %}
.ons-call-to-action {
  background: $color-cta-bg;
  padding: 0.85rem 0;

  &__heading {
    padding-right: 0.2rem;
  }
}

Census 2021

A persistent call to action to start census.

<div class="ons-call-to-action">
  <div class="ons-container">
    <div class="ons-grid ons-grid--flex ons-grid--vertical-center ons-grid--no-wrap@s">
      <div class="ons-grid__col ons-col-auto ons-u-flex-shrink@s">
        <h2 class="ons-call-to-action__heading ons-u-fs-r--b ons-u-di">Ready to start your census?</h2>
        <p class="ons-call-to-action__text ons-u-di">You’ll need the access code from the letter we sent you.</p>
      </div>
      <div class="ons-grid__col ons-col-auto ons-u-flex-no-grow ons-u-mt-xs@xxs@s">
        <a href="#0" role="button" class="ons-btn ons-btn--small ons-btn--link ons-js-submit-btn">
          <span class="ons-btn__inner">Start census
            <svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 17 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
              <path d="m10 .2-.9.9c-.1.1-.1.4 0 .5l4 4H.6c-.2 0-.4.2-.4.4v1.2c0 .2.2.4.4.4h12.5l-3.9 3.7c-.2.2-.2.4 0 .6l.8.9c.2.2.4.2.6 0L16.8 7c.2-.2.2-.4 0-.6L10.7.3c-.3-.2-.5-.2-.7-.1z" />
            </svg>
          </span>
        </a>
      </div>
    </div>
  </div>
</div>
{% from "components/call-to-action/_macro.njk" import onsCallToAction %}
{{-
    onsCallToAction({
        "headingText": 'Ready to start your census?',
        "paragraphText": 'You’ll need the access code from the letter we sent you.',
        "button": {
            "text": 'Start census',
            "variants": 'small',
            "url": '#0'
        }
    })
}}
{% macro onsCallToAction(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    <div class="ons-call-to-action">
        <div class="ons-container">
            <div class="ons-grid ons-grid--flex ons-grid--vertical-center ons-grid--no-wrap@s">
                <div class="ons-grid__col ons-col-auto ons-u-flex-shrink@s">
                    <h2 class="ons-call-to-action__heading ons-u-fs-r--b ons-u-di">{{ params.headingText }}</h2>
                    <p class="ons-call-to-action__text ons-u-di">{{ params.paragraphText }}</p>
                </div>
                <div class="ons-grid__col ons-col-auto ons-u-flex-no-grow ons-u-mt-xs@xxs@s">
                    {{ onsButton({
                        "text": params.button.text,
                        "url": params.button.url,
                        "variants": "small"
                    })}}
                </div>
            </div>
        </div>
    </div>
{% endmacro %}
.ons-call-to-action {
  background: $color-cta-bg;
  padding: 0.85rem 0;

  &__heading {
    padding-right: 0.2rem;
  }
}

Help improve this component

Let us know how we could improve this component or share your user research findings. Discuss the ‘Call to action’ component on GitHub