UCI

Tile: Alert 

<div class="
    tile
">
    <!-- ==== <a class="tile__link" href="#"> ==== No debe ir un enlace envolviendo elementos de bloque -->
    <div class="tile__content noLink">
        <div class="tile__pic">
            <img class="tile__img" src="/dist/images/casa-reforma.svg" alt="An icon for a product">
        </div>
        <div class="tile__label">
            <div class="text-label-m">Vive</div>

        </div>
        <div class="tile__title">
            <div class="
    bodycopy-m
    
    
    
">
                Casa de casa
            </div>
            <img class="imagetitle" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Twemoji_1f600.svg/220px-Twemoji_1f600.svg.png" alt="Icon alt">
        </div>
        <div class="tile__bodycopy">
            <div class="
    bodycopy-m
    
    
    
">
                <p>Tu quieres una casa y nosotros lo hacemos posible</p>
            </div>

        </div>

    </div>
    <!-- ==== </a> ==== -->
</div>
 
<div class="
    tile{{#if isYellow}} tile_bg-color_yellow{{/if}}{{#if isAccent}} tile_bg-color_accent{{/if}}
">
   <!-- ==== <a class="tile__link" href="{{ href }}"> ==== No debe ir un enlace envolviendo elementos de bloque -->
        <div class="tile__content{{#if noLink}} noLink{{/if}}">
            <div class="tile__pic">
                {{#if isAllLink}}<a class="tile__link" href="{{ href }}">{{/if}}<img class="tile__img" src="{{ src }}" alt="{{ alt }}">{{#if isAllLink}}</a>{{/if}}
            </div>
            <div class="tile__label">
                {{#if isAllLink}}<a class="tile__link" href="{{ href }}">{{/if}}{{> @text-label-m text-label }}{{#if isAllLink}}</a>{{/if}}
            </div>
            <div class="tile__title">
                {{#if isAllLink}}<a class="tile__link" href="{{ href }}">{{/if}}{{#if isFW}}{{> @title-l title }}{{else if isBodycopy}}{{> @bodycopy-m title }}{{else}}{{> @title-m title }}{{/if}} {{#if imagetitle}}<img class="imagetitle" src="{{ imagetitle-src }}" alt="{{ imagetitle-alt }}">{{/if}}{{#if isAllLink}}</a>{{/if}}
            </div>
            {{#if bodycopy}}
            <div class="tile__bodycopy">
                {{#if isAllLink}}<a class="tile__link" href="{{ href }}">{{/if}}{{> @bodycopy-m bodycopy }}{{#if isAllLink}}</a>{{/if}}
            </div>
            {{/if}}

            {{#if isLink}}
                <div class="tile__btn">
                    {{> @link link }}
                </div>
            {{else if noLink}}
            {{else}}
                <div class="tile__btn">
                    {{> @btn btn }}
                </div>
            {{/if}}
        </div>
    <!-- ==== </a> ==== -->
</div>
 
{
  "href": "#",
  "src": "/dist/images/casa-reforma.svg",
  "alt": "An icon for a product",
  "imagetitle-src": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Twemoji_1f600.svg/220px-Twemoji_1f600.svg.png",
  "imagetitle-alt": "Icon alt",
  "text-label": {
    "text": "Vive"
  },
  "title": {
    "text": "Casa de casa"
  },
  "bodycopy": {
    "text": "<p>Tu quieres una casa y nosotros lo hacemos posible</p>"
  },
  "text-label-overlay": {
    "text": "Vive",
    "colorLight": true
  },
  "title-overlay": {
    "text": "Hipotca compra de casa",
    "colorLight": true
  },
  "imagetitle": true,
  "smMinNoHover": true,
  "btn": {
    "noTabindex": true,
    "text": "Descubrir producto",
    "href": "https://hipotecas.com"
  },
  "link": {
    "href": "#",
    "text": "A long line for a link"
  },
  "isBodycopy": true,
  "noLink": true
}
  • Content: 
    .tile {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100%;
    height: 100%;
    margin: 0 auto;

    &__link {
        display: flex;
        flex-direction: column;
        height: 100%;
        .tile {
            &__btn {
                .btn {
                    background-color: var(--color-tertiary);margin-top:30px;
                }
                .btn_secondary {
                    background-color: transparent;
                }
            }
        }
    }

    &__content {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        flex-grow: 1;
        padding: 20px 20px 30px;

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

        &.noLink{
            padding-bottom:20px;
        }
    }

    &__pic {
        max-width: 80px;
        margin: 0 auto 20px;
    }

    &__img {
        display: block;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }

    &__img_filter {
        display: block;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        &:hover,
        &:focus {
            filter: grayscale(15%);
        }
    }

    &__label {
        margin-bottom: 10px;
    }

    &__title {
        margin-bottom: 10px;

        @media (--viewport-sm-min) {
            margin-bottom: 20px;
        }
        h3{display:inline;}
        .imagetitle{display:inline; height:25px; width: auto; left: 5px; top: 5px; position: relative;}
    }

    &__bodycopy {
        margin-bottom: 10px;

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

    &__btn {
        @media (--viewport-ms-min) {
            position: absolute;bottom:0;
            }
    }

    &_bg-color {
        &_yellow {
            background-color: var(--color-accent-light);
        }
        &_accent{
            background-color: var(--color-accent);
            .text-label-m, .title-m{
                color: var(--color-white);
            }
        }
    }
}
  • URL: /components/raw/tile/tile.css
  • Filesystem Path: src/02-molecules/tile/tile.css
  • Size: 2.2 KB

No notes defined.