UCI

Tile footer menu: Default 

<div class="tile-footer-menu">
    <div class="tile-footer-menu__title">
        <h3 class="
                title-m
                title-m_color_light
                
                
                
            ">Descubre Hipotecas</h3>
    </div>
    <div class="tile-footer-menu__body">
        <div class="tile-footer-menu__list">
            <ul class="row">
                <li class="col-xs-6 col-ms-6 col-sm-12 col-md-6 col-lg-6">
                    <div class="tile-footer-menu__item">
                        <div class="tile-footer-menu__link">
                            <a class="link
                                                link_simple
                                                
                                                
                                                
                                                
                                                
                                                link_large
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                " href="#">
                                <span>Calcula tu hipoteca</span>
                            </a>

                        </div>
                    </div>
                </li>
                <li class="col-xs-6 col-ms-6 col-sm-12 col-md-6 col-lg-6">
                    <div class="tile-footer-menu__item">
                        <div class="tile-footer-menu__link">
                            <a class="link
                                                link_simple
                                                
                                                
                                                
                                                
                                                
                                                link_large
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                " href="#">
                                <span>Te ayudamos</span>
                            </a>

                        </div>
                    </div>
                </li>
                <li class="col-xs-6 col-ms-6 col-sm-12 col-md-6 col-lg-6">
                    <div class="tile-footer-menu__item">
                        <div class="tile-footer-menu__link">
                            <a class="link
                                                link_simple
                                                
                                                
                                                
                                                
                                                
                                                link_large
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                " href="#">
                                <span>Somos Hipotecas</span>
                            </a>

                        </div>
                    </div>
                </li>
                <li class="col-xs-6 col-ms-6 col-sm-12 col-md-6 col-lg-6">
                    <div class="tile-footer-menu__item">
                        <div class="tile-footer-menu__link">
                            <a class="link
                                                link_simple
                                                
                                                
                                                
                                                
                                                
                                                link_large
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                " href="#">
                                <span>Preguntas frecuentes</span>
                            </a>

                        </div>
                    </div>
                </li>
                <li class="col-xs-6 col-ms-6 col-sm-12 col-md-6 col-lg-6">
                    <div class="tile-footer-menu__item">
                        <div class="tile-footer-menu__link">
                            <a class="link
                                                link_simple
                                                
                                                
                                                
                                                
                                                
                                                link_large
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                " href="#">
                                <span>Quiénes somos</span>
                            </a>

                        </div>
                    </div>
                </li>
                <li class="col-xs-6 col-ms-6 col-sm-12 col-md-6 col-lg-6">
                    <div class="tile-footer-menu__item">
                        <div class="tile-footer-menu__link">
                            <a class="link
                                                link_simple
                                                
                                                
                                                
                                                
                                                
                                                link_large
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                " href="#">
                                <span>Blog</span>
                            </a>

                        </div>
                    </div>
                </li>
                <li class="col-xs-6 col-ms-6 col-sm-12 col-md-6 col-lg-6">
                    <div class="tile-footer-menu__item">
                        <div class="tile-footer-menu__link">
                            <a class="link
                                                link_simple
                                                
                                                
                                                
                                                
                                                
                                                link_large
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                " href="#">
                                <span>Opiniones Hipotecas</span>
                            </a>

                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
 
