Cookies on ons.gov.uk

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

Call to action

Important information:
This component requires documentation.

Default

Example Call To Action Default contents

Nunjucks

{% 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',
            "url": '#0'
        }
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
headingTextstringtrueThe heading for the component
paragraphTextstringfalseThe descriptive text for the component
buttonObject<CTAButton>trueSettings for the call to action button
CTAButton
NameTypeRequiredDescription
textstringtrueThe text label for the button
urlstringtrueThe URL for the href attribute of the button link

HTML

<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"><span class="ons-btn__text">Start</span><svg class="ons-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>

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss the ‘Call to action’ component on GitHub (opens in a new tab)