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
| Name | Type | Required | Description |
|---|---|---|---|
| headingText | string | true | The heading for the component |
| paragraphText | string | false | The descriptive text for the component |
| button | Object<CTAButton> | true | Settings for the call to action button |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | The text label for the button |
| url | string | true | The 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)