<!-- Default -->
<link media="all" rel="stylesheet" href="/assets/themes/default/css/cta.css?cb=">
<a href="#" data-module="cta" class="cta primary-cta " role="button">
Primary CTA
</a>
<!-- Secondary CTA -->
<link media="all" rel="stylesheet" href="/assets/themes/default/css/cta.css?cb=">
<a href="#" data-module="cta" class="cta secondary-cta " role="button">
Secondary CTA
</a>
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/cta.css?cb={{cacheBuster}}">
{{/if}}
<a href="{{url}}" data-module="cta" class="cta {{#if isSecondary}}secondary-cta{{else}}primary-cta{{/if}} {{modifier}}" {{#if target}}target="{{target}}"{{/if}} role="button" {{#if addNoOpener}}rel="noopener"{{/if}} {{#if download}}download{{/if}}>
{{text}}
</a>
/* Default */
{
"theme": "default",
"firstInstance": true,
"isSecondary": false,
"url": "#",
"text": "Primary CTA"
}
/* Secondary CTA */
{
"theme": "default",
"firstInstance": true,
"isSecondary": true,
"url": "#",
"text": "Secondary CTA"
}
import addToDataLayer from '../../../../js/utils/datalayer';
export class Cta {
constructor(module) {
module.addEventListener('click', () => {
addToDataLayer({
'event': 'cta.click',
'buttonName': unescape(module.innerHTML).trim(),
'buttonType': module.classList.contains('primary-cta') ? 'primary' : 'secondary',
});
});
}
}
export default (module) => new Cta(module);
@import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';
.primary-cta {
@extend %primary-cta;
}
.secondary-cta {
@extend %secondary-cta;
}
No notes defined.