UCI

Tile figure price: Default 

<ul class="tile-figure-price">
    <li class="tile-figure-price__item">
        <div class="tile-figure-price__description">
            <div class="text-label-m">Precio de la vivienda</div>
        </div>
        <div class="tile-figure-price__figure">
            <div class="
    number-m
    
"><span>340.000</span></div>

            <span class="tile-figures-module__figure-sufix number-m">€</span>
        </div>
    </li>
    <li class="tile-figure-price__item">
        <div class="tile-figure-price__description">
            <div class="text-label-m">Cantidad solicitada</div>
        </div>
        <div class="tile-figure-price__figure">
            <div class="
    number-m
    
"><span>280.000</span></div>

            <span class="tile-figures-module__figure-sufix number-m">€</span>
        </div>
    </li>
    <li class="tile-figure-price__item">
        <div class="tile-figure-price__description">
            <div class="text-label-m">Aportación</div>
        </div>
        <div class="tile-figure-price__figure">
            <div class="
    number-m
    
"><span>60.000</span></div>

            <span class="tile-figures-module__figure-sufix number-m">€</span>
        </div>
    </li>
    <li class="tile-figure-price__item">
        <div class="tile-figure-price__description">
            <div class="text-label-m">Gastos e impuestos</div>
        </div>
        <div class="tile-figure-price__figure">
            <div class="
    number-m
    
"><span>8.000</span></div>

            <span class="tile-figures-module__figure-sufix number-m">€</span>
        </div>
    </li>
</ul>
 
<ul class="tile-figure-price">
    {{#each tile-price}}
    <li class="tile-figure-price__item">
        <div class="tile-figure-price__description">
            {{> @text-label-m description }}
        </div>
        <div class="tile-figure-price__figure">
            {{> @number-m figure }} <span class="tile-figures-module__figure-sufix number-m">{{{sufix}}}</span>
        </div>
    </li>
    {{/each}}
</ul>
 
{
  "tile-price": [
    {
      "description": {
        "text": "Precio de la vivienda"
      },
      "figure": {
        "number": "340.000"
      },
      "sufix": "€"
    },
    {
      "description": {
        "text": "Cantidad solicitada"
      },
      "figure": {
        "number": "280.000"
      },
      "sufix": "€"
    },
    {
      "description": {
        "text": "Aportación"
      },
      "figure": {
        "number": "60.000"
      },
      "sufix": "€"
    },
    {
      "description": {
        "text": "Gastos e impuestos"
      },
      "figure": {
        "number": "8.000"
      },
      "sufix": "€"
    }
  ]
}
  • Content: 
    .tile-figure-price{
    display:flex;
    flex-flow:wrap;
    width:100%;
    max-width:100%;
    justify-content: space-between;
    row-gap: 30px;
    @media (--viewport-xs-max) {
        row-gap:10px;
    }
    &__item {
        text-align: center;
        border-left:3px solid var(--color-accent);
        row-gap:20px;
        display:flex;
        flex-flow:column;
        justify-content: flex-start;
        align-items: flex-start;
        padding-left: 20px;
        @media (--viewport-lg-min) {
            width:25%;
        }
        @media (--viewport-md-max) {
            width:25%;
        }
        @media (--viewport-sm-max) {
            width:50%;
        }
        @media (--viewport-ms-max) {
            width:50%;
        }
        @media (--viewport-xs-max) {
            width:100%;
            flex-flow: wrap;
            justify-content: space-between;
            row-gap:10px;
            border:0 none;
            padding-left: 0;
        }
        
    }


    
    &__figure {
        display: flex;
        justify-content: center;
        align-items: first baseline;
        .number-m {
            color: var(--color-text);            
            @media (--viewport-xs-max) {
                font-family: 'Jornada Sans Medium';
                font-size: 12px;
                font-weight: normal;
                line-height: 14px;
                letter-spacing: 0;
            }
            @media (--viewport-ms-min) {
                font-size: 26px;
                font-weight: 400;
                line-height: 1.2;
                letter-spacing: 0;
            }

            
        }

    }
    &__description {
        .text-label-m {
            color:var(--color-grey2);
            @media (--viewport-sm-min) {

            }
            @media (--viewport-ms-min) {

            }
            
            
        }
        
        

    }
}
  • URL: /components/raw/tile-figure-price/tile-figure-price.css
  • Filesystem Path: src/06-adhoc/tramitacion/tile-figure-price/tile-figure-price.css
  • Size: 1.9 KB

No notes defined.