UCI

Card: Resources Center: Default 

<div class="resources-card">

    <div class="resources-card__img">
        <a href="#" class="resources-card__img-link" title="" style="background-image:url(/dist/images/featured.jpg)">
        </a>
    </div>

    <a class="resources-card__category" href="#ok-category-link-working">
        <div class="
            text-label-s
            
            
            
        "><span>Vídeo</span></div>
    </a>

    <div class="resources-card__core">

        <div class="resources-card__text">
            <div class="resources-card__text-title">
                <h3 class="
                        title-m
                        
                        
                        
                        
                    ">O que deve ter em conta antes de comprar uma casa?</h3>
            </div>
            <div class="resources-card__text-date">
                <div class="text-label-m">10 abril 2022</div>
            </div>
        </div>

        <a class="resources-card__icon" href="#ok-arrow-link-workin">
            <div class="
    nav-arrow
    
    
">

                <svg class="icon icon-arrow-right     ">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
                </svg>

            </div>

        </a>

    </div>
</div>
 
<div class="resources-card">

    {{#if hasImage}}
    <div class="resources-card__img">
        <a href="{{ href }}" class="resources-card__img-link" title="{{ alt }}" style="background-image:url({{ src }})">
        </a>
    </div>
    {{/if}}

    <a class="resources-card__category" href="#ok-category-link-working">
        {{> @text-label-s category }}
    </a>

    <div class="resources-card__core">

        <div class="resources-card__text">
            <div class="resources-card__text-title">
                {{> @title-m title }}
            </div>
            <div class="resources-card__text-date">
                {{> @text-label-m date }}
            </div>
        </div>

        <a class="resources-card__icon" href="#ok-arrow-link-workin">
            {{ render '@nav-arrow--forward' }}
        </a>

    </div>
</div>
 
{
  "hasImage": true,
  "href": "#",
  "src": "/dist/images/featured.jpg",
  "category": {
    "text": "Vídeo"
  },
  "title": {
    "text": "O que deve ter em conta antes de comprar uma casa?"
  },
  "date": {
    "text": "10 abril 2022"
  }
}
  • Content: 
    .resources-card {

  display: flex;
  flex-flow: column;

  min-width: fit-content;
  height: fit-content;

  padding-bottom:40px;


  @media(--viewport-ms-max) {
    width: 100%;
    padding-bottom:50px;
  }



  &:hover,
  &:focus {
    .resources-card__icon {
      opacity: 1;
    }

    .resources-card__img-link {
      transform: scale(1.1);
    }
  }


  &__img {
    overflow: hidden;

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

    }
  }

  &__category {
    display: flex;
    width: fit-content;

    margin: 10px 0px;
    padding: 0px 10px;

    background-color: #DDDDDD;
    border-radius: 15px;

    cursor: pointer;

    .text-label-s {
      padding-top: 3px;
    }

    @media (--viewport-xs-max) {
      margin: 10px 20px;
    }

  }

  &__core {
    display: flex;
    flex-flow: row;
    justify-content:space-between;
    @media (--viewport-xs-max) {
      padding: 0px 20px;
    }
  }

  &__text {
    margin-right: 20px;

    &-title {
      padding-bottom: 10px;

      .title-m {
        color: var(--color-text);
      }
    }

    &-date {
      .text-label-m {
        color: #8B8B8B;
      }
    }

  }

  &__icon {
    display: flex;
    flex-flow: column;
    justify-content: flex-end;

    opacity: 0;
  }





}
  • URL: /components/raw/resources-card/resources-card.css
  • Filesystem Path: src/02-molecules/resources-card/resources-card.css
  • Size: 1.4 KB

No notes defined.