UCI

Quota simulation summary: Lite 

<div class="quota-simulation-summary lite">
    <div class="quota-simulation-summary--head simple">
        <h3 class="
                title-m
                
                
                
                
            "></h3>
        <a class="link
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    " href="#">
            <span>Volver y cambiar datos</span>
        </a>

    </div>
    <div class="quota-simulation-summary--wrap">
        <div class="quota-simulation-summary--content">
            <div class="wrap">
                <div><svg class="icon icon-16_user     ">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_user"></use>
                    </svg>
                </div> <span class="caption-label">1 titular / 33 años / 2.000 € / sin prestamos activos</span>
            </div>
            <div class="wrap">
                <div><svg class="icon icon-16_home     ">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_home"></use>
                    </svg>
                </div> <span class="caption-label">MADRID / 320.000 € / VIVIENDA HABITUAL / SEGUNDA MANO</span>
            </div>
            <div class="wrap">
                <div><svg class="icon icon-16_savings     ">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_savings"></use>
                    </svg>
                </div> <span class="caption-label">financiación: 220.000 € / aportación: 100.000 / gastos e impuestos: 68.000 €</span>
            </div>
        </div>
    </div>
</div>
 
<div class="quota-simulation-summary{{#if lite}} lite{{/if}}{{#if btn}} withBtn{{/if}}{{#if link-btn}} withBtn{{/if}}">
    {{#if (or title link)}}
    <div class="quota-simulation-summary--head{{#if (xor title link)}} simple{{/if}}">
        {{> '@title-m' title}}
        {{> '@link' link}}
    </div>
    {{/if}}
    <div class="quota-simulation-summary--wrap">
    <div class="quota-simulation-summary--content">
        {{#each item}}
        <div class="wrap"><div>{{> '@icon' icon}}</div>{{> '@caption' text}}</div>
        {{/each}}
    </div>
    {{#if btn}}
    <div class="quota-simulation-summary--btn">
        {{> '@btn' btn}}
    </div>
    {{else if link-btn}}
    <div class="quota-simulation-summary--btn">
        {{> '@link' link-btn}}
    </div>
    {{/if}}
    </div>
</div>
 
{
  "title": false,
  "link": {
    "text": "Volver y cambiar datos",
    "href": "#"
  },
  "item": [
    {
      "text": {
        "text": "1 titular / 33 años / 2.000 € / sin prestamos activos",
        "type": "-label"
      },
      "icon": {
        "name": "16_user"
      }
    },
    {
      "text": {
        "text": "MADRID / 320.000 € / VIVIENDA HABITUAL / SEGUNDA MANO",
        "type": "-label"
      },
      "icon": {
        "name": "16_home"
      }
    },
    {
      "text": {
        "text": "financiación: 220.000 € / aportación:  100.000 / gastos e impuestos: 68.000 €",
        "type": "-label"
      },
      "icon": {
        "name": "16_savings"
      }
    }
  ],
  "lite": true
}
  • Content: 
    .quota-simulation-summary {
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: var(--color-background-accent);
    padding: 40px;

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

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

    &--head {
        display: flex;
        justify-content: space-between;
        margin-bottom: 40px;
        width: 100%;

        @media(--viewport-sm-max) {
            margin-bottom: 32px;
        }

        @media(--viewport-xs-max) {
            margin-bottom: 24px;
            gap: 24px;
            flex-direction: column-reverse;
        }
        &.simple{
            justify-content: flex-start;
        }
    }

    &--wrap{
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
        gap: 30px;

        @media(--viewport-sm-max) {
            flex-direction: column;
            align-items: flex-start;
        }
    }

    &--content {
        display: flex;
        flex-wrap: wrap;
        column-gap: 40px;
        row-gap: 16px;
        flex-direction: column;
        @media(--viewport-sm-max) {
            width: 100%;
        }

        .wrap {
            line-height: 0;

            div {
                display: inline;
            }

            .icon {
                fill: var(--color-icon-accent-bold);
                margin-right: 12px;
            }

            @media(--viewport-ms-max) {
                white-space: wrap;
                display: flex;
                align-items: center;
            }
        }
    }

    &.lite {
        padding: 0;
        background: none;

        .quota-simulation-summary--content {
            grid-column-gap: 16px;
            grid-row-gap: 16px;
        }
    }

    &.withBtn {
        display: flex;
        align-items: center;
        justify-content: space-between;

        @media(--viewport-sm-max) {
            flex-direction: column;
            align-items: flex-start;
            row-gap: 30px;
        }

        .quota-simulation-summary--content {
            .wrap {
                @media(--viewport-sm-max) {
                    white-space: wrap;
                    display: flex;
                    align-items: flex-start;
                }
            }
        }

        .quota-simulation-summary--btn {
            @media(--viewport-xs-max) {
                width: 100%;
            }

            .btn{
                @media(--viewport-xs-max) {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                }

                white-space: nowrap;

                .icon {
                    fill: var(--color-icon-accent-bold);
                }
            }

            .link {
                white-space: nowrap;
            }
        }
    }
}
  • URL: /components/raw/quota-simulation-summary/quota-simulation-summary.css
  • Filesystem Path: src/02-molecules/quota-simulation-summary/quota-simulation-summary.css
  • Size: 2.9 KB

No notes defined.