Skip to main content

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" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false">
              <path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)" />
            </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" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false">
              <path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)" />
            </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