<div class="form-list-flex">
<ul class="form-list-flex__list">
<li class="form-list-flex__list__item width-25"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__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="randomInputId211" 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="form-list-flex__list__item width-25"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field required">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Apellido</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_surname
" id="randomInputId212" type="text" name="" title="Surname" autocomplete="" placeholder="¿Cómo te apellidas?" />
<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="form-list-flex__list__item width-25"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__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="randomInputId221" 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="form-list-flex__list__item width-25"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__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="randomInputId311" 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="form-list-flex__list__item width-25"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__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="randomInputId311" 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="form-list-flex__list__item width-75"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__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="randomInputId311" 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="form-list-flex__list__item width-33"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__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="randomInputId311" 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="form-list-flex__list__item width-33"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__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="randomInputId311" 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="form-list-flex__list__item width-33"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__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="randomInputId311" 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="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__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="randomInputId311" 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="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__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="randomInputId311" 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="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__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="randomInputId311" 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="form-list-flex__list__item width-25"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__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="randomInputId311" 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="form-list-flex__list__item width-25"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__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="randomInputId311" 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="form-list-flex__list__item"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__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="randomInputId214" 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="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__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="randomInputId214" 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="form-list-flex__list__item width-50">
<div class="wrap-double">
<div class="form-list-flex__field ">
<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="randomInputId216" 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>
<div class="form-list-flex__field ">
<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="randomInputId216" 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>
</div>
</li>
<li class="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__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="randomInputId214" 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="form-list-flex__list__item width-50">
<div class="wrap-double">
<div class="form-list-flex__field width-25 ">
<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="randomInputId216" 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>
<div class="form-list-flex__field width-75 ">
<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="randomInputId216" 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>
</div>
</li>
<li class="form-list-flex__list__item width-50"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__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="randomInputId214" 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="form-list-flex__list__item width-50">
<div class="wrap-double">
<div class="form-list-flex__field width-33 ">
<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="randomInputId216" 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>
<div class="form-list-flex__field width-66 ">
<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="randomInputId216" 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>
</div>
</li>
</ul>
</div>
<div class="form-list-flex">
<ul class="form-list-flex__list">
{{#each this.form-list-flex-item}}
{{#if this.isDouble}}
<li class="form-list-flex__list__item{{#if percent}} width-{{percent}}{{/if}}">
<div class="wrap-double">
<div class="form-list-flex__field{{#if percent1}} width-{{percent1}}{{/if}}{{#if this.distinguisher-1}} form-list-flex__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.alert-1}}
{{> @alert alert-1 }}
{{else if this.form-radio-group-1}}
{{> @form-radio-group this.form-radio-group-1 }}
{{else if this.form-checkbox-group-1}}
{{> @form-checkbox-group this.form-checkbox-group-1 }}
{{else if this.form-select-1}}
{{> @form-select this.form-select-1 }}
{{else if this.form-range-slider-1}}
{{> @form-range-slider this.form-range-slider-1 }}
{{else if this.form-switch-1}}
{{> @form-switch this.form-switch-1 }}
{{else if this.form-input-1}}
{{> @form-input this.form-input-1 }}
{{else if this.form-textarea-1}}
{{> @form-textarea this.form-textarea-1 }}
{{else if this.form-search-1}}
{{> @form-search this.form-search-1 }}
{{else if this.label-m-1}}
<div class="prelabel{{#if heading}} heading{{/if}}">
{{> @label-m label-m-1 }}
{{> @tooltip tooltip-1 }}
</div>
{{else if this.title-1}}
<div class="prelabel{{#if heading}} heading{{/if}}">
{{> @title title-1 }}
</div>
{{else}}
{{> @form-fieldset this.form-fieldset-1 }}
{{/if}}
</div>
<div class="form-list-flex__field{{#if percent2}} width-{{percent2}}{{/if}}{{#if this.distinguisher-2}} form-list-flex__field_{{ 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.alert-2}}
{{> @alert alert-2 }}
{{else if this.form-radio-group-2}}
{{> @form-radio-group this.form-radio-group-2 }}
{{else if this.form-checkbox-group-2}}
{{> @form-checkbox-group this.form-checkbox-group-2 }}
{{else if this.form-select-2}}
{{> @form-select this.form-select-2 }}
{{else if this.form-range-slider-2}}
{{> @form-range-slider this.form-range-slider-2 }}
{{else if this.form-switch-2}}
{{> @form-switch this.form-switch-2 }}
{{else if this.form-input-2}}
{{> @form-input this.form-input-2 }}
{{else if this.form-textarea-2}}
{{> @form-textarea this.form-textarea-2 }}
{{else if this.form-search-2}}
{{> @form-search this.form-search-2 }}
{{else if this.label-m-2}}
<div class="prelabel{{#if heading}} heading{{/if}}">
{{> @label-m label-m-2 }}
{{> @tooltip tooltip-2 }}
</div>
{{else if this.title-2}}
<div class="prelabel{{#if heading}} heading{{/if}}">
{{> @title title-2 }}
</div>
{{else}}
{{> @form-fieldset this.form-fieldset-2 }}
{{/if}}
</div>
</div>
</li>
{{else}}
<li class="form-list-flex__list__item{{#if percent}} width-{{percent}}{{/if}}{{#if break}} break{{/if}}"> <!-- La clase break sirve para meter un corte sin espacios dentro del flex (CA R.) -->
<div class="form-list-flex__field{{#if this.distinguisher}} form-list-flex__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.alert}}
{{> @alert alert }}
{{else if this.form-radio-group}}
{{> @form-radio-group this.form-radio-group }}
{{else if this.form-checkbox-group}}
{{> @form-checkbox-group this.form-checkbox-group }}
{{else if this.form-select}}
{{> @form-select this.form-select }}
{{else if this.form-range-slider}}
{{> @form-range-slider this.form-range-slider }}
{{else if this.form-switch}}
{{> @form-switch this.form-switch }}
{{else if this.form-input}}
{{> @form-input this.form-input}}
{{else if this.form-textarea}}
{{> @form-textarea this.form-textarea }}
{{else if this.form-search}}
{{> @form-search this.form-search }}
{{else if this.label-m}}
<div class="prelabel{{#if heading}} heading{{/if}}">
{{> @label-m label-m }}
{{> @tooltip tooltip }}
</div>
{{else if this.title}}
<div class="prelabel{{#if heading}} heading{{/if}}">
{{> @title title }}
</div>
{{else if this.form-fieldset}}
{{> @form-fieldset this.form-fieldset }}
{{else}}
{{/if}}
</div>
</li>
{{/if}}
{{/each}}
</ul>
</div>
{
"form-list-flex-item": [
{
"isRequired": true,
"percent": 25,
"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": "randomInputId211",
"type": "text",
"title": "Name"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"percent": 25,
"form-fieldset": {
"field-top": {
"label": {
"text": "Apellido"
},
"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 apellidas?",
"distinguisher": "surname",
"id": "randomInputId212",
"type": "text",
"title": "Surname"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"percent": 25,
"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": "randomInputId221",
"type": "text",
"title": "Name"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"percent": 25,
"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": "randomInputId311",
"type": "text",
"title": "Name"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"percent": 25,
"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": "randomInputId311",
"type": "text",
"title": "Name"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"percent": 75,
"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": "randomInputId311",
"type": "text",
"title": "Name"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"percent": 33,
"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": "randomInputId311",
"type": "text",
"title": "Name"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"percent": 33,
"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": "randomInputId311",
"type": "text",
"title": "Name"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"percent": 33,
"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": "randomInputId311",
"type": "text",
"title": "Name"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"percent": 50,
"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": "randomInputId311",
"type": "text",
"title": "Name"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"percent": 50,
"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": "randomInputId311",
"type": "text",
"title": "Name"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"percent": 50,
"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": "randomInputId311",
"type": "text",
"title": "Name"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"percent": 25,
"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": "randomInputId311",
"type": "text",
"title": "Name"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"percent": 25,
"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": "randomInputId311",
"type": "text",
"title": "Name"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"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": "randomInputId214",
"type": "text",
"title": "Name"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"percent": 50,
"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": "randomInputId214",
"type": "text",
"title": "Name"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isDouble": true,
"isRequired": true,
"percent": 50,
"form-fieldset-1": {
"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": "randomInputId216",
"type": "text",
"title": "Name"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-fieldset-2": {
"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": "randomInputId216",
"type": "text",
"title": "Name"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"percent": 50,
"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": "randomInputId214",
"type": "text",
"title": "Name"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isDouble": true,
"isRequired": true,
"percent": 50,
"percent1": 25,
"percent2": 75,
"form-fieldset-1": {
"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": "randomInputId216",
"type": "text",
"title": "Name"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-fieldset-2": {
"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": "randomInputId216",
"type": "text",
"title": "Name"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"percent": 50,
"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": "randomInputId214",
"type": "text",
"title": "Name"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isDouble": true,
"isRequired": true,
"percent": 50,
"percent1": 33,
"percent2": 66,
"form-fieldset-1": {
"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": "randomInputId216",
"type": "text",
"title": "Name"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-fieldset-2": {
"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": "randomInputId216",
"type": "text",
"title": "Name"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
}
]
}
.form-list-flex {
width: 100%;
&__list { /* ul */
display: flex;
flex-wrap: wrap;
width: calc(100% + 32px);
margin: 0 -16px;
&__item { /* li */
width: calc(100% - 32px);
margin: 0 16px;
padding-bottom: 12px; /* para alcanzar los 32px de margen inferior bajo los campos que ya tienen 20px. (CA R.)*/
@media (--viewport-ms-max) {
padding-bottom: 10px;
}
@media (--viewport-xs-max) {
padding-bottom: 4px;
}
&.width-75 {
width: calc(75% - 32px);
@media (--viewport-ms-max) {width: calc(50% - 32px);}
@media (--viewport-xs-max) {width: calc(100% - 32px);}
}
&.width-50 {
width: calc(50% - 32px);
@media (--viewport-ms-max) {width: calc(50% - 32px);}
@media (--viewport-xs-max) {width: calc(100% - 32px);}
}
&.width-33 {
width: calc(33.3% - 32px);
@media (--viewport-ms-max) {width: calc(50% - 32px);}
@media (--viewport-xs-max) {width: calc(100% - 32px);}
}
&.width-25 {
width: calc(25% - 32px);
@media (--viewport-ms-max) {width: calc(50% - 32px);}
@media (--viewport-xs-max) {width: calc(100% - 32px);}
}
.wrap-double {
display: flex;
column-gap: 32px;
.form-list-flex__field {
width: calc(50% - 16px);
&.width-75 {
width: 75%;
@media (--viewport-ms-max) {width: 66.6%}
}
&.width-25 {
width: 25%;
@media (--viewport-ms-max) {width: 33.3%}
}
&.width-33 {
width: 33.3%;
}
&.width-66 {
width: 66.6%;
}
}
}
&.break{
padding: 0;
margin: 0;
}
}
}
}
No notes defined.