<button class="link
link_simple
btn link_not-a-link link_btn link_trigger
btn btn_dark link_not-a-link link_btn link_trigger
" type="button">
<span>A long line for a link</span>
</button>
{{#if href}}
<a
class="link
{{#if isSimple}}link_simple{{/if}}
{{#if isJustIcon}}link_justicon{{/if}}
{{#if isSecondary}}link_secondary{{/if}}
{{#if isInline}}link_inline{{/if}}
{{#if icon-before}}link_has-icon link_has-icon_before{{/if}}
{{#if icon-after}}link_has-icon link_has-icon_after{{/if}}
{{#if isLarge}}link_large{{/if}}
{{#if isDetailedFooterLink}}link_detailedFooterLink{{/if}}
{{#if isLegalLink}}link_legalLink{{/if}}
{{#if isLargeBlog}}link_largeBlog{{/if}}
{{#if isLight}}link_color_light{{/if}}
{{#if isHiddenLine}}link_hidden-line{{/if}}
{{#if isContinue}}link_continue{{/if}}
{{#if isTransparent}}link_transparent{{/if}}
{{#if isSubMenuLink}}link_submenu{{/if}}
{{#if isFooter}}link_footer{{/if}}
{{#if isModal}}modal-toggle{{/if}}
{{#if isTitleAsLink}}link_titleAsLink{{/if}}
{{#if isActive}}link_active{{/if}}
{{#if extraClasses}} {{extraClasses}}{{/if}}"
href="{{ href }}"
{{#if target}}
target="{{ target }}"
noopener
{{/if}}
{{#if id}}
id="{{ id }}"
{{/if}}
{{#if data-modal}}
data-modal="{{ data-modal }}"
{{/if}}
>
{{#if icon-before }}
{{> @icon icon-before }}
{{/if}}
{{#if text }}<span>{{ text }}</span>{{/if}}
{{#if icon-after }}
{{> @icon icon-after }}
{{/if}}
</a>
{{#if second-link}}
<a
class="link
link_second-link
{{#if second-link.isLarge}}link_large{{/if}}
{{#if isFooter}}link_footer{{/if}}{{#if isSimple}} link_simple{{/if}}{{#if extraClasses}} {{extraClasses}}{{/if}}"
href="{{second-link.href}}"
>
<span>{{second-link.text}}</span>
</a>
{{/if}}
{{else if btnType}}
<button class="link
link_simple
{{#if isJustIcon}}link_justicon{{/if}}
{{#if isBtn}}btn link_not-a-link link_btn link_trigger{{/if}}
{{#if icon-before}}link_has-icon link_has-icon_before{{/if}}
{{#if icon-after}}link_has-icon link_has-icon_after{{/if}}
{{#if isModal}}modal-toggle{{/if}}
{{#if isContactonHeader}}btn btn_dark link_not-a-link link_btn link_trigger{{/if}}
{{#if extraClasses}} {{extraClasses}}{{/if}}" type="{{ btnType }}" {{{ code }}}
{{#if id}}
id="{{ id }}"
{{/if}}
{{#if data-modal}}
data-modal="{{ data-modal }}"
{{/if}}>
{{#if icon-before }}
{{> @icon icon-before }}
{{/if}}
<span>{{ text }}</span>
{{#if icon-after }}
{{> @icon icon-after }}
{{/if}}
</button>
{{else}}
<span class="link link_not-a-link
{{#if icon-before}} link_has-icon link_has-icon_before{{/if}}
{{#if icon-after}} link_has-icon link_has-icon_after{{/if}}{{#if extraClasses}} {{extraClasses}}{{/if}}">
{{#if icon-before }}
{{> @icon icon-before }}
{{/if}}
{{#if text }}<span>{{ text }}</span>{{/if}}
{{#if icon-after }}
{{> @icon icon-after }}
{{/if}}
</span>
{{/if}}
{
"href": false,
"text": "A long line for a link",
"isContactonHeader": true,
"btnType": "button",
"isBtn": true
}
.link {
display: inline-flex;
align-items: flex-start;
gap:4px;
outline: none;
text-decoration: none;
font-family: 'Jornada Sans Medium';
font-size: 13px;
font-weight: normal;
line-height: 23px;
letter-spacing: 0;
color: var(--color-text);
cursor: pointer;
span {
position: relative;
display: inline-block;
padding-bottom: 5px;
transition: all 0.3s;
&::after {
position: absolute;
bottom: 0;
left: 0;
width: 30px;
height: 1px;
background-color: var(--color-accent);
transition: all 0.3s;
content: '';
}
}
&:hover,
&:focus {
span {
&::after {
width: 100%;
}
}
}
&_inline {
color: var(--color-accent-dark);
gap: 8px;
line-height: 100%;
span {
text-decoration: underline;
padding-bottom: 0;
transition: none;
position: relative;
bottom:-1px;
&::after {
width: 0;
height: 0;
transition: none;
content: none;
}
}
}
&_has-icon {
position: relative;
.icon {
position: absolute;
top: 0;
}
&_before {
padding-left: 22px;
.icon-before {
left: 0;
}
}
&_after {
padding-right: 22px;
.icon-after {
right: 0;
}
}
}
&_secondary{
color: var(--color-text-link-secondary);
text-decoration: underline;
span {
padding-bottom: 0;
&::after {
content: none;
}
}
.icon {
fill: var(--color-icon-accent);
}
}
&_simple {
justify-content: center;
align-items: center;
/*padding: 0;*/
gap: 8px;
/* comento esto para que la alineación del icono sea correcta, arriba,
y para evitar que al crecer las líneas del link el icono encoja (CA. R.)
.icon{
position: unset;
top: unset;
}*/
&:hover,
&:focus {
color: var(--color-accent);
}
span {
padding-bottom: 0;
&::after {
content: none;
}
}
}
&_large {
font-family: 'Jornada Sans Book';
font-size: 16px;
line-height: 26px;
}
&_detailedFooterLink {
font-family: 'Jornada Sans Book';
font-size: 14px;
line-height: 17px;
}
&_largeBlog {
font-family: 'Jornada Sans Medium';
font-size: 18px;
line-height: 26px;
font-weight: 500;
}
&_titleAsLink {
font-family: 'Jornada Sans Book';
font-size: 18px;
font-weight: normal;
line-height: 28px;
letter-spacing: 0;
color: var(--color-text);
}
&_legalLink {
font-family: 'Jornada Sans Book';
font-size: 12px;
line-height: 14px;
}
&_color {
&_light {
color: var(--color-text-light);
span {
&::after {
background-color: var(--color-text-light);
}
}
}
}
&_submenu {
font-family: 'Jornada Sans Book';
font-size: 14px;
line-height: 17px;
&:hover{border-bottom: 1px solid var(--color-secondary);}
span {
padding-bottom: 0;
&::after {
content: none;
}
}
}
&_hidden-line {
span {
padding-bottom: 0;
@media (--viewport-sm-min) {
padding-bottom: 10px;
}
&::after {
width: 0;
}
}
}
&_continue {
.icon {
transform: rotate(180deg);
}
}
&_transparent {
opacity: 0.3;
transition: opacity 0.3s;
&:hover,
&:focus {
opacity: 1;
}
}
&_not-a-link {
span {
padding-bottom: 0;
&::after {
content: none;
}
}
}
&_second-link {
&::before {
color: var(--color-text);
content: '/';
}
}
&.btn {
color: inherit;
}
&_less{ /* añadido por Orest a 25 de abril de 2025 */
display: inline-block;
outline: none;
text-decoration: none;
font-family: 'Jornada Sans Medium';
font-size: 13px;
font-weight: normal;
line-height: 23px;
letter-spacing: 0;
color: var(--color-text);
cursor: pointer;
}
&_justicon {
position: relative;
.icon {
top: -16px;
}
}
}
No notes defined.