<a class="atm-button atm-button-secondary button-md ">
<span class="button-content">
<span class="atm-icon far fa-long-arrow-right "></span>
<span>Lees de klantcase</span>
</span>
<span class="button-underline"></span>
</a>
<{{element}}
class="atm-button atm-button-secondary {{modifier}} {{#unless text}}button-icon-only{{/unless}}"
{{#if type}}type="{{type}}"{{/if}}
{{#if title}}title="{{title}}"{{/if}}
{{#if href}}href="{{href}}"{{/if}}
{{#if target}}target="{{target}}"{{/if}}
{{#if id}}id="{{id}}"{{/if}}
{{#if isDisabled}}disabled{{/if}}
{{#if dataset}}
{{#each dataset}}
{{#if key}}{{#if value}}
data-{{key}}="{{value}}"
{{/if}}{{/if}}
{{/each}}
{{/if}}>
<span class="button-content">
{{#if iconLeft}}
{{#if icon}}{{render '@icon' icon}}{{/if}}
{{#if text}}<span>{{text}}</span>{{/if}}
{{else}}
{{#if text}}<span>{{text}}</span>{{/if}}
{{#if icon}}{{render '@icon' icon}}{{/if}}
{{/if}}
</span>
<span class="button-underline"></span>
</{{element}}>
{
"modifier": "button-md",
"text": "Lees de klantcase",
"element": "a",
"type": "",
"title": "",
"target": "",
"href": "",
"id": "",
"isDisabled": false,
"iconLeft": true,
"icon": {
"style": "far",
"icon": "fa-long-arrow-right"
},
"dataset": [
{
"key": "",
"value": ""
}
]
}
.atm-button-secondary {
@apply relative;
@apply inline-block;
@apply overflow-hidden;
@apply text-md;
@apply font-display;
@apply font-normal;
@apply text-navy;
@apply cursor-pointer;
&.button-lg {
&.button-icon-only {
}
}
/* Default */
&.button-md {
&.button-icon-only {
}
}
&.button-sm {
&.button-icon-only {
}
}
.button-content {
@apply inline-block relative z-20;
padding-left: 2px;
padding-right: 2px;
margin-bottom: 2px;
.atm-icon + span,
span + .atm-icon {
@apply ml-1;
}
}
.button-underline {
@apply block absolute z-10 bottom-0 left-0 right-0;
@apply transform-gpu transition-all;
@apply bg-cta;
@apply h-0.5;
}
&:hover {
.button-underline {
background-color: #d0ecfa;
@apply h-3;
}
}
}
No notes defined.