UCI

Tile highlight: With Title H 3 

<div class="tile-highlight">
    <div class="tile-highlight__wrapper">
        <div class="tile-highlight__content">
            <div class="tile-highlight__label">
                <div class="text-label-m text-label-m_color_light">¿No Vives en Espana y quieres comprar aquí?</div>
            </div>
            <div class="tile-highlight__title">
                <h3 class="
                        title-l
                        title-l_color_light
                        
                        
                        
                    ">

                    Tu quieres una casa y nosotros lo hacemos posible

                </h3>
            </div>
            <div class="tile-highlight__bodycopy rich-text">
                <div class="
                        bodycopy-m
                        bodycopy_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="tile-highlight__btn">
                <a class="btn 
                            
                             
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            " href="#" id="">
                    Comprar casa para no residentes
                </a>
            </div>
        </div>
    </div>
</div>
 
<div class="tile-highlight{{#if isAccentDark}} accent-dark{{/if}}{{#if isGreen}} green{{/if}}{{#if line-visible}} line-visible{{/if}}{{#if small-padding}} small-padding{{/if}}">
    <div class="tile-highlight__wrapper">
        <div class="tile-highlight__content">
            {{#if text-label}}
                <div class="tile-highlight__label">
                    {{> @text-label-m text-label }}
                </div>
            {{/if}}
            {{#if isHeader}}
                <div class="tile-highlight__title tile-highlight__title_header">
                    {{> @title-xl title }}
                </div>
            {{else}}
                <div class="tile-highlight__title">
                    {{> @title-l title }}
                </div>
            {{/if}}
            {{#if description}}
                <div class="tile-highlight__description">
                    {{> @bodycopy-l description }}
                </div>
            {{/if}}
            {{#if bodycopy}}
                <div class="tile-highlight__bodycopy rich-text">
                    {{> @bodycopy-m bodycopy }}
                </div>
            {{/if}}
            {{#if btn}}
                <div class="tile-highlight__btn">
                    {{> @btn btn }}
                </div>
            {{/if}}
        </div>
        {{#unless btn}}
            {{ render '@line' }}
        {{/unless}}
        {{#if line-visible}}
            {{ render '@line' }}
        {{/if}}
    </div>
</div>
 
{
  "text-label": {
    "text": "¿No Vives en Espana y quieres comprar aquí?",
    "colorLight": true
  },
  "title": {
    "text": "Tu quieres una casa y nosotros lo hacemos posible",
    "colorLight": true,
    "isH3": true
  },
  "bodycopy": {
    "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
  },
  "btn": {
    "href": "#",
    "text": "Comprar casa para no residentes"
  }
}
  • Content: 
    .tile-highlight {
    &__wrapper {
        background-color: var(--color-accent);
        
    }

    &__content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 450px;
        padding: 40px 20px;

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

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

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

        @media (--viewport-ms-max) {
            min-height: auto;
        }
    }

    &__label {
        margin-bottom: 10px;

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

    &__title {
        margin-bottom: 20px;

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

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

        &_header {
            margin-bottom: 10px;


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

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

    &__bodycopy {
        margin-top: 15px;

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

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

    &__btn {
        margin-top: 30px;
    }

    &.line-visible{
        .tile-highlight__content {
            padding: 40px 20px 20px;
    
            @media (--viewport-ms-min) {
                padding: 45px;
            }
    
            @media (--viewport-sm-min) {
                padding: 45px;
            }
    
            @media (--viewport-md-min) {
                padding: 45px;
            }
        }
        .tile-highlight__title {
            margin-bottom: 10px;
            &_header {
                margin-bottom: 10px;
            }
        }
        .tile-highlight__btn {
            margin-top: 19px;
        }
    }

    &.accent-dark{
        .tile-highlight__content {
            padding: 40px 20px;
    
            @media (--viewport-ms-min) {
                padding: 45px;
            }
    
            @media (--viewport-sm-min) {
                padding: 45px
            }
    
            @media (--viewport-md-min) {
                padding: 45px;
            }
        }
        .tile-highlight__wrapper {
            background-color: var(--color-accent-dark);
            
        }

        .tile-highlight__title {
            margin-bottom: 10px;
            &_header {
                margin-bottom: 10px;
            }
        }

        .tile-highlight__btn {
            margin-top: 19px;
        }

        .tile-highlight__label {
        margin-bottom: 3px;

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

    &.green{
        .tile-highlight__content {
            padding: 40px 20px;
    
            @media (--viewport-ms-min) {
                padding: 45px;
            }
    
            @media (--viewport-sm-min) {
                padding: 45px
            }
    
            @media (--viewport-md-min) {
                padding: 45px;
            }
        }
        .tile-highlight__wrapper {
            background-color: #00635B;
            
        }

        .tile-highlight__title {
            margin-bottom: 10px;
            &_header {
                margin-bottom: 10px;
            }
        }

        .tile-highlight__btn {
            margin-top: 19px;
        }

        .tile-highlight__label {
        margin-bottom: 3px;

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

    &.small-padding{
        .tile-highlight__content {
            padding: 40px 20px;

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

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

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

        .tile-highlight__title {
            margin-bottom: 10px;
            &_header {
                margin-bottom: 10px;
            }
        }
        .tile-highlight__btn {
            margin-top: 19px;
        }

        .tile-highlight__label {
        margin-bottom: 3px;

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

}
  • URL: /components/raw/tile-highlight/tile-highlight.css
  • Filesystem Path: src/02-molecules/tile-highlight/tile-highlight.css
  • Size: 4.6 KB

No notes defined.