UCI

ucipt Slide higlight: Default 

<div class="ucipt-slide-highlight">
    <div class="ucipt-slide-highlight__wrapper bg-accent">

        <div class="ucipt-slide-highlight__content">
            <div class="ucipt-slide-highlight__content-holder">

                <div class="ucipt-slide-highlight__title ucipt-slide-highlight__title_header">
                    <h2 class="ucipt-title
                            ucipt-title--color-light">Tu quieres una casa y nosotros lo hacemos posible</h2>
                </div>

                <div class="ucipt-slide-highlight__bodycopy rich-text">
                    <div class="
                            ucipt-description
                            ucipt-description--color-light
                        ">
                        <p>Visita la casa personalmente antes de pagar, Conocer a quien pertenece la casa en el Registro de la Propiedad y una vez adquirida, registrar la vivienda en el Registro de la Propiedad, son pasos básicos para comprar en España.</p>
                    </div>
                </div>

                <div class="ucipt-slide-highlight__btnholder">
                    <div class="ucipt-slide-highlight__btn">
                        <a class="btn 
                                        
                                         
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        " href="#" id="">
                            Comprar casa para no residentes
                        </a>
                    </div>
                    <div class="ucipt-slide-highlight__btn">
                        <a class="btn 
                                        
                                         
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        
                                        " href="#" id="">
                            Comprar casa para 2
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="ucipt-slide-highlight">
    <div class="ucipt-slide-highlight__wrapper {{#if hasBg-color}}{{bg-color}}{{/if}}">

            <div class="ucipt-slide-highlight__content">
                <div class="ucipt-slide-highlight__content-holder">

                    <div class="ucipt-slide-highlight__title ucipt-slide-highlight__title_header">
                        {{> @ucipt-title title }}
                    </div>

                    <div class="ucipt-slide-highlight__bodycopy rich-text">
                        {{> @ucipt-description description }}
                    </div>

                    {{#if buttons}}
                        <div class="ucipt-slide-highlight__btnholder">
                            {{#each buttons}}
                            <div class="ucipt-slide-highlight__btn">
                                {{> @btn this }}
                            </div>
                            {{/each}}
                        </div>
                    {{/if}}
                </div>
            </div>
    </div>
</div>
 
{
  "bg-image": {
    "alt": "Dummy Text",
    "url": "https://besthqwallpapers.com/Uploads/5-12-2020/148667/thumb2-mount-fuji-4k-two-swans-autumn-stratovolcano.jpg"
  },
  "hasBg-color": true,
  "bg-color": "bg-accent",
  "bg-video-url": "https://static.videezy.com/system/resources/previews/000/043/142/original/3prts-2.mp4",
  "title": {
    "text": "Tu quieres una casa y nosotros lo hacemos posible",
    "colorLight": true
  },
  "description": {
    "text": "<p>Visita la casa personalmente antes de pagar, Conocer a quien pertenece la casa en el Registro de la Propiedad y una vez adquirida, registrar la vivienda en el Registro de la Propiedad, son pasos básicos para comprar en España.</p>",
    "colorLight": true
  },
  "buttons": [
    {
      "href": "#",
      "text": "Comprar casa para no residentes"
    },
    {
      "href": "#",
      "text": "Comprar casa para 2"
    }
  ]
}
  • Content: 
    .ucipt-slide-highlight {
    &__wrapper {
        background-color:transparent;
        &.bg-accent {
            background-color:var(--color-accent);
        }
    }
    &__content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 402px;
        padding: 60 50px;

        @media (--viewport-ms-min) {
            padding: 50px;
        }

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

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

        @media (--viewport-xs-max) {
            min-height: auto;
            padding: 40px 20px 40px;
        }
    }

    &__content-holder {
        z-index: 2;
    }

    &__label {
        margin-bottom: 10px;

        @media (--viewport-ms-min) {
            margin-bottom: 20px;
        }
    }

    &__title {
        margin-bottom: 20px;
        max-width: /*410px*/auto;

        @media (--viewport-ms-min) {
            margin-bottom: 40px;
        }

        @media (--viewport-sm-min) {
            margin-bottom: 30px;
        }

        @media (--viewport-xs-max) {
            max-width: 360px;
        }

        &_header {
            margin-bottom: 10px;

            @media (--viewport-ms-min) {
                margin-bottom: 20px;
            }

            @media (--viewport-md-min) {
                margin-bottom: 7px;
            }
        }
    }

    &__bodycopy {
        margin-top: 10px;
        max-width: /*410px*/auto;

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

        @media (--viewport-sm-min) {
            margin-top: 20px;
        }

        @media (--viewport-xs-max) {
            max-width: 360px;
        }

        p + p {
            margin-top: 20px;
        }
    }

    &__btnholder {
        display: block;
    }

    &__btn {
        margin-top: 20px;
        margin-right: 20px;
        display: inline-block;

        &:last-of-type {
            margin-right: 0;
        }

        @media (--viewport-xs-max) {
            width:90%;

            .btn{
                width:100%;
            }
        }
    }
}
  • URL: /components/raw/ucipt-slide-highlight/ucipt-slide-highlight.css
  • Filesystem Path: src/02-molecules/ucipt-slide-highlight/ucipt-slide-highlight.css
  • Size: 2.2 KB

No notes defined.