UCI

News external: Hipotecas 

<div class="news-external">
    <div class="news-external__pic">
        <img class="news-external__img" src="/dist/images/casa-reforma.svg" alt="An icon for an external block in news">
    </div>
    <div class="news-external__label">
        <div class="text-label-m text-label-m_color_light">SIMULADORES</div>
    </div>
    <div class="news-external__title">
        <h2 class="
            title-l
            title-l_color_light
            
            
            
        ">

            ¿Cuánto me puedo gastar en la compra de una casa?

        </h2>
    </div>
    <div class="news-external__btn">
        <a class="btn 
                
                 
                
                
                
                
                
                
                
                
                
                " href="#" id="">
            Iniciar simulador
        </a>
    </div>
</div>
 
<div class="news-external">
    <div class="news-external__pic">
        <img class="news-external__img" src="{{ src }}" alt="{{ alt }}">
    </div>
    <div class="news-external__label">
        {{> @text-label-m label}}
    </div>
    <div class="news-external__title">
        {{> @title-l title}}
    </div>
    <div class="news-external__btn">
        {{> @btn btn }}
    </div>
</div>
 
{
  "src": "/dist/images/casa-reforma.svg",
  "alt": "An icon for an external block in news",
  "label": {
    "text": "SIMULADORES",
    "colorLight": true
  },
  "title": {
    "text": "¿Cuánto me puedo gastar en la compra de una casa?",
    "colorLight": true
  },
  "btn": {
    "href": "#",
    "text": "Iniciar simulador"
  }
}
  • Content: 
    .news-external {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 40px 20px;
    text-align: center;
    background-color: var(--color-accent);

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

    @media (--viewport-sm-min) {
        padding: 40px 30px;
    }

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

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

    &__title {
        margin-top: 10px;
    }

    &__btn {
        margin-top: 30px;
    }
}
  • URL: /components/raw/news-external/news-external.css
  • Filesystem Path: src/02-molecules/news-external/news-external.css
  • Size: 594 Bytes

No notes defined.