UCI

Card result: Maximos 

<div class="card-result">
    <div class="card-result__title">
        <h2 class="
                title-l
                
                
                
                
            ">

            Tu cuota mensual

        </h2>
    </div>
    <ul class="items">
        <li class="card-result__item " id="periodo-gracia">
            <div class="title-with-tooltip">
                <p id="resultado-cuota-periodo-gracia-title" class="
    title-s
    
">Los XX primeros meses durante el período de carencia</p>

                <!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
                <div id="tooltip-title-resultado" 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">
                            <h4 class="
                    title-s
                    
                ">Título Tooltip</h4>
                            <div class="
                    bodycopy-s
                    
                    
                    
                    
                ">

                                Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.

                            </div> <a class="link
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            " href="#">
                                <span>Enlace</span>
                            </a>

                        </div>
                    </div>
                </div>

            </div>
            <ul class="card-result__item-number">
                <li>
                    <p id="resultado-cuota-periodo-gracia-cifra" class="
    title-xl
">dffdsff</p>

                </li>
                <li>
                    <div id="resultado-cuota-segundo-periodo-symbol" class="
    bodycopy-l
    
    
    
">€/mes</div>
                </li>
                <li>
                    <div class="bodycopy-xs
    
    
    ">
                        por vecino
                    </div>
                </li>
            </ul>
            <ul class="card-result__item-clarification">
                <li>
                    <div class="
    bodycopy-m
    
    
    
" id="resultado-cuota-periodo-gracia-cifra-clarification">
                        dafadfd
                    </div>
                </li>
                <li>
                    <h4 id="resultado-cuota-inicial-symbol-clarification" class="
    title-s
    
">€/mes</h4>
                </li>
                <li>
                    <div class="bodycopy-xs
    
    
    ">
                        por comunidad
                    </div>
                </li>
            </ul>
        </li>
        <li class="card-result__item " id="resto-periodo-gracia">
            <div class="title-with-tooltip">
                <p id="resultado-cuota-resto-periodo-gracia-title" class="
    title-s
    
">Los próximos XX meses hasta realizar la amortización anticipada</p>

                <!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
                <div id="tooltip-title-resultado2" 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">
                            <h4 class="
                    title-s
                    
                ">Título Tooltip</h4>
                            <div class="
                    bodycopy-s
                    
                    
                    
                    
                ">

                                Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.

                            </div> <a class="link
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            " href="#">
                                <span>Enlace</span>
                            </a>

                        </div>
                    </div>
                </div>

            </div>
            <ul class="card-result__item-number">
                <li>
                    <p id="resultado-cuota-resto-periodo-gracia-cifra" class="
    title-xl
">dfsfsdf</p>

                </li>
                <li>
                    <div id="resultado-cuota-segundo-periodo-symbol" class="
    bodycopy-l
    
    
    
">€/mes</div>
                </li>
                <li>
                    <div class="bodycopy-xs
    
    
    ">
                        por vecino
                    </div>
                </li>
            </ul>
            <ul class="card-result__item-clarification">
                <li>
                    <div class="
    bodycopy-m
    
    
    
" id="resultado-cuota-resto-periodo-gracia-cifra-clarification">
                        dfsfs
                    </div>
                </li>
                <li>
                    <h4 id="resultado-cuota-inicial-symbol-clarification" class="
    title-s
    
">€/mes</h4>
                </li>
                <li>
                    <div class="bodycopy-xs
    
    
    ">
                        por comunidad
                    </div>
                </li>
            </ul>
        </li>
        <li class="card-result__item " id="resto-amortizacion">
            <div class="title-with-tooltip">
                <p id="resultado-cuota-resto-title" class="
    title-s
    
">El resto del período tras la amortización anticipada</p>

                <!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
                <div id="tooltip-title-resultado3" 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">
                            <h4 class="
                    title-s
                    
                ">Título Tooltip</h4>
                            <div class="
                    bodycopy-s
                    
                    
                    
                    
                ">

                                Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.

                            </div> <a class="link
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            " href="#">
                                <span>Enlace</span>
                            </a>

                        </div>
                    </div>
                </div>

            </div>
            <ul class="card-result__item-number">
                <li>
                    <p id="resultado-cuota-resto-amortizacion-cifra" class="
    title-xl
