<div class="form-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<div class="field-top__wrap">
<a class="link
link_inline
" href="#">
<span>Link</span>
</a>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="form-input__fieldset ">
<input class="form-input__input caption-placeholder-m" id="" type="text" name="" title="Example form input" value="5.000">
<div class="form-input__symbol" for="">
<div class="bodycopy-xs
">
€
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
{{#if isInput}}
{{> '@form-input' inputCaption}}
{{else if isSelect}}
{{> '@form-select' selectCaption}}
{{else}}
<span class="caption{{type}}">{{{text}}}</span>
{{/if}}
{
"type": "-call to action",
"text": "call to action Default",
"isInput": true,
"inputCaption": {
"field-top": {
"label": {
"text": "Field Text"
},
"link": {
"isInline": true,
"href": "#",
"text": "Link"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"hasID": false,
"extraClasses": "caption-placeholder-m",
"inputTitle": "Example form input",
"idComponent": "ingresosMes",
"inputValue": "5.000",
"symbol": {
"text": "€"
}
}
}
[class*='caption-'] {
font-family: var(--font-family-sans-low);
letter-spacing: var(--font-letter-spacing-wide);
}
.caption {
/* extend class: btn molecule */
&-call-to-action {
font-size: var(--font-size-4);
line-height: var(--font-line-height-3);
font-family: var(--font-family-sans-mid);
}
&-placeholder-L, &-placeholder-l{
font-size: var(--font-size-10);
line-height: var(--font-line-height-6);
font-family: var(--font-family-news-low);
.access-select__option,
&::placeholder {
font-size: var(--font-size-10);
line-height: var(--font-line-height-6);
font-family: var(--font-family-news-low);
}
}
&-placeholder-M, &-placeholder-m {
font-size: var(--font-size-4);
line-height: var(--font-line-height-3);
font-family: var(--font-family-sans-low);
.access-select__option,
&::placeholder {
font-size: var(--font-size-4);
line-height: var(--font-line-height-3);
font-family: var(--font-family-sans-low);
}
}
/* extend class: label atom */
&-label {
font-size: var(--font-size-1);
line-height: var(--font-line-height-1);
font-family: var(--font-family-sans-mid);
letter-spacing: var(--font-letter-spacing-label);
text-transform: uppercase;
}
}
No notes defined.