OCDE - Pattern Library v1.13.0

Card Image 

<!-- Default -->
cardimage


<!-- Agriculture -->
<a class="cardimage cardimage-agriculture" href="#">
    <div class="cardimage-x-top">
        <img src="/assets/images/agriculture.jpg" alt="Image description">
        <svg class="cardimage-x-icon">
            <use xlink:href="#cardimageicon-agriculture"></use>
        </svg>
    </div>
    <div class="cardimage-x-bottom">
        <span class="cardimage-x-text">Agriculture &amp; Natural Resources</span>
    </div>
</a>


<!-- Arts -->
<a class="cardimage cardimage-arts" href="#">
    <div class="cardimage-x-top">
        <img src="/assets/images/arts.jpg" alt="Image description">
        <svg class="cardimage-x-icon">
            <use xlink:href="#cardimageicon-arts"></use>
        </svg>
    </div>
    <div class="cardimage-x-bottom">
        <span class="cardimage-x-text">Arts, Media &amp; Entertainment</span>
    </div>
</a>


<!-- Construction -->
<a class="cardimage cardimage-construction" href="#">
    <div class="cardimage-x-top">
        <img src="/assets/images/construction.jpg" alt="Image description">
        <svg class="cardimage-x-icon">
            <use xlink:href="#cardimageicon-construction"></use>
        </svg>
    </div>
    <div class="cardimage-x-bottom">
        <span class="cardimage-x-text">Building &amp; Construction Trades</span>
    </div>
</a>


<!-- Education -->
<a class="cardimage cardimage-education" href="#">
    <div class="cardimage-x-top">
        <img src="/assets/images/education.jpg" alt="Image description">
        <svg class="cardimage-x-icon">
            <use xlink:href="#cardimageicon-education"></use>
        </svg>
    </div>
    <div class="cardimage-x-bottom">
        <span class="cardimage-x-text">Education Child Development &amp; Family Services</span>
    </div>
</a>


<!-- Energy -->
<a class="cardimage cardimage-energy" href="#">
    <div class="cardimage-x-top">
        <img src="/assets/images/energy.jpg" alt="Image description">
        <svg class="cardimage-x-icon">
            <use xlink:href="#cardimageicon-energy"></use>
        </svg>
    </div>
    <div class="cardimage-x-bottom">
        <span class="cardimage-x-text">Energy, Environment &amp; Utilities</span>
    </div>
</a>


<!-- Engineering -->
<a class="cardimage cardimage-engineering" href="#">
    <div class="cardimage-x-top">
        <img src="/assets/images/engineering.jpg" alt="Image description">
        <svg class="cardimage-x-icon">
            <use xlink:href="#cardimageicon-engineering"></use>
        </svg>
    </div>
    <div class="cardimage-x-bottom">
        <span class="cardimage-x-text">Engineering &amp; Architecture</span>
    </div>
</a>


<!-- Fashion -->
<a class="cardimage cardimage-fashion" href="#">
    <div class="cardimage-x-top">
        <img src="/assets/images/fashion.jpg" alt="Image description">
        <svg class="cardimage-x-icon">
            <use xlink:href="#cardimageicon-fashion"></use>
        </svg>
    </div>
    <div class="cardimage-x-bottom">
        <span class="cardimage-x-text">Fashion &amp; Interior Design</span>
    </div>
</a>


<!-- Communication -->
<a class="cardimage cardimage-communication" href="#">
    <div class="cardimage-x-top">
        <img src="/assets/images/communication.jpg" alt="Image description">
        <svg class="cardimage-x-icon">
            <use xlink:href="#cardimageicon-communication"></use>
        </svg>
    </div>
    <div class="cardimage-x-bottom">
        <span class="cardimage-x-text">Information &amp; Communication Technologies</span>
    </div>
</a>


<!-- Business -->
<a class="cardimage cardimage-business" href="#">
    <div class="cardimage-x-top">
        <img src="/assets/images/business.jpg" alt="Image description">
        <svg class="cardimage-x-icon">
            <use xlink:href="#cardimageicon-business"></use>
        </svg>
    </div>
    <div class="cardimage-x-bottom">
        <span class="cardimage-x-text">Business &amp; Finance</span>
    </div>
