UCI

Product: Text Instead Of A Number 

<section class="splitter  splitter_bg-color_white      splitter_padding_top_large    splitter_padding_bottom_large  ">
    <div class="container">
        <div class="splitter__wrapper">
            <div class="row">
                <div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
                    <div class="product-swiper">
                        <div id="swiperID" class="swiper-container">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="product " id=product>
                                        <div class="row ">
                                            <div class="col-xs-12 col-ms-6 col-sm-6 col-lg-6">
                                                <div class="product__support lazyload">
                                                    <img src="/dist/images/product.jpg" />
                                                    <div class="row">
                                                        <div class="col-xs-10 col-ms-12 col-sm-10 col-md-8 col-lg-8">

                                                            <div class="product__support-wrapper">
                                                                <div class="product__support-text">
                                                                </div>
                                                                <div class="product__support-label-wrapper">
                                                                    <div class="row">
                                                                        <div class="col-xs-12 col-ms-12 col-sm-12 col-md-10 col-lg-10">
                                                                            <div class="product__support-label">
                                                                                <div class="text-label-m text-label-m_color_light">personas han comprado casa con nosotros este año</div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-12 col-ms-6 col-sm-4 col-sm-mr-ml col-lg-4">
                                                <div class="product__content">
                                                    <div class="product__icon">
                                                        <img class="product__img" src="/dist/images/compracasa.svg" alt="Product">
                                                    </div>
                                                    <div class="product__label">
                                                        <div class="text-label-m">VIVE / HIPOTECA COMPRA CASA</div>
                                                    </div>
                                                    <div class="product__title">
                                                        <h2 class="
                                        title-l
                                        
                                        
                                        
                                        
                                    ">

                                                            Tu quieres una casa y nosotros lo hacemos posible

                                                        </h2>
                                                    </div>
                                                    <div class="product__bodycopy">
                                                        <div class="
                                        bodycopy-m
                                        
                                        
                                        
                                    ">
                                                            <p>Estás a punto de dar un gran paso en tu vida, y necesitas saber por dónde empezar.</p>
                                                        </div>
                                                    </div>
                                                    <div class="product__btn">
                                                        <a class="btn 
                                            
                                             
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            " href="#" id="">
                                                            Comprar casa
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
                                            <div class="product__nav">
                                                <div class="product__nav-back nav-back">
                                                    <div class="
    nav-arrow
    
    
">
                                                        <svg class="icon icon-arrow-left     ">
                                                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-left"></use>
                                                        </svg>

                                                    </div>

                                                </div>
                                                <div class="product__nav-forward nav-forward">
                                                    <div class="
    nav-arrow
    
    
