Skip to main content

Testing

Help us to improve the ONS Design System. Take part in a short study

Call to action

Important information:
This component requires documentation.

Default

<div class="call-to-action">
  <div class="container">
    <div class="grid grid--flex grid--vertical-center grid--no-wrap@s">
      <div class="grid__col col-auto u-flex-shrink@s">
        <h2 class="call-to-action__heading u-fs-r--b u-di">Call to action heading.</h2>
        <p class="call-to-action__text u-di">Descriptive text about call to action</p>
      </div>
      <div class="grid__col col-auto u-flex-no-grow u-mt-xs@xxs@s">
        <a href="#0" role="button" class="btn btn--small btn--link js-submit-btn">
          <span class="btn__inner icon--chevron-right-white">Start
            <svg class="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',
            "classes": 'btn--small',
            "innerClasses": 'icon--chevron-right-white',
            "url": '#0'
        }
    })
}}

{% macro onsCallToAction(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    <div class="call-to-action">
        <div class="container">
            <div class="grid grid--flex grid--vertical-center grid--no-wrap@s">
                <div class="grid__col col-auto u-flex-shrink@s">
                    <h2 class="call-to-action__heading u-fs-r--b u-di">{{ params.headingText }}</h2>
                    <p class="call-to-action__text u-di">{{ params.paragraphText }}</p>
                </div>
                <div class="grid__col col-auto u-flex-no-grow u-mt-xs@xxs@s">
                    {{ onsButton({
                        "text": params.button.text,
                        "url": params.button.url,
                        "classes": "btn--small",
                        "innerClasses": "icon--chevron-right-white"
                    })}}
                </div>
            </div>
        </div>
    </div>
{% endmacro %}

.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="call-to-action">
  <div class="container">
    <div class="grid grid--flex grid--vertical-center grid--no-wrap@s">
      <div class="grid__col col-auto u-flex-shrink@s">
        <h2 class="call-to-action__heading u-fs-r--b u-di">Ready to start your census?</h2>
        <p class="call-to-action__text u-di">You’ll need the access code from the letter we sent you.</p>
      </div>
      <div class="grid__col col-auto u-flex-no-grow u-mt-xs@xxs@s">
        <a href="#0" role="button" class="btn btn--small btn--link js-submit-btn">
          <span class="btn__inner icon--chevron-right-white">Start census
            <svg class="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',
            "classes": 'btn--small btn--link',
            "url": '#0'
        }
    })
}}

{% macro onsCallToAction(params) %}
    {% from "components/button/_macro.njk" import onsButton %}
    <div class="call-to-action">
        <div class="container">
            <div class="grid grid--flex grid--vertical-center grid--no-wrap@s">
                <div class="grid__col col-auto u-flex-shrink@s">
                    <h2 class="call-to-action__heading u-fs-r--b u-di">{{ params.headingText }}</h2>
                    <p class="call-to-action__text u-di">{{ params.paragraphText }}</p>
                </div>
                <div class="grid__col col-auto u-flex-no-grow u-mt-xs@xxs@s">
                    {{ onsButton({
                        "text": params.button.text,
                        "url": params.button.url,
                        "classes": "btn--small",
                        "innerClasses": "icon--chevron-right-white"
                    })}}
                </div>
            </div>
        </div>
    </div>
{% endmacro %}

.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