">dsfdfd</p>

                </li>
                <li>
                    <div id="resultado-cuota-segundo-periodo-symbol" class="
    bodycopy-l
    
    
    
">€/mes</div>
                </li>
                <li>
                    <div class="bodycopy-xs
    
    
    ">
                        por vecino
                    </div>
                </li>
            </ul>
            <ul class="card-result__item-clarification">
                <li>
                    <div class="
    bodycopy-m
    
    
    
" id="resultado-cuota-resto-amortizacion-cifra-clarification">
                        dsfdfdf
                    </div>
                </li>
                <li>
                    <h4 id="resultado-cuota-inicial-symbol-clarification" class="
    title-s
    
">€/mes</h4>
                </li>
                <li>
                    <div class="bodycopy-xs
    
    
    ">
                        por comunidad
                    </div>
                </li>
            </ul>
        </li>
    </ul>
    <ul class="card-result__taetin">
        <li class="tae">
            <ul>
                <li>
                    <div class="
    bodycopy-m
    
    
    
">
                        TAE
                    </div>

                    <!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
                    <div id="tooltip-tae" 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">
                                <h4 class="
                    title-s
                    
                ">Título Tooltip</h4>
                                <div class="
                    bodycopy-s
                    
                    
                    
                    
                ">

                                    Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.

                                </div> <a class="link
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            " href="#">
                                    <span>Enlace</span>
                                </a>

                            </div>
                        </div>
                    </div>

                </li>
                <li>
                    <p id="tae-cifra" class="
    title-xl
">4,85%</p>

                </li>
            </ul>
        </li>
        <li>
            <ul>
                <li><label class="label-m" for="">TIN</label>

                    <!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
                    <div id="tooltip-tin" 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">
                                <h4 class="
                    title-s
                    
                ">Título Tooltip</h4>
                                <div class="
                    bodycopy-s
                    
                    
                    
                    
                ">

                                    Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.

                                </div> <a class="link
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            " href="#">
                                    <span>Enlace</span>
                                </a>

                            </div>
                        </div>
                    </div>

                </li>
                <li>
                    <div class="
    bodycopy-m
    
    
    
" id="tin-cifra">
                        4,75%
                    </div>
                </li>
            </ul>
        </li>
    </ul>
    <ul class="card-result__additional">
        <li>
            <ul>
                <li><label class="label-m" for="">Comisión de apertura financiada (1%)</label>

                    <!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
                    <div id="tooltip-comision-apertura" 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ítulo Tooltip</p>
                                <div class="
                    bodycopy-s
                    
                    
                    
                    
                ">

                                    Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.

                                </div> <a class="link
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            " href="#">
                                    <span>Enlace</span>
                                </a>

                            </div>
                        </div>
                    </div>

                </li>

                <li>
                    <div class="
    bodycopy-m
    
    
    
" id="comision-apertura-cifra">
                        wqdweq
                    </div>
                </li>
            </ul>
        </li>
        <li>
            <ul>
                <li><label class="label-m" for="">Gastos de formalización</label>

                    <!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
                    <div id="tooltip-gastos-formalizacion" 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ítulo Tooltip</p>
                                <div class="
                    bodycopy-s
                    
                    
                    
                    
                ">

                                    Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.

                                </div> <a class="link
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            " href="#">
                                    <span>Enlace</span>
                                </a>

                            </div>
                        </div>
                    </div>

                </li>

                <li>
                    <div class="
    bodycopy-m
    
    
    
" id="gastos-formalizacion-cifra">
                        1.000,00€
                    </div>
                </li>
            </ul>
        </li>
        <li>
            <ul>
                <li><label class="label-m" for="">IMPORTE TOTAL FINANCIADO</label>

                    <!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
                    <div id="tooltip-gastos-formalizacion" 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ítulo Tooltip</p>
                                <div class="
                    bodycopy-s
                    
                    
                    
                    
                ">

                                    Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.

                                </div> <a class="link
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            " href="#">
                                    <span>Enlace</span>
                                </a>

                            </div>
                        </div>
                    </div>

                </li>

                <li>
                    <div class="
    bodycopy-m
    
    
    