</a>


<!-- Hospitality -->
<a class="cardimage cardimage-hospitality" href="#">
    <div class="cardimage-x-top">
        <img src="/assets/images/hospitality.jpg" alt="Image description">
        <svg class="cardimage-x-icon">
            <use xlink:href="#cardimageicon-hospitality"></use>
        </svg>
    </div>
    <div class="cardimage-x-bottom">
        <span class="cardimage-x-text">Hospitality, Tourism &amp; Recreation</span>
    </div>
</a>


<!-- Health -->
<a class="cardimage cardimage-health" href="#">
    <div class="cardimage-x-top">
        <img src="/assets/images/health.jpg" alt="Image description">
        <svg class="cardimage-x-icon">
            <use xlink:href="#cardimageicon-health"></use>
        </svg>
    </div>
    <div class="cardimage-x-bottom">
        <span class="cardimage-x-text">Health Science &amp; Medical Technology</span>
    </div>
</a>


<!-- Manufacturing -->
<a class="cardimage cardimage-manufacturing" href="#">
    <div class="cardimage-x-top">
        <img src="/assets/images/manufacturing.jpg" alt="Image description">
        <svg class="cardimage-x-icon">
            <use xlink:href="#cardimageicon-manufacturing"></use>
        </svg>
    </div>
    <div class="cardimage-x-bottom">
        <span class="cardimage-x-text">Manufacturing &amp; Product Development</span>
    </div>
</a>


<!-- Transportation -->
<a class="cardimage cardimage-transportation" href="#">
    <div class="cardimage-x-top">
        <img src="/assets/images/transportation.jpg" alt="Image description">
        <svg class="cardimage-x-icon">
            <use xlink:href="#cardimageicon-transportation"></use>
        </svg>
    </div>
    <div class="cardimage-x-bottom">
        <span class="cardimage-x-text">Transportation</span>
    </div>
</a>


<!-- Public Services -->
<a class="cardimage cardimage-publicservices" href="#">
    <div class="cardimage-x-top">
        <img src="/assets/images/publicservices.jpg" alt="Image description">
        <svg class="cardimage-x-icon">
            <use xlink:href="#cardimageicon-publicservices"></use>
        </svg>
    </div>
    <div class="cardimage-x-bottom">
        <span class="cardimage-x-text">Public Services</span>
    </div>
</a>


<!-- Sales -->
<a class="cardimage cardimage-sales" href="#">
    <div class="cardimage-x-top">
        <img src="/assets/images/sales.jpg" alt="Image description">
        <svg class="cardimage-x-icon">
            <use xlink:href="#cardimageicon-sales"></use>
        </svg>
    </div>
    <div class="cardimage-x-bottom">
        <span class="cardimage-x-text">Marketing, Sales &amp; Service</span>
    </div>
</a>


