UCI

Slide highlight: None 

<div class="slide-highlight swiper-slide">
    <video class="video video-mobile" src="https://player.vimeo.com/progressive_redirect/playback/677753384/rendition/480p?loc&#x3D;external&amp;signature&#x3D;947e4105d6dc9fe88231958391bad7455e8e62edf6dc6736a38a54f1b06e879c" muted autoplay loop></video>
    <video class="video video-768" src="https://player.vimeo.com/progressive_redirect/playback/677753154/rendition/360p?loc&#x3D;external&amp;signature&#x3D;5e10e56e591771bc71075cfd16a7affd40d754d4eec1e1a12667f2126cb374d4" muted autoplay loop></video>
    <video class="video video-1024" src="https://player.vimeo.com/progressive_redirect/playback/677753029/rendition/540p?loc&#x3D;external&amp;signature&#x3D;87b6dd7502bc9bf502aa8a9795d0f1607169cf9849934005972696ef4d01b241" muted autoplay loop></video>
    <video class="video video-desktop" src="https://player.vimeo.com/progressive_redirect/playback/676215292/rendition/720p?loc&#x3D;external&amp;signature&#x3D;d5eb3e7c357ad80e30b96a74996734b862e06773e0733f48f1b20a788830c01f" muted autoplay loop></video>
    <div class="
                slide-highlight__tile
                    slide-highlight__tile_none
            ">
        <div class="row">
            <div class="col-xs-12 col-ms-12 col-sm-7 col-sm-offset-1 col-md-6 col-lg-6 col">
                <div class="tile-highlight">
                    <div class="tile-highlight__wrapper">
                        <div class="tile-highlight__content">
                            <div class="tile-highlight__title tile-highlight__title_header">
                                <h1 class="
                                        title-xl title-xl_color_light
                                    ">Hipotecas para vivir</h1>

                            </div>
                            <div class="tile-highlight__description">
                                <div id="" class="
                                        bodycopy-l
                                        bodycopy_color_light
                                        
                                        
                                    ">
                                    <p>UCI, un proyecto único donde solo tú eliges lo que quieres y cuando quieres: financiación, seguros y servicios para tu casa.</p>
                                </div>
                            </div>
                            <div class="tile-highlight__bodycopy rich-text">
                                <div class="
                                        bodycopy-m
                                        bodycopy_color_light
                                        
                                        
                                    ">
                                    <ul>
                                        <li>Condiciones transparentes y sin sorpresas</li>
                                        <li>Siempre con un gestor personalizado para asesorarte</li>
                                        <li>Productos adaptados a tus necesidades y estilo de vida</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="tile-highlight__btn">
                                <a class="btn 
                                            
                                             
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            
                                            " href="#" id="">
                                    Solicita tu hipoteca
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="slide-highlight swiper-slide">
    {{#if isImg}}
    <div class="wrap-img">
        <picture>
            <source srcset="{{ srcmobile }}" media="(max-width:767px)" />
            <source srcset="{{ src768 }}" media="(max-width:768px)" />
            <source srcset="{{ src1024 }}" media="(max-width:1024px)" />
            <img src="{{ src }}" />
        </picture>
    </div>
    {{/if}}
    {{#if isVideo}}
    <video class="video video-mobile" src="{{video-urlmobile}}" muted autoplay loop></video>
    <video class="video video-768" src="{{video-url768}}" muted autoplay loop></video>
    <video class="video video-1024" src="{{video-url1024}}" muted autoplay loop></video>
    <video class="video video-desktop" src="{{video-url}}" muted autoplay loop></video>
    {{/if}}
    <div class="
                slide-highlight__tile
                {{#if isReversed}}
                    slide-highlight__tile_reversed
                {{/if}}
                {{#if isNarrowReversed}}
                    slide-highlight__tile_reversed
                {{/if}}
                {{#if isLight}}
                    slide-highlight__tile_light
                {{/if}}
                {{#if isAccentDark}}
                    slide-highlight__tile_accent-dark
                {{/if}}
                {{#if isNone}}
                    slide-highlight__tile_none
                {{/if}}
            ">
        <div class="row">
            {{#if isReversed}}
            <div class="col-xs-12 col-ms-12 col-sm-7 col-sm-offset-right-1 col-md-6 col-lg-6 col">
                {{> @tile-highlight tile-highlight }}
            </div>
            {{else if isNarrowReversed}}
            <div class="col-xs-12 col-ms-12 col-sm-7 col-sm-offset-right-1 col-md-5 col-lg-5 col">
                {{> @tile-highlight tile-highlight }}
            </div>
            {{else if isNarrowCentered}}
            <div class="col-xs-12 col-ms-12 col-sm-7 col-sm-mr-ml col-md-5 col-lg-5 col">
                {{> @tile-highlight tile-highlight }}
            </div>
            {{else if isNarrow}}
            <div class="col-xs-12 col-ms-12 col-sm-7 col-sm-offset-1 col-md-5 col-lg-5 col">
                {{> @tile-highlight tile-highlight }}
            </div>
            {{else}}
            <div class="col-xs-12 col-ms-12 col-sm-7 col-sm-offset-1 col-md-6 col-lg-6 col">
                {{> @tile-highlight tile-highlight }}
            </div>
            {{/if}}
        </div>
    </div>
</div>
 
{
  "isImg": false,
  "src": "/dist/images/slider-desktop.jpg",
  "src1024": "/dist/images/slider-1024.jpg",
  "src768": "/dist/images/slider-768.jpg",
  "srcmobile": "/dist/images/slider-767.jpg",
  "video-url": "https://player.vimeo.com/progressive_redirect/playback/676215292/rendition/720p?loc=external&signature=d5eb3e7c357ad80e30b96a74996734b862e06773e0733f48f1b20a788830c01f",
  "video-url1024": "https://player.vimeo.com/progressive_redirect/playback/677753029/rendition/540p?loc=external&signature=87b6dd7502bc9bf502aa8a9795d0f1607169cf9849934005972696ef4d01b241",
  "video-url768": "https://player.vimeo.com/progressive_redirect/playback/677753154/rendition/360p?loc=external&signature=5e10e56e591771bc71075cfd16a7affd40d754d4eec1e1a12667f2126cb374d4",
  "video-urlmobile": "https://player.vimeo.com/progressive_redirect/playback/677753384/rendition/480p?loc=external&signature=947e4105d6dc9fe88231958391bad7455e8e62edf6dc6736a38a54f1b06e879c",
  "tile-highlight": {
    "isHeader": true,
    "title": {
      "text": "Hipotecas para vivir",
      "colorLight": true
    },
    "description": {
      "text": "<p>UCI, un proyecto único donde solo tú eliges lo que quieres y cuando quieres: financiación, seguros y servicios para tu casa.</p>",
      "colorLight": true
    },
    "bodycopy": {
      "text": "<ul><li>Condiciones transparentes y sin sorpresas</li><li>Siempre con un gestor personalizado para asesorarte</li><li>Productos adaptados a tus necesidades y estilo de vida</li></ul>",
      "colorLight": true
    },
    "btn": {
      "href": "#",
      "text": "Solicita tu hipoteca"
    }
  },
  "isNone": true,
  "isVideo": true
}
  • Content: 
    .slide-highlight {
    position: relative;
        margin-bottom:50px;
        margin-top:0;
    
        @media (--viewport-ms-max) {
            display:flex;
            flex-direction: column;
        }
        @media (--viewport-xs-max) {
            margin-bottom:0;
        }
    
        .wrap-img{/*min-height:450px;*/position: relative;width: 100%;top:0;overflow: hidden;display: flex; align-items: flex-start;justify-content: center;
            @media (--viewport-ms-max) {
                min-height: auto;
                align-items: flex-end;
            }
            @media (--viewport-xs-max) {
                top:0;
            }
            picture{
                line-height: 0;
                img{width: 100%; height: auto;}
            }
        }
        .video {
            width: 100%;
            height:auto;
            left: 0;
            top: 0;
            overflow: hidden;
            display:none;
            &.video-desktop{
                @media (min-width: 1025px) {
                    display:block;
                }
            }
            &.video-1024{
                @media (max-width: 1024px) and (min-width: 769px) {
                    display:block;
                }
            }
            &.video-768{
                @media (max-width: 768px) and (min-width: 501px) {
                    display:block;
                }
            }
            &.video-mobile{
                @media (max-width: 500px) {
                    display:block;
                }
            }
        }
    
    &__tile {position: absolute;bottom:0;width: 100%;margin: 0 0 -50px 0;
        @media (--viewport-ms-max) {
            position:relative;
            margin-top:0;
            margin-right:0;
            padding-right:0;
        }
        @media (--viewport-xs-max) {
            margin-bottom:0;
        }
        .tile-highlight{
            &__content{
                @media (--viewport-xs-max) {
                    justify-content: flex-start;
                }
                &__description{
                    @media (--viewport-xs-max) {min-height:120px;}
                }
            }
        }
        &_reversed {
            .row{
                justify-content:flex-end;
            }
        }
        &_none {display:none;
            @media (--viewport-ms-max) {
                display:block;
            }
        }
        &_light{
            .tile-highlight__wrapper {
                background-color:var(--color-accent-light);
                .tile-highlight__content{
                    .title-xl_color_light{
                        color:var(--color-accent);
                    }
                    .bodycopy-l.bodycopy_color_light, 
                    .bodycopy-l_color_light, 
                    .bodycopy-m.bodycopy_color_light, 
                    .bodycopy-m.bodycopy_color_light .bodycopy__link, 
                    .bodycopy-m_color_light,
                    .text-label-m_color_light{color:var(--color-accent);}
                }
            }
        }
        &_accent-dark{
            .tile-highlight__wrapper {
                background-color:var(--color-accent-dark);
            }
        }
    }
}
  • URL: /components/raw/slide-highlight/slide-highlight.css
  • Filesystem Path: src/02-molecules/slide-highlight/slide-highlight.css
  • Size: 3.2 KB

No notes defined.