UCI

Product button: Default 

<div class="product-button">
    <a class="product-button__link" href="#">
        <div class="product-button__pic">
            <img class="product-button__img" src="/dist/images/casa-reforma.svg" alt="Product">
        </div>
        <div class="product-button__label">
            <div class="text-label-m">suma</div>
        </div>
        <div class="product-button__title">
            <h4 class="
                title-s
                
            ">Hipoteca Casa más reforma</h4>
        </div>
    </a>
</div>
 
<div class="product-button">
    <a class="product-button__link" href="{{ href }}">
        <div class="product-button__pic">
            <img class="product-button__img" src="{{ src }}" alt="{{ alt }}">
        </div>
        <div class="product-button__label">
            {{> @text-label-m label }}
        </div>
        <div class="product-button__title">
            {{> @title-s title }}
        </div>
    </a>
</div>
 
{
  "href": "#",
  "src": "/dist/images/casa-reforma.svg",
  "alt": "Product",
  "label": {
    "text": "suma"
  },
  "title": {
    "text": "Hipoteca Casa más reforma"
  }
}
  • Content: 
    .product-button {
    min-width: 180px;
    text-align: center;

    &__link {
        display: block;

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

    &__pic {
        max-width: 80px;
        margin: 0 auto 15px;
        transition: all 0.3s;
    }

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

    &__label {
        margin-bottom: 10px;
    }

    &__title {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        div,
        span {
            transition: all 0.3s;
        }
    }
}
  • URL: /components/raw/product-button/product-button.css
  • Filesystem Path: src/02-molecules/product-button/product-button.css
  • Size: 868 Bytes

No notes defined.