" id="total-financiado-cifra">
                        rerewew
                    </div>
                </li>
            </ul>
        </li>
    </ul>
    <ul class="card-result__additional2">
        <li><label class="label-m" for="">OTRAS COMISIONES</label>
        </li>
        <li>
            <ul>
                <li><label class="label-m" for="">comisión de amortización</label>

                    <!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
                    <div id="tooltip-comision-amortizacion" 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ítulo Tooltip</p>
                                <div class="
                    bodycopy-s
                    
                    
                    
                    
                ">

                                    Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.

                                </div> <a class="link
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            " href="#">
                                    <span>Enlace</span>
                                </a>

                            </div>
                        </div>
                    </div>

                </li>

                <li>
                    <div class="
    bodycopy-m
    
    
    
" id="comision-amortizacion-cifra">
                        dsdsasds
                    </div>
                </li>
            </ul>
        </li>
    </ul>
    <div class="wrap-btn">
        <a class="btn 
                
                 
                
                
                
                
                
                
                
                
                
                " href="https://uci.com/es/solicita-tu-hipoteca/" id="">
            Solicita tu préstamo
        </a>
        <a class="link
                    
                    
                    
                    
                    
                    link_has-icon link_has-icon_after
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    " href="#">
            <span>Descargar tu informe en PDF</span>
            <svg class="icon icon-download      icon-after">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#download"></use>
            </svg>
        </a>

    </div>
</div>
 