<!-- Default -->
cardimage{{#if modifier}} {{modifier}}{{/if}}

<!-- Agriculture -->
<a class="{{render '@cardimage'}}{{#if modifier}} {{modifier}}{{/if}}" href="#">
  <div class="cardimage-x-top">
    <img src="{{imagesrc}}" alt="Image description">
    <svg class="cardimage-x-icon">
      <use xlink:href="#cardimageicon-{{icon}}"></use>
    </svg>
  </div>
  <div class="cardimage-x-bottom">
    <span class="cardimage-x-text">{{title}}</span>
  </div>
</a>

<!-- Arts -->
<a class="{{render '@cardimage'}}{{#if modifier}} {{modifier}}{{/if}}" href="#">
  <div class="cardimage-x-top">
    <img src="{{imagesrc}}" alt="Image description">
    <svg class="cardimage-x-icon">
      <use xlink:href="#cardimageicon-{{icon}}"></use>
    </svg>
  </div>
  <div class="cardimage-x-bottom">
    <span class="cardimage-x-text">{{title}}</span>
  </div>
</a>

<!-- Construction -->
<a class="{{render '@cardimage'}}{{#if modifier}} {{modifier}}{{/if}}" href="#">
  <div class="cardimage-x-top">
    <img src="{{imagesrc}}" alt="Image description">
    <svg class="cardimage-x-icon">
      <use xlink:href="#cardimageicon-{{icon}}"></use>
    </svg>
  </div>
  <div class="cardimage-x-bottom">
    <span class="cardimage-x-text">{{title}}</span>
  </div>
</a>

<!-- Education -->
<a class="{{render '@cardimage'}}{{#if modifier}} {{modifier}}{{/if}}" href="#">
  <div class="cardimage-x-top">
    <img src="{{imagesrc}}" alt="Image description">
    <svg class="cardimage-x-icon">
      <use xlink:href="#cardimageicon-{{icon}}"></use>
    </svg>
  </div>
  <div class="cardimage-x-bottom">
    <span class="cardimage-x-text">{{title}}</span>
  </div>
</a>

<!-- Energy -->
<a class="{{render '@cardimage'}}{{#if modifier}} {{modifier}}{{/if}}" href="#">
  <div class="cardimage-x-top">
    <img src="{{imagesrc}}" alt="Image description">
    <svg class="cardimage-x-icon">
      <use xlink:href="#cardimageicon-{{icon}}"></use>
    </svg>
  </div>
  <div class="cardimage-x-bottom">
    <span class="cardimage-x-text">{{title}}</span>
  </div>
</a>

<!-- Engineering -->
<a class="{{render '@cardimage'}}{{#if modifier}} {{modifier}}{{/if}}" href="#">
  <div class="cardimage-x-top">
    <img src="{{imagesrc}}" alt="Image description">
    <svg class="cardimage-x-icon">
      <use xlink:href="#cardimageicon-{{icon}}"></use>
    </svg>
  </div>
  <div class="cardimage-x-bottom">
    <span class="cardimage-x-text">{{title}}</span>
  </div>
</a>

<!-- Fashion -->
<a class="{{render '@cardimage'}}{{#if modifier}} {{modifier}}{{/if}}" href="#">
  <div class="cardimage-x-top">
    <img src="{{imagesrc}}" alt="Image description">
    <svg class="cardimage-x-icon">
      <use xlink:href="#cardimageicon-{{icon}}"></use>
    </svg>
  </div>
  <div class="cardimage-x-bottom">
    <span class="cardimage-x-text">{{title}}</span>
  </div>
</a>

<!-- Communication -->
<a class="{{render '@cardimage'}}{{#if modifier}} {{modifier}}{{/if}}" href="#">
  <div class="cardimage-x-top">
    <img src="{{imagesrc}}" alt="Image description">
    <svg class="cardimage-x-icon">
      <use xlink:href="#cardimageicon-{{icon}}"></use>
    </svg>
  </div>
  <div class="cardimage-x-bottom">
    <span class="cardimage-x-text">{{title}}</span>
  </div>
</a>

<!-- Business -->
<a class="{{render '@cardimage'}}{{#if modifier}} {{modifier}}{{/if}}" href="#">
  <div class="cardimage-x-top">
    <img src="{{imagesrc}}" alt="Image description">
    <svg class="cardimage-x-icon">
      <use xlink:href="#cardimageicon-{{icon}}"></use>
    </svg>
  </div>
  <div class="cardimage-x-bottom">
    <span class="cardimage-x-text">{{title}}</span>
  </div>
</a>

<!-- Hospitality -->
<a class="{{render '@cardimage'}}{{#if modifier}} {{modifier}}{{/if}}" href="#">
  <div class="cardimage-x-top">
    <img src="{{imagesrc}}" alt="Image description">
    <svg class="cardimage-x-icon">
      <use xlink:href="#cardimageicon-{{icon}}"></use>
    </svg>
  </div>
  <div class="cardimage-x-bottom">
    <span class="cardimage-x-text">{{title}}</span>
  </div>
</a>

<!-- Health -->
<a class="{{render '@cardimage'}}{{#if modifier}} {{modifier}}{{/if}}" href="#">
  <div class="cardimage-x-top">
    <img src="{{imagesrc}}" alt="Image description">
    <svg class="cardimage-x-icon">
      <use xlink:href="#cardimageicon-{{icon}}"></use>
    </svg>
  </div>
  <div class="cardimage-x-bottom">
    <span class="cardimage-x-text">{{title}}</span>
  </div>
</a>

<!-- Manufacturing -->
<a class="{{render '@cardimage'}}{{#if modifier}} {{modifier}}{{/if}}" href="#">
  <div class="cardimage-x-top">
    <img src="{{imagesrc}}" alt="Image description">
    <svg class="cardimage-x-icon">
      <use xlink:href="#cardimageicon-{{icon}}"></use>
    </svg>
  </div>
  <div class="cardimage-x-bottom">
    <span class="cardimage-x-text">{{title}}</span>
  </div>
</a>

<!-- Transportation -->
<a class="{{render '@cardimage'}}{{#if modifier}} {{modifier}}{{/if}}" href="#">
  <div class="cardimage-x-top">
    <img src="{{imagesrc}}" alt="Image description">
    <svg class="cardimage-x-icon">
      <use xlink:href="#cardimageicon-{{icon}}"></use>
    </svg>
  </div>
  <div class="cardimage-x-bottom">
    <span class="cardimage-x-text">{{title}}</span>
  </div>
</a>

<!-- Public Services -->
<a class="{{render '@cardimage'}}{{#if modifier}} {{modifier}}{{/if}}" href="#">
  <div class="cardimage-x-top">
    <img src="{{imagesrc}}" alt="Image description">
    <svg class="cardimage-x-icon">
      <use xlink:href="#cardimageicon-{{icon}}"></use>
    </svg>
  </div>
  <div class="cardimage-x-bottom">
    <span class="cardimage-x-text">{{title}}</span>
  </div>
</a>

<!-- Sales -->
<a class="{{render '@cardimage'}}{{#if modifier}} {{modifier}}{{/if}}" href="#">
  <div class="cardimage-x-top">
    <img src="{{imagesrc}}" alt="Image description">
    <svg class="cardimage-x-icon">
      <use xlink:href="#cardimageicon-{{icon}}"></use>
    </svg>
  </div>
  <div class="cardimage-x-bottom">
    <span class="cardimage-x-text">{{title}}</span>
  </div>
</a>
 
/* Default: No context defined. */


/* Agriculture */
{
  "modifier": "cardimage-agriculture",
  "icon": "agriculture",
  "imagesrc": "/assets/images/agriculture.jpg",
  "title": "Agriculture & Natural Resources"
}


/* Arts */
{
  "modifier": "cardimage-arts",
  "icon": "arts",
  "imagesrc": "/assets/images/arts.jpg",
  "title": "Arts, Media & Entertainment"
}


/* Construction */
{
  "modifier": "cardimage-construction",
  "icon": "construction",
  "imagesrc": "/assets/images/construction.jpg",
  "title": "Building & Construction Trades"
}


/* Education */
{
  "modifier": "cardimage-education",
  "icon": "education",
  "imagesrc": "/assets/images/education.jpg",
  "title": "Education Child Development & Family Services"
}


/* Energy */
{
  "modifier": "cardimage-energy",
  "icon": "energy",
  "imagesrc": "/assets/images/energy.jpg",
  "title": "Energy, Environment & Utilities"
}


/* Engineering */
{
  "modifier": "cardimage-engineering",
  "icon": "engineering",
  "imagesrc": "/assets/images/engineering.jpg",
  "title": "Engineering & Architecture"
}


/* Fashion */
{
  "modifier": "cardimage-fashion",
  "icon": "fashion",
  "imagesrc": "/assets/images/fashion.jpg",
  "title": "Fashion & Interior Design"
}


/* Communication */
{
  "modifier": "cardimage-communication",
  "icon": "communication",
  "imagesrc": "/assets/images/communication.jpg",
  "title": "Information & Communication Technologies"
}


/* Business */
{
  "modifier": "cardimage-business",
  "icon": "business",
  "imagesrc": "/assets/images/business.jpg",
  "title": "Business & Finance"
}


/* Hospitality */
{
  "modifier": "cardimage-hospitality",
  "icon": "hospitality",
  "imagesrc": "/assets/images/hospitality.jpg",
  "title": "Hospitality, Tourism & Recreation"
}


/* Health */
{
  "modifier": "cardimage-health",
  "icon": "health",
  "imagesrc": "/assets/images/health.jpg",
  "title": "Health Science & Medical Technology"
}


/* Manufacturing */
{
  "modifier": "cardimage-manufacturing",
  "icon": "manufacturing",
  "imagesrc": "/assets/images/manufacturing.jpg",
  "title": "Manufacturing & Product Development"
}


/* Transportation */
{
  "modifier": "cardimage-transportation",
  "icon": "transportation",
  "imagesrc": "/assets/images/transportation.jpg",
  "title": "Transportation"
}


/* Public Services */
{
  "modifier": "cardimage-publicservices",
  "icon": "publicservices",
  "imagesrc": "/assets/images/publicservices.jpg",
  "title": "Public Services"
}


/* Sales */
{
  "modifier": "cardimage-sales",
  "icon": "sales",
  "imagesrc": "/assets/images/sales.jpg",
  "title": "Marketing, Sales & Service"
}
  • Content: 
    .cardimage {
  border: 1px solid $color-interactive1;
  display: block;
  max-width: 288px;
  height: 100%;
  width: 100%;
  overflow: hidden;

  img {
    display: block;
    height: auto;
    width: 100%;
    filter: grayscale(100%);
    transition: transform $transition-duration $transition-easing;
  }

  .cardimage-x-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
    width: $gridspacing * 13;
    height: $gridspacing * 13;
  }

  .cardimage-x-top {
    position: relative;

    &:after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }

  .cardimage-x-bottom {
    background: $color-light1;
    min-height: 115px;
    padding: ($gridspacing * 2.5) ($gridspacing * 3);
    position: relative;
  }

  .cardimage-x-text {
    @include textstyle-h2-compact;
    color: $color-interactive1;
    // @include multiline-text-background($color-light2, $color-interactive1);
  }

  &:hover {

    .cardimage-x-top {
      img {
        transform: scale(1.1);
      }
    }

    .cardimage-x-text {
      text-decoration: underline;
    }
  }

  @media (min-width: $media-mobilelarge) {
    max-width: none;
  }
}

.cardimage-agriculture {
  .cardimage-x-top {
    &:after {
      @include cardimage-gradient($color-agriculture);
    }
  }
}

.cardimage-hospitality {
  .cardimage-x-top {
    &:after {
      @include cardimage-gradient($color-hospitality);
    }
  }
}

.cardimage-arts {
  .cardimage-x-top {
    &:after {
      @include cardimage-gradient($color-arts);
    }
  }
}

.cardimage-health {
  .cardimage-x-top {
    &:after {
      @include cardimage-gradient($color-health);
    }
  }
}

.cardimage-construction {
  .cardimage-x-top {
    &:after {
      @include cardimage-gradient($color-construction);
    }
  }
}

.cardimage-manufacturing {
  .cardimage-x-top {
    &:after {
      @include cardimage-gradient($color-manufacturing);
    }
  }
}

.cardimage-education {
  .cardimage-x-top {
    &:after {
      @include cardimage-gradient($color-education);
    }
  }
}

.cardimage-transportation {
  .cardimage-x-top {
    &:after {
      @include cardimage-gradient($color-transportation);
    }
  }
}

.cardimage-energy {
  .cardimage-x-top {
    &:after {
      @include cardimage-gradient($color-energy);
    }
  }
}

.cardimage-publicservices {
  .cardimage-x-top {
    &:after {
      @include cardimage-gradient($color-publicservices);
    }
  }
}

.cardimage-engineering {
  .cardimage-x-top {
    &:after {
      @include cardimage-gradient($color-engineering);
    }
  }
}

.cardimage-sales {
  .cardimage-x-top {
    &:after {
      @include cardimage-gradient($color-sales);
    }
  }
}

.cardimage-fashion {
  .cardimage-x-top {
    &:after {
      @include cardimage-gradient($color-fashion);
    }
  }
}

.cardimage-communication {
  .cardimage-x-top {
    &:after {
      @include cardimage-gradient($color-communication);
    }
  }
}

.cardimage-business {
  .cardimage-x-top {
    &:after {
      @include cardimage-gradient($color-business);
    }
  }
}
  • URL: /components/raw/cardimage/_cardimage.scss
  • Filesystem Path: src/scss/02-modules/cardimage/_cardimage.scss
  • Size: 3.2 KB

No notes defined.