<a type="button" href="#" class="c-button c-button--flat c-button--has-icon ">
<span class="c-button__inner">
<span class="c-button__label " data-module-bind="btn-label">
Download de factsheet
</span>
<span class="c-button__wrap-icon">
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-download" />
</svg>
</span>
</span>
</a>
<{{element}}
{{#if type}}type="{{type}}"{{/if}}
{{#if href}}href="{{href}}{{#if anchor}}{{anchor}}{{/if}}"{{/if}}
{{#if target}}target="{{target}}"{{/if}}
class="c-button {{#if modifier}}c-button--{{modifier}}{{/if}} {{#if size}}c-button--size-{{size}}{{/if}} {{#if icon}}c-button--has-icon{{/if}} {{#if isReversed}}c-button--reversed{{/if}} {{#if hideLabel}}c-button--hide-label{{/if}} {{#if isLarge}}c-button--large{{/if}} {{#if invertColor}}c-button--invert-color{{/if}} {{#if class }}{{ class }}{{/if}} {{#if isFullWidth }}c-button--full-width{{/if}}"
{{#if id}}id="{{id}}"{{/if}}
{{#if isDisabled}}disabled{{/if}}
{{#if attributes}}{{{ attributes }}}{{/if}}
{{{data}}}
>
<span class="c-button__inner">
<span class="c-button__label {{#if hideLabel}}u-visually-hidden{{/if}}" data-module-bind="btn-label">
{{{label}}}
</span>
{{#if icon}}
<span class="c-button__wrap-icon">
{{> '@atoms-icon' icon=icon modifier=iconModifier }}
</span>
{{/if}}
</span>
</{{element}}>
{
"element": "a",
"label": "Download de factsheet",
"type": "button",
"href": "#",
"icon": "download",
"modifier": "flat"
}
/* ======================================================
Atoms.Button
====================================================== */
/* Variables
====================================================== */
@use 'src/_sass/utilities';
/* Module
====================================================== */
.c-button {
--button-spacing: calc(var(--space-tiny) * 2.5);
--button-font-size: var(--size-foxtrot);
--button-background-color: var(--page-theme-dark);
// --hover-background: var(--color-gray-medium);
// --hover-border-color: var(--color-black);
appearance: none;
cursor: pointer;
// box model
display: inline-block;
vertical-align: middle;
// spacing
// border: 1px solid var(--color-black);
border: none;
// border-radius: calc(var(--space-tiny) / 2);
border-radius: 0;
// text
text-decoration: none;
text-align: start;
// font-family: var(--font-family-secondary);
// font-weight: var(--font-weight-bold);
line-height: 0;
// color
// background: var(--color-white);
// color: var(--color-brand-a-dark);
background-color: var(--button-background-color);
color: var(--color-white);
// animation
transition: var(--base-transition-duration-short) var(--base-timing-function);
transition-property: color, background-color, border;
#{utilities.$global-interaction-states} {
// background: var(--hover-background);
// border-color: var(--hover-border-color);
}
}
/* Elements
====================================================== */
.c-button__inner {
display: flex;
align-items: center;
justify-content: space-between;
line-height: 1;
}
.c-button__label {
padding: var(--button-spacing);
font-size: var(--button-font-size);
}
.c-button__wrap-icon {
padding: var(--button-spacing);
}
/* Modifiers
====================================================== */
/**
Contrast
*/
.c-button--contrast {
--button-background-color: var(--page-theme, var(--color-brand-a));
color: var(--color-white);
}
/**
* Reversed
*/
.c-button--reversed {
.c-button__inner {
flex-direction: row-reverse;
}
}
/**
* Full width
*/
.c-button--full-width {
display: block;
}
/**
Flat
*/
.c-button--flat {
--button-spacing: 0;
--button-background-color: transparent;
color: var(--page-theme);
border: none;
.c-button__wrap-icon {
padding-inline-start: var(--space-tiny);
}
#{utilities.$global-interaction-states} {
background-color: transparent;
}
}
/**
* With icon
*/
.c-button--has-icon:not(.c-button--reversed) {
.c-button__label {
padding-inline-end: 0;
}
}
.c-button--has-icon.c-button--reversed {
.c-button__label {
padding-inline-start: 0;
}
}
/**
* Small
*/
.c-button--small {
--button-spacing: var(--space-tiny);
--button-font-size: var(--size-normalis);
.c-icon {
inline-size: var(--space-small);
block-size: var(--space-small);
}
}
/**
* Medium
*/
.c-button--size-medium {
--button-spacing: calc(var(--space-tiny) * 1.5);
--button-font-size: var(--size-normalis);
.c-icon {
inline-size: var(--space-small);
block-size: var(--space-small);
}
}
/* Theming
====================================================== */
:where(.t-page-theme-brand-a, .t-page-theme-brand-b, .t-page-theme-brand-c) .c-hero-detail__intro,
:where(.t-themed-section) .t-color--light,
.c-accordeon--branded:not(:where(.t-themed-section *)) {
// .c-button:not(.c-button--contrast) {
.c-button {
--button-background-color: var(--color-white);
color: var(--page-theme-dark);
}
.c-button--flat {
--button-background-color: transparent;
color: var(--color-white);
}
.c-button--contrast {
--button-background-color: var(--page-theme);
color: var(--color-white);
}
}
No notes defined.