UCI

Tile distributor: Title Is Icon Link 

<div class="
    tile-distributor
">
    <div class="tile-distributor__pic" style="background-image: url(/dist/images/distributor-3.jpg)"></div>
    <div class="tile-distributor__content">
        <div class="tile-distributor__label">
            <div class="text-label-m text-label-m_color_light">POR LO QUE PUEDA PASAR</div>
        </div>
        <div class="tile-distributor__title">
            <h3 class="
                    title-m
                    title-m_color_light
                    
                    
                    
                ">Seguro de hogar</h3>
        </div>
        <div class="tile-distributor__icon-link">
            <a href="#">
                <svg class="icon icon-16_linkedin     ">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_linkedin"></use>
                </svg>
            </a>
            <a href="#">
                <svg class="icon icon-16_vimeo     ">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_vimeo"></use>
                </svg>
            </a>
            <a href="#">
                <svg class="icon icon-16_telegram     ">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_telegram"></use>
                </svg>
            </a>
        </div>
        <div class="tile-distributor__link">
            <span class="link link_not-a-link
                            
                            ">
                <span>Ver detalle</span>
            </span>

        </div>
    </div>
</div>
 
<div class="
    tile-distributor
">
    <div class="tile-distributor__pic" style="background-image: url({{ imageUrl }})"></div>
    <div class="tile-distributor__content{{#if isAccentLight}} accentlight{{/if}}">
        <div class="tile-distributor__label">
            {{> @text-label-m text-label }}
        </div>
        <div class="tile-distributor__title{{#if isJustTitle}} justtitle{{/if}}">
            {{> @title-m title }}
        </div>
        {{#if bodycopy}}
            <div class="tile-distributor__bodycopy">
                {{> @bodycopy-m bodycopy }}
            </div>
        {{/if}}
        {{#if isIconLink}}
            <div class="tile-distributor__icon-link">
                {{#each itemIconLink}}
                    <a href="{{iconLink}}">
                        {{> @icon icon }}
                    </a>
                {{/each}}
            </div>
        {{/if}}
        {{#if link}}
            <div class="tile-distributor__link">
                {{> @link link }}
            </div>
        {{/if}}
    </div>
</div>
 
{
  "imageUrl": "/dist/images/distributor-3.jpg",
  "text-label": {
    "text": "POR LO QUE PUEDA PASAR",
    "colorLight": true
  },
  "title": {
    "text": "Seguro de hogar",
    "colorLight": true
  },
  "link": {
    "text": "Ver detalle",
    "isLight": true
  },
  "isIconLink": true,
  "itemIconLink": [
    {
      "icon": {
        "name": "16_linkedin"
      },
      "iconLink": "#"
    },
    {
      "icon": {
        "name": "16_vimeo"
      },
      "iconLink": "#"
    },
    {
      "icon": {
        "name": "16_telegram"
      },
      "iconLink": "#"
    }
  ]
}
  • Content: 
    .tile-distributor {
    display: flex;
    flex-direction: column;
    height: 100%;

    &__pic {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 265px;
        background: center / cover no-repeat;

        @media (--viewport-ms-min) {
            height: 360px;
        }

        @media (--viewport-sm-min) {
            height: 320px;
        }
    }

    &__content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        /*z-index: 1; Se superpone a los botones del menú mobile*/
        z-index: 0;
        flex: 1;
        padding: 40px 20px;
        margin-top: -40px;
        margin-right: 20px;
        text-align: center;
        background-color: var(--color-accent);
        min-height: 200px;

        @media (--viewport-ms-min) {
            padding: 40px 80px;
            margin-top: -165px;
            margin-right: 93px;
        }

        @media (--viewport-sm-min) {
            padding: 40px 30px;
            margin-top: -160px;
            margin-right: 105px;
        }
        &.accentlight{
            background-color: var(--color-accent-light);
            .tile-distributor__label{
                .text-label-m_color_light{color:var(--color-accent-dark);}  
            }
            .tile-distributor__bodycopy{
                .bodycopy-m.bodycopy_color_light{color:var(--color-accent-dark);}  
            }
            .tile-distributor__title{
                .title-m_color_light{color:var(--color-accent);}
            }
            .tile-distributor__link{
                .link_color_light{color:var(--color-accent-dark);
                    span:after {
                        background-color: var(--color-accent-dark);
                    }
                } 
            }
        }
    }
    &__icon-link {
        margin-top: 24px;
        display:flex;
        gap: 24px;
        a {
            grid-gap: 24px;
            align-items: flex-end;
        }
        .icon {
            fill: var(--color-icon-inverse);
            width: 24px;
            height:24px;
        }
    }
    &__label {
        margin-bottom: 10px;
    }

    &__bodycopy {
        margin-top: 20px;
    }

    &__link {
        margin-top: 20px;

        @media (--viewport-ms-min) {
            margin-top: 30px;
        }
    }
}
  • URL: /components/raw/tile-distributor/tile-distributor.css
  • Filesystem Path: src/02-molecules/tile-distributor/tile-distributor.css
  • Size: 2.4 KB

No notes defined.