">

                                                        <svg class="icon icon-arrow-right     ">
                                                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
                                                        </svg>

                                                    </div>

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

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
 
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div {{#if hasID}}id="{{idComponent}}" {{/if}} class="product-swiper">
    <div id="{{swiperID}}" class="swiper-container">
        <div class="swiper-wrapper">
            {{#each product}}
            <div class="swiper-slide">
                <div class="product {{#if this.isReversed}} product_reversed {{/if}}" id={{ this.id }}>
                    <div
                        class="row {{#if this.isReversed}} reverse {{/if}}{{#if this.isMobileReversed}} mobileReverse {{/if}}{{#if this.isYellow}}bg-color_yellow{{/if}}">
                        <div class="col-xs-12 col-ms-6 col-sm-6 col-lg-6">
                            <div class="product__support lazyload">
                                {{#if isVideo}}
                                <video{{#if isAutoplay}}{{else}} controls{{/if}}
                                    class="video{{#if isCover}} isCover{{/if}}" src="{{video-url}}" {{#if isAutoplay}}
                                    muted autoplay{{/if}} loop></video>
                                    {{else if isVideoYoutube}}
                                    <div class="video-responsive{{#if isCover}} isCover{{/if}}">
                                        <iframe width="560" height="315"
                                            src="{{video-url-youtube}}{{#if isAutoplay}}&amp;autoplay=1&mute=1&controls=0{{/if}}"
                                            class="optanon-category-4" title="YouTube video player" frameborder="0"
                                            allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                            allowfullscreen></iframe>
                                    </div>
                                    {{else}}
                                    <img src="{{ this.data-img }}" {{#if isContain}} class="isContain" {{/if}} />
                                    {{/if}}
                                    {{#if isVideo}}
                                    {{else if isVideoYoutube}}
                                    {{else}}
                                    <div class="row">
                                        <div class="col-xs-10 col-ms-12 col-sm-10 col-md-8 col-lg-8">

                                            <div class="product__support-wrapper">
                                                <div class="product__support-text">
                                                    {{#if this.number}}
                                                    {{> @number-xl this.number }}
                                                    {{/if}}
                                                </div>
                                                {{#if this.support-label }}
                                                <div class="product__support-label-wrapper">
                                                    <div class="row">
                                                        <div class="col-xs-12 col-ms-12 col-sm-12 col-md-10 col-lg-10">
                                                            <div class="product__support-label">
                                                                {{> @text-label-m this.support-label }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                {{/if}}
                                            </div>
                                        </div>
                                    </div>
                                    {{/if}}
                            </div>
                        </div>
                        <div class="col-xs-12 col-ms-6 col-sm-4 col-sm-mr-ml col-lg-4">
                            <div class="product__content">
                                {{#if src}}
                                <div class="product__icon">
                                    <img class="product__img" src="{{ this.src }}" alt="{{ this.alt }}">
                                </div>
                                {{/if}}
                                <div class="product__label">
                                    {{> @text-label-m this.label }}
                                </div>
                                <div class="product__title">
                                    {{> @title-l this.title }}
                                </div>
                                <div class="product__bodycopy">
                                    {{> @bodycopy-m this.bodycopy }}
                                </div>
                                {{#if bulletlistitem}}
                                <div class="product__bulletList">
                                    <ul>
                                        {{#each bulletlistitem}}
                                        <li>
                                            {{> @icon this }}{{> @bodycopy-m this }}
                                        </li>
                                        {{/each}}
                                    </ul>
                                </div>
                                {{/if}}
                                {{#if isTest}}
                                <div class="product__btn">
                                    {{ render '@lightbox--steps-form' }}
                                </div>
                                {{else if isLink}}
                                <div class="product__link">
                                    {{> @link this.link }}
                                </div>
                                {{else if btn}}
                                <div class="product__btn">
                                    {{> @btn this.btn }}
                                </div>
                                {{else}}
                                {{/if}}
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
                        <div class="product__nav">
                            <div class="product__nav-back nav-back">
                                {{ render '@nav-arrow--back' }}
                            </div>
                            <div class="product__nav-forward nav-forward">
                                {{ render '@nav-arrow--forward' }}
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            {{/each}}
        </div>
    </div>
</div>
{{/content}}
{{/extend}}
 
{
  "hasID": false,
  "splitter": {
    "oneColumn": true,
    "bgColorWhite": true,
    "paddingTopLarge": true,
    "paddingBottomLarge": true
  },
  "swiperID": "swiperID",
  "product": [
    {
      "id": "product",
      "data-img": "/dist/images/product.jpg",
      "support-label": {
        "text": "personas han comprado casa con nosotros este año",
        "colorLight": true
      },
      "btn": {
        "href": "#",
        "text": "Comprar casa"
      },
      "src": "/dist/images/compracasa.svg",
      "alt": "Product",
      "label": {
        "text": "VIVE  /  HIPOTECA COMPRA CASA"
      },
      "title": {
        "text": "Tu quieres una casa y nosotros lo hacemos posible"
      },
      "bodycopy": {
        "text": "<p>Estás a punto de dar un gran paso en tu vida, y necesitas saber por dónde empezar.</p>"
      }
    }
  ]
}
  • Content: 
    .product {
    position: relative;



    &_reversed {
        .product {
            &__content {
                @media (--viewport-ms-only) {
                    padding: 11px 11px 11px 30px;
                }
            }
        }
    }

    &-swiper {
        @media (--viewport-xs-max) {
            margin-right: -19px;
            margin-left: -20px;
        }
    }

    &__support {position: relative;height: 100%; overflow:hidden; /* para evitar espacio bajo la imagen en reversed */line-height: 0;
        img{width:100%; height:100%;object-fit:cover;
            &.isContain{
                height:auto;
                object-fit: contain;
            }
        }

        .video {
            width: 100%;
            height: auto;
            left: 0;
            top: 0;
            overflow: hidden;

            &.isCover {
                height: 100%;
                object-fit: cover;
            }
        }

        .row {
            padding: 40px 20px 34px;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;

            @media (--viewport-ms-min) {
                height: 100%;
                padding: 60px 40px;
            }

            @media (--viewport-sm-min) {
                padding: 60px 82px;
            }

            @media (--viewport-md-min) {
                padding: 60px 74px;
            }

            &-label {
                margin-top: 10px;
            }
        }

        &-label-wrapper {
            position: relative;

            .row {
                padding: 0;
                position: relative;
            }
        }

        &-text {
            position: relative;
        }
    }


    .video-responsive {
        overflow: hidden;
        padding-bottom: 56.3%;
        /* Adecua este valor para controlar la altura del video */
        position: relative;
        height: 0;

        iframe {
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            position: absolute;
        }

        &.isCover {
            width: 100vw;
            height: 100%;
            padding-bottom: 0;

            /* Adecua este valor para controlar la altura del video */
            iframe {
                top: 50%;
                left: 21%;
                /*left: 70vh;*/
                width: 100vw;
                height: 100%;
                transform: translate(-50%, -50%);

                @media (--viewport-ms-min) {
                    left: 22vw;
                }

                @media only screen and (min-width: 800px) {
                    left: 22vw;
                }

                @media only screen and (min-width: 950px) {
                    left: 23vw;
                }

                @media (--viewport-sm-min) {
                    left: 23vw;
                }

                @media only screen and (min-width: 1100px) {
                    left: 24vw;
                }

                @media (--viewport-md-min) {
                    left: 23vw;
                }

                @media only screen and (min-width: 1900px) {
                    left: 17vw;
                }

                @media (--viewport-lg-min) {
                    left: 16.8vw;
                }

                @media only screen and (min-width: 2100px) {
                    left: 15vw;
                }

                @media (--viewport-xl-min) {
                    left: 13vw;
                }


                @media only screen and (max-width: 1189px) {
                    width: 130vw;
                }

                @media only screen and (max-width: 921px) {
                    width: 160vw;
                }

                @media only screen and (max-width: 800px) {
                    width: 174vw;
                }
            }

            @media (--viewport-xs-max) {
                padding-bottom: 56.3%;
                height: 0;

                iframe {
                    left: 0;
                    top: 0;
                    height: 100%;
                    width: 100%;
                    transform: none;
                }
            }
        }
    }

    &__content {
        padding: 20px 20px 30px 20px;

        @media (--viewport-ms-min) {
            padding: 11px 30px 30px 10px;
        }

        @media (--viewport-sm-min) {
            padding: 42px 0;
        }

        @media (--viewport-md-min) {
            padding: 32px 0;
        }
    }

    &__icon {
        margin-bottom: 20px;
    }

    &__label {
        margin-bottom: 20px;
    }

    &__bodycopy {
        margin-top: 20px;
    }

    &__btn,
    &__link {
        margin-top: 20px;

        @media (--viewport-ms-min) {
            margin-top: 30px;
        }
    }

    &__nav {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;

        @media (--viewport-ms-min) {
            justify-content: center;
            padding: 0;
        }

        &-back,
        &-forward {
            margin-top: 20px;

            @media (--viewport-ms-min) {
                margin-top: 30px;
            }
        }

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

    &__bulletList {
        margin-top: 30px;

        li {
            display: flex;
            flex-direction: row;
            margin-bottom: 24px;

            &:last-child {
                @media (--viewport-xs-max) {
                    margin-bottom: 0;
                }
            }

            .icon {
                width: 20px;
                height: 20px;
                margin-right: 16px;
            }
        }
    }

    .row.mobileReverse {
        @media (--viewport-ms-max) {
            flex-direction: column-reverse;
        }
    }

    .bg-color {
        &_yellow {
            background-color: var(--color-accent-light);
        }
    }
}
  • URL: /components/raw/product/product.css
  • Filesystem Path: src/03-organisms/product/product.css
  • Size: 6 KB

Variantes: Default, Link, Video, Image cover and contain (cover en el primero (por defecto) y contain en el segundo), Test hipotecas, Text instead of a number, Reversed, Slider, Slider Reversed. Permite configurar el id de cada producto, el src de imágen y vídeo, src y alt del icono.