UCI

Tile resources: Transparent 

<div class="tile-resources transparent">
    <div class="tile-resources__pic" style="background-image: url(/dist/images/distributor-3.jpg)"></div>
    <div class="tile-resources__content">
        <div class="tile-resources__title">
            <h3 class="
                    title-m
                    
                    
                    
                    
                ">Seguro de hogar</h3>
        </div>
        <div class="tile-resources__bodycopy">
            <div class="
                    bodycopy-m
                    
                    
                    
                ">
                POR LO QUE PUEDA PASAR
            </div>
        </div>
        <div class="tile-resources__link">
            <span class="link link_not-a-link
                            
                            ">
                <span>Ver detalle</span>
            </span>

        </div>
    </div>
</div>
 
<div class="tile-resources{{#if isAccentLight}} accent-light{{/if}}{{#if isTransparent}} transparent{{/if}}">
    <div class="tile-resources__pic" style="background-image: url({{ imageUrl }})"></div>
    <div class="tile-resources__content">
        <div class="tile-resources__title">
            {{> @title-m title }}
        </div>
        {{#if bodycopy}}
            <div class="tile-resources__bodycopy">
                {{> @bodycopy-m bodycopy }}
            </div>
        {{/if}}
        {{#if link}}
            <div class="tile-resources__link">
                {{> @link link }}
            </div>
        {{/if}}
    </div>
</div>
 
{
  "imageUrl": "/dist/images/distributor-3.jpg",
  "title": {
    "text": "Seguro de hogar",
    "colorLight": false
  },
  "bodycopy": {
    "text": "POR LO QUE PUEDA PASAR",
    "colorLight": false
  },
  "link": {
    "text": "Ver detalle"
  },
  "isTransparent": true
}
  • Content: 
    .tile-resources {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow: hidden;
    
    &__pic {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 149px;
        background: center / cover no-repeat;
        transition: all 0.5s;
    }
    
    &__content {
        position: relative;
        z-index: 0;
        flex: 1;
        padding: 25px 17px;
        text-align: center;
        background-color: var(--color-accent-dark);
    }
    
    &__bodycopy {
        margin-top: 17px;
    }
    
    &__link {
        .link_not-a-link{
            margin-top: 20px;
            color: var(--color-accent-light);
            position:relative;
            &::after {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 30px;
                height: 1px;
                background-color: var(--color-accent-light);
                transition: all 0.3s;
                content: '';
            }
        }
    }

    &:hover{
        overflow: hidden;
        cursor: pointer;
        .tile-resources__pic {
            /*width: 150%;
            margin-left:-25%;*/
            transform: scale(1.1);
        }
        .tile-resources__title {
            text-decoration: underline;
            color: var(--color-white);
        }
        .tile-resources__link {
            .link_not-a-link{
                &::after {
                    width: 100%;
                }
            }
        }
    }
    &.transparent{
        .tile-resources__content{
            background:none;
        }

        .tile-resources__title {
            color: var(--color-secondary-brand);
        }

        .tile-resources__link {
            .link_not-a-link{
                color: var(--color-secondary);
                &::after {
                    background-color: var(--color-secondary-brand);
                }
            }
        }
    }
    &.accent-light{
        .tile-resources__content{
            background-color: var(--color-accent-light);
        }

        .tile-resources__title {
            color: var(--color-secondary-brand);
        }

        .tile-resources__link {
            .link_not-a-link{
                color: var(--color-secondary);
                &::after {
                    background-color: var(--color-secondary-brand);
                }
            }
        }
    }
}
  • URL: /components/raw/tile-resources/tile-resources.css
  • Filesystem Path: src/02-molecules/tile-resources/tile-resources.css
  • Size: 2.5 KB

No notes defined.