UCI

Icon button: Img 

<div class="icon-button">
    <a class="icon-button__link" href="#">
        <div class="icon-button__pic">
            <img class="icon-button__img" src="https://hipotecas.com/-/media/Project/Ecoweb/Icons/hipotecascom/hipotecas/sincompromisos.svg" alt="Icono">
        </div>
        <div class="icon-button__title">
            <p class="
                title-s
                
            ">Title del icono</p>
        </div>
    </a>
</div>
 
<div class="icon-button">
    <a class="icon-button__link" href="{{ href }}">
        {{#if isImg}}
        <div class="icon-button__pic">
            <img class="icon-button__img" src="{{ src }}" alt="{{ alt }}">
        </div>
        {{/if}}
        <div class="icon-button__title">
            {{> @title-s title }}
        </div>
    </a>
</div>
 
{
  "href": "#",
  "src": "https://hipotecas.com/-/media/Project/Ecoweb/Icons/hipotecascom/hipotecas/sincompromisos.svg",
  "alt": "Icono",
  "title": {
    "text": "Title del icono",
    "isP": true
  },
  "isImg": true
}
  • Content: 
    .icon-button {
    text-align: center;

    &__link {
        display: block;color: var(--color-accent);

        &:hover,
        &:focus,
        &.active {
            .icon-button__title {
                h1,
                h2,
                h3,
                h4,
                h5,
                h6,
                span,
                div {
                    color: var(--color-accent-dark);
                }
            }
        }
    }

    &__pic {
        width: 47px;
        height: 47px;
        margin: 15px auto 0;
        transition: all 0.3s;
        display: flex;
        justify-content:center;
        align-content: center;
    }

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

    &__title {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        div,
        span {
            transition: all 0.3s;
        }
        margin-top:15px;
        margin-bottom:15px;
    }
}
  • URL: /components/raw/icon-button/icon-button.css
  • Filesystem Path: src/02-molecules/icon-button/icon-button.css
  • Size: 985 Bytes

No notes defined.