<div class="card-result{{#if isError}} error{{/if}}">
    {{#if isError}}
    {{ render '@icon--56-alert' }}
    {{/if}}
    {{#if isError}}
    <div class="card-result__title">
        {{> @title-m title }}
    </div>
    {{else}}
        {{#if title}}
        <div class="card-result__title">
            {{#if img-title}}
            <span class="wrap-img"><img src="{{ img-title }}"
                    alt="{{ alt-img-title }}"></span>
            {{/if}}
            {{#if antetitle}}
            {{> @label antetitle }}
            {{/if}}
            {{> @title-l title }}
            {{#if subtitle}}
            {{> @bodycopy-s subtitle }}
            {{/if}}
        </div>
        {{/if}}
    {{/if}}
    {{#if form-radio-group}}
    <div class="card-result__form-radio-group">
        {{> @form-radio-group form-radio-group }}
    </div>
    {{/if}}
    {{#if isError}}
    <ul>
        {{#each item-error}}
        <li>{{> @bodycopy-m txt-error }}</li>
        {{/each}}
    </ul>
    {{else}}
        {{#if item}}
        <ul class="items">
            {{#each item}}
            <li class="card-result__item {{extraClass}}" id="{{id}}">
                {{#if title-item}}
                <div class="title-with-tooltip">{{> @title-s title-item }}{{#if tooltip-title}}{{> @tooltip tooltip-title}}{{/if}}
                </div>
                {{/if}}
                {{#if number-item}}
                <ul class="card-result__item-number">
                    <li>{{> @title-xl number-item }}</li>
                    {{#if number-item-symbol}}<li>{{> @bodycopy-l number-item-symbol }}</li>{{/if}}
                    {{#if number-item-symbol2}}<li>{{> @bodycopy-xs number-item-symbol2 }}</li>{{/if}}
                </ul>
                {{/if}}
                {{#if tin-item-number}}
                <ul>
                    <li>{{> @label-m tin-item-text}}{{#if tin-tooltip}}{{> @tooltip tin-tooltip }}{{/if}}</li>
                    <li>{{> @bodycopy-m tin-item-number}}</li>
                </ul>
                {{/if}}
                {{#if text-clarification}}
                <ul class="card-result__item-clarification">
                    {{#if number-clarification}}<li>{{> @bodycopy-m number-clarification }}</li>
                    <li>{{> @title-s symbol-clarification }}</li>{{/if}}
                    <li>{{> @bodycopy-xs text-clarification }}</li>
                </ul>
                {{/if}}
            </li>
            {{/each}}
        </ul>
        {{/if}}
    {{/if}}
    {{#if tae-item-number}}
    <ul class="card-result__taetin">
        <li class="tae">
            <ul>
                <li>{{> @bodycopy-m tae-item-text}}{{#if tae-tooltip}}{{> @tooltip tae-tooltip }}{{/if}}</li>
                <li>{{> @title-xl tae-item-number}}</li>
            </ul>
        </li>
        {{#if tin-item-number}}
        <li>
            <ul>
                <li>{{> @label-m tin-item-text}}{{#if tin-tooltip}}{{> @tooltip tin-tooltip }}{{/if}}</li>
                <li>{{> @bodycopy-m tin-item-number}}</li>
            </ul>
        </li>
        {{/if}}
        {{#if euribor-item-number}}
        <li>
            <ul>
                <li>{{> @label-m euribor-item-text }}</li>
                <li>{{> @bodycopy-m euribor-item-number }}</li>
            </ul>
        </li>
        {{/if}}
        {{#if tin-tae-link}}
        <li class="tin-tae-link">
            {{> @link tin-tae-link }}</li>
        {{/if}}
        {{#if teFinanciamos}}
        <li class="card-result__square">
            {{> @bodycopy-m teFinanciamosText }}
            {{> @title-m teFinanciamos }}
        </li>
        {{/if}}
    </ul>
    {{/if}}
    {{#if additional-item}}
    <ul class="card-result__additional">
        {{#if additional-item-tit}}
        <li class="tit">{{> @bodycopy-m additional-item-tit }}{{> @link additional-item-tit-link }}</li>
        {{/if}}
        {{#each additional-item}}
        <li>
            <ul>
                <li>{{> @label-m additional-item-text }}{{#if tooltip}}{{> @tooltip tooltip }}{{/if}}</li>
                
                <li>{{> @bodycopy-m additional-item-number }}</li>
            </ul>
        </li>
        {{/each}}
    </ul>
    {{/if}}
    {{#if additional-item2}}
    <ul class="card-result__additional2">
        <li>{{> @label-m additional-item2-tit }}</li>
        {{#each additional-item2}}
        <li>
            <ul>
                <li>{{> @label-m additional-item-text }}{{#if tooltip}}{{> @tooltip tooltip }}{{/if}}</li>
                
                <li>{{> @bodycopy-m additional-item-number }}</li>
            </ul>
        </li>
        {{/each}}
    </ul>
    {{/if}}
    {{#if btn}}
    <div class="wrap-btn">
        {{> @btn btn }}
        {{#if download-link}}
        {{> @link download-link }}
        {{/if}}
    </div>
    {{/if}}
</div>
 
{
  "title": {
    "text": "Tu cuota mensual"
  },
  "item": [
    {
      "id": "periodo-gracia",
      "extraClass": "",
      "title-item": {
        "id": "resultado-cuota-periodo-gracia-title",
        "isP": true,
        "text": "Los XX primeros meses durante el período de carencia"
      },
      "tooltip-title": {
        "id": "tooltip-title-resultado",
        "isFlex": true,
        "title": {
          "text": "Título Tooltip"
        },
        "bodycopy": {
          "text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
        },
        "link": {
          "href": "#",
          "text": "Enlace"
        }
      },
      "number-item": {
        "id": "resultado-cuota-periodo-gracia-cifra",
        "isP": true,
        "text": "dffdsff"
      },
      "number-item-symbol": {
        "id": "resultado-cuota-segundo-periodo-symbol",
        "text": "€/mes"
      },
      "number-item-symbol2": {
        "id": "resultado-cuota-segundo-periodo-symbol2",
        "text": "por vecino"
      },
      "number-clarification": {
        "id": "resultado-cuota-periodo-gracia-cifra-clarification",
        "text": "dafadfd"
      },
      "symbol-clarification": {
        "id": "resultado-cuota-inicial-symbol-clarification",
        "text": "€/mes"
      },
      "text-clarification": {
        "id": "resultado-cuota-periodo-gracia-txt-clarification",
        "text": "por comunidad"
      }
    },
    {
      "id": "resto-periodo-gracia",
      "extraClass": "",
      "title-item": {
        "id": "resultado-cuota-resto-periodo-gracia-title",
        "isP": true,
        "text": "Los próximos XX meses hasta realizar la amortización anticipada"
      },
      "tooltip-title": {
        "id": "tooltip-title-resultado2",
        "isFlex": true,
        "title": {
          "text": "Título Tooltip"
        },
        "bodycopy": {
          "text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
        },
        "link": {
          "href": "#",
          "text": "Enlace"
        }
      },
      "number-item": {
        "id": "resultado-cuota-resto-periodo-gracia-cifra",
        "isP": true,
        "text": "dfsfsdf"
      },
      "number-item-symbol": {
        "id": "resultado-cuota-segundo-periodo-symbol",
        "text": "€/mes"
      },
      "number-item-symbol2": {
        "id": "resultado-cuota-segundo-periodo-symbol2",
        "text": "por vecino"
      },
      "number-clarification": {
        "id": "resultado-cuota-resto-periodo-gracia-cifra-clarification",
        "text": "dfsfs"
      },
      "symbol-clarification": {
        "id": "resultado-cuota-inicial-symbol-clarification",
        "text": "€/mes"
      },
      "text-clarification": {
        "id": "resultado-cuota-segundo-periodo-txt-clarification",
        "text": "por comunidad"
      }
    },
    {
      "id": "resto-amortizacion",
      "extraClass": "",
      "title-item": {
        "id": "resultado-cuota-resto-title",
        "isP": true,
        "text": "El resto del período tras la amortización anticipada"
      },
      "tooltip-title": {
        "id": "tooltip-title-resultado3",
        "isFlex": true,
        "title": {
          "text": "Título Tooltip"
        },
        "bodycopy": {
          "text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
        },
        "link": {
          "href": "#",
          "text": "Enlace"
        }
      },
      "number-item": {
        "id": "resultado-cuota-resto-amortizacion-cifra",
        "isP": true,
        "text": "dsfdfd"
      },
      "number-item-symbol": {
        "id": "resultado-cuota-segundo-periodo-symbol",
        "text": "€/mes"
      },
      "number-item-symbol2": {
        "id": "resultado-cuota-segundo-periodo-symbol2",
        "text": "por vecino"
      },
      "number-clarification": {
        "id": "resultado-cuota-resto-amortizacion-cifra-clarification",
        "text": "dsfdfdf"
      },
      "symbol-clarification": {
        "id": "resultado-cuota-inicial-symbol-clarification",
        "text": "€/mes"
      },
      "text-clarification": {
        "id": "resultado-cuota-resto-amortizacion-cifra-clarification",
        "text": "por comunidad"
      }
    }
  ],
  "tae-item-text": {
    "text": "TAE"
  },
  "tae-tooltip": {
    "id": "tooltip-tae",
    "isFlex": true,
    "title": {
      "text": "Título Tooltip"
    },
    "bodycopy": {
      "text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
    },
    "link": {
      "href": "#",
      "text": "Enlace"
    }
  },
  "tae-item-number": {
    "id": "tae-cifra",
    "text": "4,85%",
    "isP": true
  },
  "tin-item-text": {
    "text": "TIN"
  },
  "tin-tooltip": {
    "id": "tooltip-tin",
    "isFlex": true,
    "title": {
      "text": "Título Tooltip"
    },
    "bodycopy": {
      "text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
    },
    "link": {
      "href": "#",
      "text": "Enlace"
    }
  },
  "tin-item-number": {
    "id": "tin-cifra",
    "text": "4,75%"
  },
  "additional-item": [
    {
      "additional-item-text": {
        "text": "Comisión de apertura financiada (1%)"
      },
      "tooltip": {
        "id": "tooltip-comision-apertura",
        "isFlex": true,
        "title": {
          "text": "Título Tooltip",
          "isP": true
        },
        "bodycopy": {
          "text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
        },
        "link": {
          "href": "#",
          "text": "Enlace"
        }
      },
      "additional-item-number": {
        "id": "comision-apertura-cifra",
        "text": "wqdweq"
      }
    },
    {
      "additional-item-text": {
        "text": "Gastos de formalización"
      },
      "tooltip": {
        "id": "tooltip-gastos-formalizacion",
        "isFlex": true,
        "title": {
          "text": "Título Tooltip",
          "isP": true
        },
        "bodycopy": {
          "text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
        },
        "link": {
          "href": "#",
          "text": "Enlace"
        }
      },
      "additional-item-number": {
        "id": "gastos-formalizacion-cifra",
        "text": "1.000,00€"
      }
    },
    {
      "additional-item-text": {
        "text": "IMPORTE TOTAL FINANCIADO"
      },
      "tooltip": {
        "id": "tooltip-gastos-formalizacion",
        "isFlex": true,
        "title": {
          "text": "Título Tooltip",
          "isP": true
        },
        "bodycopy": {
          "text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
        },
        "link": {
          "href": "#",
          "text": "Enlace"
        }
      },
      "additional-item-number": {
        "id": "total-financiado-cifra",
        "text": "rerewew"
      }
    }
  ],
  "additional-item2-tit": {
    "text": "OTRAS COMISIONES"
  },
  "additional-item2": [
    {
      "additional-item-text": {
        "text": "comisión de amortización"
      },
      "tooltip": {
        "id": "tooltip-comision-amortizacion",
        "isFlex": true,
        "title": {
          "text": "Título Tooltip",
          "isP": true
        },
        "bodycopy": {
          "text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
        },
        "link": {
          "href": "#",
          "text": "Enlace"
        }
      },
      "additional-item-number": {
        "id": "comision-amortizacion-cifra",
        "text": "dsdsasds"
      }
    }
  ],
  "btn": {
    "text": "Solicita tu préstamo",
    "href": "https://uci.com/es/solicita-tu-hipoteca/"
  },
  "download-link": {
    "href": "#",
    "text": "Descargar tu informe en PDF",
    "icon-after": {
      "name": "download",
      "isAfter": true
    }
  }
}
  • Content: 
    .card-result {
    display: flex;
    flex-direction: column;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    background-color: var(--color-tertiary-brand);
    padding: 32px;

    @media (--viewport-sm-max) {
        padding: 32px 16px;
    }

    &__title {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .tooltip {
            margin-bottom: -60px;
        }

        img {
            margin-bottom: 16px;
        }

        .label {
            margin-bottom: 16px;
        }

        .bodycopy-s {
            margin-top: 16px;
            text-align: center;
        }

    }

    &__form-radio-group {
        display: flex;
        justify-content: center;
        margin-top: 16px;

        .form-radio-group {
            margin-bottom: 0;

            .field-top {
                display: none;
            }

            ul {
                .radio-group__item {
                    margin-right: 16px;

                    &:last-child {
                        margin-right: 0;
                    }
                }
            }
        }
    }

    &__square {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 16px 0 0;
        border-top: solid 1px var(--color-border-accent-bold);
        border-bottom: solid 1px var(--color-border-accent-bold);
        padding: 16px 0 10px;

        .title-m {
            color: var(--new-color-text);
        }
    }

    &__item {
        margin-top: 32px;
        text-align: center;

        .title-s {
            color: var(--color-secondary-brand);
        }

        .title-xl {
            color: var(--color-text-primary);
        }

        .title-with-tooltip {
            display: block;
            text-align: center;
            margin: 0 10% 16px;

            .title-s {
                display: inline;
            }

            .tooltip {
                top: 22px;
                right: 0;
                left: 8px;
                display: inline;
            }
        }
    }

    &__item-number {
        display: flex;
        align-items: flex-end;
        justify-content: center;

        li {
            padding: 0 3px;
            line-height: normal;

            .bodycopy-s {
                padding-bottom: 11px;
            }
        }
    }

    &__item-clarification {
        display: flex;
        align-items: center;
        justify-content: center;

        li {
            padding: 0 3px;
            line-height: normal;
        }
    }

    &__taetin {
        display: flex;
        flex-direction: column;
        border-bottom: solid 1px var(--color-secondary-brand);
        padding: 40px 0 0;
        margin-bottom: 20px;

        li.tae {
            .bodycopy-m,
            .title-xl {
                color: var(--color-text);
                line-height: 34px;
            }
        }

        ul {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;

            li {
                margin-bottom: 20px;
                line-height: normal;

                .tooltip {
                    top:-8px;
                    right:-8px;
                }

                &:first-child{
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    .bodycopy-m, .label-m{
                        min-width: 28px; /* para alinear los tooltips como en diseño (CA)*/
                    }
                }
            }
        }
    }

    &__additional {
        display: flex;
        flex-direction: column;
        margin-bottom: 0;

        li.tit {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-bottom: 20px;
            align-items: center;
            .bodycopy-m {
                color: var(--color-text-accent);
            }

            .link_inline {
                color: var(--color-text-link-secondary);
            }
        }

        ul {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            width: 100%;

            li {
                display: flex;
                margin-bottom: 20px;
                line-height: normal;

                /*&:nth-last-child(2) {
                    flex-shrink: 1;
                }*/
                &:last-of-type {
                    white-space: nowrap;
                    text-align: right;
                    /*flex-grow: 1;*/
                }

               /*@media (--viewport-xs-max) {
                    &:first-of-type {
                        max-width: 40%;
                    }
                }*/
            }

            .tooltip {
                right: unset;
                left: unset;
                top: unset;
                display: inline-flex;
                margin-right: 32px;
                margin-left: -12px;
                margin-bottom: -20px;
            }
        }

    }

    &.error {
        justify-content: center;
        text-align: center;
        padding: 56px 32px;
        align-items: center;
        background-color: var(--color-background-accent);

        @media (--viewport-ms-max) {
            padding: 40px 60px;
        }

        @media (--viewport-xs-max) {
            padding: 40px;
        }

        .title-m {
            margin-bottom: 32px;
        }

        .icon {
            width: 40px;
            height: 40px;
            margin-bottom: 32px;
        }
    }

    &.fade-out {
        opacity: .5;
    }

    &__item {
        margin-top: 32px;
        text-align: center;

        .title-s {
            color: var(--color-secondary-brand);
        }

        .title-xl {
            color: var(--color-text-primary);
        }

        .title-with-tooltip {
            display: block;
            text-align: center;
            margin: 0 10% 16px;

            .title-s {
                display: inline;
            }

            .tooltip {
                top: 22px;
                right: 0;
                left: 8px;
                display: inline;
            }
        }
    }

    &__item-number {
        display: flex;
        align-items: flex-end;
        justify-content: center;

        li {
            padding: 0 3px;
            line-height: normal;

            .bodycopy-xs {
                padding-bottom: 13px;
            }

            .title-m {
                padding-bottom: 9px;
                color: var(--color-text-primary);
            }

            .bodycopy-l {
                padding-bottom: 9px;
            }

            @media (--viewport-md-max) {
                .bodycopy-xs {
                    padding-bottom: 10px;
                }

                .bodycopy-l {
                    padding-bottom: 6px;
                }

                .title-m {
                    padding-bottom: 4px;
                }
            }

            @media (--viewport-sm-max) {
                .bodycopy-xs {
                    padding-bottom: 7px;
                }

                .bodycopy-l {
                    padding-bottom: 3px;
                }

                .title-m {
                    padding-bottom: 3px;
                }
            }

            @media (--viewport-ms-max) {
                .bodycopy-xs {
                    padding-bottom: 11px;
                }

                .bodycopy-l {
                    padding-bottom: 6px;
                }

                .title-m {
                    padding-bottom: 6px;
                }
            }

            @media (--viewport-xs-max) {
                .bodycopy-xs {
                    padding-bottom: 8px;
                }

                .bodycopy-l {
                    padding-bottom: 3px;
                }

                .title-m {
                    padding-bottom: 4px;
                }
            }
        }
    }

    &__item-clarification {
        display: flex;
        align-items: center;
        justify-content: center;

        li {
            padding: 0 3px;
            line-height: normal;

            .title-s {
                padding-bottom: -3px;
                color: var(--color-text-primary);
            }

            .bodycopy-xs {
                margin-bottom: -3px;
            }
        }
    }

    &__additional2 {
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
        border-top: solid 1px var(--color-secondary-brand);
        padding: 20px 0 0;

        li {
            &:first-of-type {
                margin-bottom: 20px;

                .label-m {
                    color: var(--color-text-subtle);
                }
            }
        }

        ul {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            width: 100%;

            li {
                display: flex;
                margin-bottom: 20px;
                line-height: normal;

                /*&:nth-last-child(2) {
                    flex-shrink: 1;
                }*/
                &:last-of-type {
                    white-space: nowrap;
                    text-align: right;
                    /*flex-grow: 1;*/
                }

               /*@media (--viewport-xs-max) {
                    &:first-of-type {
                        max-width: 40%;
                    }
                }*/
            }

            .tooltip {
                right: unset;
                left: unset;
                top: unset;
                display: inline-flex;
                margin-right: 32px;
                margin-left: -12px;
                margin-bottom: -20px;
            }
        }

    }

    &.fade-out {
        opacity: .5;
    }

    &__nav {
        display: flex;

        @media (--viewport-xs-max) {
            justify-content: space-between;
            padding: 0 20px;
        }

        &-back,
        &-forward {
            margin-top: 30px;
        }

        &-back {
            @media (--viewport-ms-min) {
                margin-right: 30px;
            }
        }
    }

    .wrap-btn{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        .icon{
            fill:var(--color-icon);
        }
    }
}
  • URL: /components/raw/card-result/card-result.css
  • Filesystem Path: src/02-molecules/card-result/card-result.css
  • Size: 10.5 KB

No notes defined.