UCI

News: Has Image 

<div class="news">
    <div class="news__pic">
        <a href="#" class="news__pic-link" title="A cover for news" style="background-image:url(/dist/images/featured.jpg)">
        </a>
    </div>
    <div class="news__content">
        <div class="news__label">
            <div class="text-label-m">12 SEP 2020</div>
        </div>
        <div class="news__title">
            <a href="#" class="news__title-link">
                <h3 class="
                        title-m
                        
                        
                        
                        
                    ">6 Consejos para aumentar el valor de la vivienda</h3>
            </a>
        </div>
        <div class="news__category">
            <a href="#" class="news__category-link">
                <div class="
                    text-label-s
                    
                    text-label-s_color_accent
                    
                "><span>ESCUELA DE HIPOTECAS</span></div>
            </a>
        </div>
    </div>
</div>
 
<div class="news">
    {{#if hasImage}}
        <div class="news__pic">
            <a
                href="{{ href }}"
                class="news__pic-link"
                title="{{ alt }}"
                style="background-image:url({{ src }})"
            >
            </a>
        </div>
    {{/if}}
    <div class="news__content">
        <div class="news__label">
            {{> @text-label-m label }}
        </div>
        <div class="news__title">
            <a href="{{ this.href }}" class="news__title-link">
                {{> @title-m title }}
            </a>
        </div>
        <div class="news__category">
            <a href="{{ category-href }}" class="news__category-link">
                {{> @text-label-s category }}
            </a>
        </div>
    </div>
</div>
 
{
  "hasImage": true,
  "href": "#",
  "src": "/dist/images/featured.jpg",
  "alt": "A cover for news",
  "label": {
    "text": "12 SEP 2020"
  },
  "title": {
    "text": "6 Consejos para aumentar el valor de la vivienda"
  },
  "category-href": "#",
  "category": {
    "text": "ESCUELA DE HIPOTECAS",
    "colorAccent": true
  }
}
  • Content: 
    .news {
    display: flex;
    flex-direction: column;
    height: 100%;

    &__pic {
        overflow: hidden;

        &-link {
            display: block;
            width: 100%;
            height: 220px;
            background: center / cover no-repeat;
            transition: all 0.5s;

            @media (--viewport-ms-min) {
                height: 200px;
            }

            &:hover,
            &:focus {
                transform: scale(1.1);
            }
        }
    }

    &__content {
        flex-grow: 1;
        padding: 40px 20px;
        text-align: center;
        background-color: var(--color-accent-light);

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

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

    &__label {
        margin-bottom: 10px;
    }

    &__title {
        &-link {
            display: block;

            &:hover,
            &:focus {
                .title-m {
                    color: var(--color-accent);
                }
            }

            .title-m {
                transition: color 0.3s;
            }
        }
    }

    &__category {
        margin-top: 20px;

        &-link {
            display: block;

            &:hover,
            &:focus {
                .text-label-s {
                    color: var(--color-accent-dark-tertiary);
                }
            }

            .text-label-s {
                transition: color 0.3s;
            }
        }
    }
}
  • URL: /components/raw/news/news.css
  • Filesystem Path: src/02-molecules/news/news.css
  • Size: 1.5 KB

No notes defined.