Smart Call To Action Button

Overview

This component is to be deprecated

Smart Call To Action Button is used on landing pages. It is a link which looks like a button, and is designed to take nominated query string parameters and/or a hash and append them as query string parameters or a hash to the target href link.

The Smart Call To Action Button leverages the button component for the styling.

There are two optional attributes which you can add to the component:

data-smart-params = A comma separated list of query string params in the page URL to be appdended to the destination href link
data-smart-hash = If this has the value "true" it will append the hash in the page URL to the destination href link

Click on this link to add query string parameters to the URL to see how the buttons work. Click on this link to add a hash to the URL to see how the buttons work.

Examples

Default variation

Add 1, 2 to Param and Hash and add a Hash Add 1, 3 to Param No Params Defined Do Not Add Non-Existing Param Add 1, 2 to Hash

<a href="https://www.myob.com/nz?do=this#hash" class="btn btn--primary" data-smart-params="param1,param2" data-smart-hash="true" data-myob-smart-call-to-action-button role="button" target="_self">Add 1, 2 to Param and Hash and add a Hash</a>
<a href="https://www.myob.com/nz?have=something" class="btn btn--secondary" data-smart-params="param1,param3" data-smart-hash="false" data-myob-smart-call-to-action-button role="button" target="_self">Add 1, 3 to Param</a>
<a href="https://www.myob.com/nz" class="btn btn--tertiary" data-myob-smart-call-to-action-button role="button" target="_self">No Params Defined</a>
<a href="https://www.myob.com/nz" class="btn btn--bordered-primary" data-smart-params="param5" data-myob-smart-call-to-action-button role="button" target="_self">Do Not Add Non-Existing Param</a>
<a href="https://www.myob.com/nz#hash" class="btn btn--bordered-secondary" data-smart-params="param1,param2" data-myob-smart-call-to-action-button role="button" target="_self">Add 1, 2 to Hash</a>

Usage guidelines

We're so sorry, there are currently no usage guidelines for this component 😥

If you feel you can help out your fellow designers by creating usage guidelines for this component, please reach out to #cr-marquee on Slack.

Implementation guidelines

We're so sorry, there are currently no implementation guidelines for this component 😥

If you feel you can help out your fellow designers by creating usage guidelines for this component, please reach out to #cr-marquee on Slack.