<div class="tile-footer-menu">
    <div class="tile-footer-menu__title">
        {{> @title-m title }}
    </div>
    <div class="tile-footer-menu__body">
        {{#if isMenu}}
            <div class="tile-footer-menu__list">
                <ul class="row">
                    {{#each link}}
                        <li class="col-xs-6 col-ms-6 col-sm-12 col-md-6 col-lg-6">
                            <div class="tile-footer-menu__item">
                                <div class="tile-footer-menu__link">
                                    {{> @link this }}
                                </div>
                            </div>
                        </li>
                    {{/each}}
                </ul>
            </div>
        {{/if}}
        {{#if contact-item}}
            <div class="tile-footer-menu__contact">
                <div class="row">
                    <div class="col-xs-12 col-ms-6 col-sm-12 col-lg-12">
                        <div class="tile-footer-menu__contact-first-col">
                            <ul class="tile-footer-menu__contact-first-col-list">
                                {{#each contact-item.firstColumn}}
                                    <li class="tile-footer-menu__contact-first-col-item">
                                        {{#if this.lightbox}}
                                            <div class="tile-footer-menu__contact-link">
                                                {{> @lightbox this.lightbox }}
                                            </div>
                                        {{else}}
                                            <div class="tile-footer-menu__contact-link">
                                                {{> @link this.link }}
                                            </div>
                                        {{/if}}
                                        {{#if this.info}}
                                            <div class="tile-footer-menu__contact-info">
                                                {{> @bodycopy-s this.info }}
                                            </div>
                                        {{/if}}
                                    </li>
                                {{/each}}
                            </ul>
                        </div>
                    </div>
                    <div class="col-xs-12 col-ms-6 col-sm-12 col-lg-12">
                        <div class="tile-footer-menu__contact-second-col">
                            <ul class="tile-footer-menu__contact-second-col-list">
                                {{#each contact-item.secondColumn}}
                                    <li class="tile-footer-menu__contact-second-col-item">
                                        {{#if this.lightbox}}
                                            <div class="tile-footer-menu__contact-link">
                                                {{> @lightbox this.lightbox }}
                                            </div>
                                        {{else}}
                                            <div class="tile-footer-menu__contact-link">
                                                {{> @link this.link }}
                                            </div>
                                        {{/if}}
                                        {{#if this.info}}
                                            <div class="tile-footer-menu__contact-info">
                                                {{> @bodycopy-s this.info }}
                                            </div>
                                        {{/if}}
                                    </li>
                                {{/each}}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        {{/if}}
    </div>
</div>
 
{
  "isMenu": true,
  "title": {
    "text": "Descubre Hipotecas",
    "colorLight": true
  },
  "link": [
    {
      "isSimple": true,
      "isLarge": true,
      "href": "#",
      "text": "Calcula tu hipoteca"
    },
    {
      "isSimple": true,
      "isLarge": true,
      "href": "#",
      "text": "Te ayudamos"
    },
    {
      "isSimple": true,
      "isLarge": true,
      "href": "#",
      "text": "Somos Hipotecas"
    },
    {
      "isSimple": true,
      "isLarge": true,
      "href": "#",
      "text": "Preguntas frecuentes"
    },
    {
      "isSimple": true,
      "isLarge": true,
      "href": "#",
      "text": "Quiénes somos"
    },
    {
      "isSimple": true,
      "isLarge": true,
      "href": "#",
      "text": "Blog"
    },
    {
      "isSimple": true,
      "isLarge": true,
      "href": "#",
      "text": "Opiniones Hipotecas"
    }
  ]
}
  • Content: 
    .tile-footer-menu {
    &__title {
        margin-bottom: 20px;

        @media (--viewport-xs-max) {
            margin-bottom: 30px;
        }
    }

    &__item {
        margin-bottom: 20px;

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

    &__link {
        .link {
            color: var(--color-txt-secondary);

            &:hover,
            &:focus {
                color: var(--color-txt-tertiary);

                span {
                    &::after {
                        background-color: var(--color-txt-tertiary);
                    }
                }

                .icon {
                    fill: var(--color-txt-tertiary);
                }
            }
        }
    }

    &__contact {
        &-first-col {
            @media (--viewport-xs-max) {
                margin-bottom: 30px;
            }

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

        &-second-col {
            &-item {
                margin-bottom: 20px;

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

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

                &:last-child {
                    margin-bottom: 0;

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

        &-link {
            .link {
                color: var(--color-txt-secondary);
                span:after{
                    background-color: var(--color-txt-secondary);
                }

                &:hover,
                &:focus {
                    color: var(--color-txt-tertiary);

                    span {
                        &::after {
                            background-color: var(--color-txt-tertiary);
                        }
                    }

                    .icon {
                        fill: var(--color-txt-tertiary);
                    }
                }

                &_second-link {
                    &::before {
                        color: var(--color-txt-secondary);
                    }
                }
            }
            .link_has-icon .icon{
                fill: var(--color-txt-secondary);
            }
        }

        &-info {
            margin-top: 5px;

            .bodycopy-s {
                color: var(--color-txt-secondary);
            }
        }
    }

    &__reduced {
        &-first-col {
            @media (--viewport-xs-max) {
                margin-bottom: 30px;
            }
        }

        &-second-col {
            &-item {
                margin-bottom: 20px;

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

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

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }

        &-third-col, &-fourth-col {
            &-item {
                @media (--viewport-xs-max) {
                    margin-top: 20px;
                    margin-bottom: 20px;
                }

                @media (--viewport-ms-only) {
                    margin-top: 30px;
                }

                .link {
                    color: var(--color-txt-secondary);

                    span {
                        &::after {
                            background-color: var(--color-txt-secondary);
                        }
                    }

                    &:hover,
                    &:focus {
                        color: var(--color-txt-tertiary);

                        span {
                            &::after {
                                background-color: var(--color-txt-tertiary);
                            }
                        }

                        .icon {
                            fill: var(--color-secondary);
                        }
                    }
                }
            }
        }

        &-link {
            .link {
                color: var(--color-txt-secondary);

                &:hover,
                &:focus {
                    color: var(--color-txt-tertiary);

                    span {
                        &::after {
                            background-color: var(--color-txt-tertiary);
                        }
                    }

                    .icon {
                        fill: var(--color-txt-tertiary);
                    }
                }

                &_second-link {
                    &::before {
                        color: var(--color-txt-secondary);
                    }
                }

                svg{fill: var(--color-txt-secondary);}
            }
        }

        &-info {
            margin-top: 5px;

            .bodycopy-s {
                color: var(--color-txt-secondary);
            }
        }
    }
}
  • URL: /components/raw/tile-footer-menu/tile-footer-menu.css
  • Filesystem Path: src/02-molecules/tile-footer-menu/tile-footer-menu.css
  • Size: 5.1 KB

No notes defined.