<ul class="form-list form-list-different-columns row">
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Nombre</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> <input class="input
input-distinguisher_name
" id="randomInputId411" type="text" name="" title="Name" autocomplete="" placeholder="¿Cómo te llamas?" />
<div class="form-fieldset__valid-indicator">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Nombre</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> <input class="input
input-distinguisher_name
" id="randomInputId511" type="text" name="" title="Name" autocomplete="" placeholder="¿Cómo te llamas?" />
<div class="form-fieldset__valid-indicator">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
">
<div class="form-list__field
required">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Nombre</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> <input class="input
input-distinguisher_name
" id="randomInputId511" type="text" name="" title="Name" autocomplete="" placeholder="¿Cómo te llamas?" />
<div class="form-fieldset__valid-indicator">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="form-list form-list-different-columns row">
{{#each this.form-list}}
<li class="col
form-list__item
{{#if this.extraClasses}}
{{ this.extraClasses }}
{{/if}}
{{#if threecolumns}}
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
{{else if twocolumns}}
col-xs-12 col-ms-6 col-sm-6 col-md-6 col-lg-6
{{else if twocolumns-b}}
col-xs-12 col-ms-12 col-sm-6 col-md-6 col-lg-6
{{else if onecolumn}}
col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12
{{else if anotherGrid}}
{{ this.anotherGrid }}
{{else}}
col-xs-12 col-ms-6 col-sm-4 col-md-4 col-lg-4
{{/if}}
">
{{#if this.isTwoColumn}}
<div class="row">
<div class="{{ this.col-1 }}">
<div class="form-list__field
{{#if this.distinguisher-1}}form-list__field_{{ distinguisher-1 }}{{/if}}
{{#if this.extraClassnames-1}}{{ this.extraClassnames-1 }}{{/if}}
{{#if this.isHidden-1}}hidden{{/if}}
{{#if this.isRequired-1}}required{{/if}}" {{#if this.id-1}} id="{{ id-1 }}" {{/if}}>
{{#if this.form-fieldset-1}}
{{> @form-fieldset this.form-fieldset-1 }}
{{/if}}
{{#if this.form-radio-group-1}}
{{> @form-radio-group this.form-radio-group-1 }}
{{/if}}
{{#if this.form-checkbox-group-1}}
{{> @form-checkbox-group this.form-checkbox-group-1 }}
{{/if}}
{{#if this.form-select-1}}
{{> @form-select this.form-select-1 }}
{{/if}}
{{#if this.form-range-slider-1}}
{{> @form-range-slider this.form-range-slider-1 }}
{{/if}}
{{#if this.form-range-slider-with-lightbox-1}}
{{> @form-range-slider-with-lightbox this.form-range-slider-with-lightbox-1 }}
{{/if}}
{{#if this.form-switch-1}}
{{> @form-switch this.form-switch-1 }}
{{/if}}
{{#if this.form-input-1}}
{{> @form-input this.form-input-1 }}
{{/if}}
{{#if this.form-textarea-1}}
{{> @form-textarea this.form-textarea-1 }}
{{/if}}
{{#if this.label-m-1}}
<div class="prelabel{{#if heading}} heading{{/if}}">
{{> @label-m label-m-1 }}
{{> @tooltip tooltip-1 }}
</div>
{{/if}}
{{#if this.title-s-1}}
<div class="prelabel{{#if heading}} heading{{/if}}">
{{> @title-s title-s-1 }}
</div>
{{/if}}
{{#if this.title-1}}
<div class="prelabel{{#if heading}} heading{{/if}}">
{{> @title title-1 }}
</div>
{{/if}}
{{#if this.alert-1}}
{{> @alert alert-1 }}
{{/if}}
</div>
</div>
<div class="{{ this.col-2 }}">
<div class="form-list__field
{{#if this.distinguisher-2}}form-list__field-distinguisher_{{ distinguisher-2 }}{{/if}}
{{#if this.extraClassnames-2}}{{ this.extraClassnames-2 }}{{/if}}
{{#if this.isHidden-2}}hidden{{/if}}
{{#if this.isRequired-2}}required{{/if}}" {{#if this.id-2}} id="{{ id-2 }}" {{/if}}>
{{#if this.form-fieldset-2}}
{{> @form-fieldset this.form-fieldset-2 }}
{{/if}}
{{#if this.form-radio-group-2}}
{{> @form-radio-group this.form-radio-group-2 }}
{{/if}}
{{#if this.form-checkbox-group-2}}
{{> @form-checkbox-group this.form-checkbox-group-2 }}
{{/if}}
{{#if this.form-select-2}}
{{> @form-select this.form-select-2 }}
{{/if}}
{{#if this.form-range-slider-2}}
{{> @form-range-slider this.form-range-slider-2 }}
{{/if}}
{{#if this.form-range-slider-with-lightbox-2}}
{{> @form-range-slider-with-lightbox this.form-range-slider-with-lightbox-2 }}
{{/if}}
{{#if this.form-switch-2}}
{{> @form-switch this.form-switch-2 }}
{{/if}}
{{#if this.form-input-2}}
{{> @form-input this.form-input-2 }}
{{/if}}
{{#if this.form-textarea-2}}
{{> @form-textarea this.form-textarea-2 }}
{{/if}}
{{#if this.label-m-2}}
<div class="prelabel{{#if heading}} heading{{/if}}">
{{> @label-m label-m-2 }}
{{> @tooltip tooltip-2 }}
</div>
{{/if}}
{{#if this.title-s-2}}
<div class="prelabel{{#if heading}} heading{{/if}}">
{{> @title-s title-s-2 }}
</div>
{{/if}}
{{#if this.title-2}}
<div class="prelabel{{#if heading}} heading{{/if}}">
{{> @title title-2 }}
</div>
{{/if}}
{{#if this.alert-2}}
{{> @alert alert-2 }}
{{/if}}
</div>
</div>
</div>
{{else if this.isOneColumn}}
<div class="row">
<div class="{{ col }}">
<div class="form-list__field
{{#if this.distinguisher}}form-list__field_{{ distinguisher }}{{/if}}
{{#if this.extraClassnames}}{{ this.extraClassnames }}{{/if}}
{{#if this.isHidden}}hidden{{/if}}
{{#if this.isRequired}}required{{/if}}" {{#if this.id}} id="{{ id }}" {{/if}}>
{{#if this.form-fieldset}}
{{> @form-fieldset this.form-fieldset }}
{{/if}}
{{#if this.form-radio-group}}
{{> @form-radio-group this.form-radio-group }}
{{/if}}
{{#if this.form-checkbox-group}}
{{> @form-checkbox-group this.form-checkbox-group }}
{{/if}}
{{#if this.form-select}}
{{> @form-select this.form-select }}
{{/if}}
{{#if this.form-range-slider}}
{{> @form-range-slider this.form-range-slider }}
{{/if}}
{{#if this.form-range-slider-with-lightbox}}
{{> @form-range-slider-with-lightbox this.form-range-slider-with-lightbox }}
{{/if}}
{{#if this.form-switch}}
{{> @form-switch this.form-switch }}
{{/if}}
{{#if this.form-input}}
{{> @form-input this.form-input }}
{{/if}}
{{#if this.form-textarea}}
{{> @form-textarea this.form-textarea }}
{{/if}}
{{#if this.label-m}}
<div class="prelabel{{#if heading}} heading{{/if}}">
{{> @label-m label-m }}
{{> @tooltip tooltip }}
</div>
{{/if}}
{{#if this.title-s}}
<div class="prelabel{{#if heading}} heading{{/if}}">
{{> @title-s title-s }}
</div>
{{/if}}
{{#if this.title}}
<div class="prelabel{{#if heading}} heading{{/if}}">
{{> @title title }}
</div>
{{/if}}
{{#if this.alert}}
{{> @alert alert }}
{{/if}}
</div>
</div>
</div>
{{else if this.hasTwoFields}}
{{#each this.field}}
<div class="form-list__field
{{#if this.distinguisher}}form-list__field_{{ distinguisher }}{{/if}}
{{#if this.extraClassnames}}{{ this.extraClassnames }}{{/if}}
{{#if this.isHidden}}hidden{{/if}}
{{#if this.isRequired}}required{{/if}}" {{#if this.id}} id="{{ id }}" {{/if}}>
{{#if this.form-fieldset}}
{{> @form-fieldset this.form-fieldset }}
{{/if}}
{{#if this.form-radio-group}}
{{> @form-radio-group this.form-radio-group }}
{{/if}}
{{#if this.form-checkbox-group}}
{{> @form-checkbox-group this.form-checkbox-group }}
{{/if}}
{{#if this.form-select}}
{{> @form-select this.form-select }}
{{/if}}
{{#if this.form-range-slider}}
{{> @form-range-slider this.form-range-slider }}
{{/if}}
{{#if this.form-range-slider-with-lightbox}}
{{> @form-range-slider-with-lightbox this.form-range-slider-with-lightbox }}
{{/if}}
{{#if this.form-switch}}
{{> @form-switch this.form-switch }}
{{/if}}
{{#if this.form-input}}
{{> @form-input this.form-input }}
{{/if}}
{{#if this.form-textarea}}
{{> @form-textarea this.form-textarea }}
{{/if}}
{{#if this.label-m}}
<div class="prelabel{{#if heading}} heading{{/if}}">
{{> @label-m label-m }}
{{> @tooltip tooltip }}
</div>
{{/if}}
{{#if this.title-s}}
<div class="prelabel{{#if heading}} heading{{/if}}">
{{> @title-s title-s }}
</div>
{{/if}}
{{#if this.title}}
<div class="prelabel{{#if heading}} heading{{/if}}">
{{> @title title }}
</div>
{{/if}}
{{#if this.alert}}
{{> @alert alert }}
{{/if}}
</div>
{{/each}}
{{else}}
<div class="form-list__field
{{#if this.distinguisher}}form-list__field_{{ distinguisher }}{{/if}}
{{#if this.extraClassnames}}{{ this.extraClassnames }}{{/if}}
{{#if this.isHidden}}hidden{{/if}}
{{#if this.isRequired}}required{{/if}}" {{#if this.id}} id="{{ id }}" {{/if}}>
{{#if this.form-fieldset}}
{{> @form-fieldset this.form-fieldset }}
{{/if}}
{{#if this.form-radio-group}}
{{> @form-radio-group this.form-radio-group }}
{{/if}}
{{#if this.form-checkbox-group}}
{{> @form-checkbox-group this.form-checkbox-group }}
{{/if}}
{{#if this.form-select}}
{{> @form-select this.form-select }}
{{/if}}
{{#if this.form-range-slider}}
{{> @form-range-slider this.form-range-slider }}
{{/if}}
{{#if this.form-range-slider-with-lightbox}}
{{> @form-range-slider-with-lightbox this.form-range-slider-with-lightbox }}
{{/if}}
{{#if this.form-switch}}
{{> @form-switch this.form-switch }}
{{/if}}
{{#if this.form-input}}
{{> @form-input this.form-input }}
{{/if}}
{{#if this.form-textarea}}
{{> @form-textarea this.form-textarea }}
{{/if}}
{{#if this.label-m}}
<div class="prelabel{{#if heading}} heading{{/if}}">
{{> @label-m label-m }}
{{> @tooltip tooltip }}
</div>
{{/if}}
{{#if this.title-s}}
<div class="prelabel{{#if heading}} heading{{/if}}">
{{> @title-s title-s }}
</div>
{{/if}}
{{#if this.title}}
<div class="prelabel{{#if heading}} heading{{/if}}">
{{> @title title }}
</div>
{{/if}}
{{#if this.alert}}
{{> @alert alert }}
{{/if}}
</div>
{{/if}}
</li>
{{/each}}
</ul>
{
"form-list": [
{
"threecolumns": true,
"isRequired": true,
"form-fieldset": {
"field-top": {
"label": {
"text": "Nombre"
},
"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"
}
}
},
"input": {
"placeholder": "¿Cómo te llamas?",
"distinguisher": "name",
"id": "randomInputId411",
"type": "text",
"title": "Name"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"threecolumns": true,
"isRequired": true,
"form-fieldset": {
"field-top": {
"label": {
"text": "Nombre"
},
"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"
}
}
},
"input": {
"placeholder": "¿Cómo te llamas?",
"distinguisher": "name",
"id": "randomInputId511",
"type": "text",
"title": "Name"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"threecolumns": true,
"isRequired": true,
"form-fieldset": {
"field-top": {
"label": {
"text": "Nombre"
},
"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"
}
}
},
"input": {
"placeholder": "¿Cómo te llamas?",
"distinguisher": "name",
"id": "randomInputId511",
"type": "text",
"title": "Name"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
}
]
}
.form-list-different-columns {
li{
&.col-sm-4, &.col-md-4, &.col-lg-4{
&:first-child .form-list__field,
&:nth-child(2) .form-list__field{
@media (--viewport-ms-min) {margin-top: 0;}
@media (--viewport-sm-min) {margin-top: 0;}
}
&:nth-child(3) .form-list__field {
@media (--viewport-sm-min) {margin-top: 0;}
}
}
&.col-sm-6, &.col-md-6, &.col-lg-6{
&:first-child .form-list__field,
&:nth-child(2) .form-list__field{
@media (--viewport-ms-min) {margin-top: 0;}
@media (--viewport-sm-min) {margin-top: 0;}
}
}
&.onecolumn{
}
.form-list__field{
position: relative;
}
}
/*.form-list__error-message {
opacity: 1;
}
.input-validation-error {
border-color: #e4002b;
color: #e4002b;
}*/
}
No notes defined.