UI Cards

index.pug

doctype html
html.no-js(lang="en-GB")
  head
    meta(charset="utf-8")
    meta(http-equiv="x-ua-compatible", content="ie=edge")
    meta(name="description", content="An example pen showing how a basic CSS Grid container can create a nice, responsive card layout.")
    meta(name="viewport", content="width=device-width, initial-scale=1, shrink-to-fit=no")
    title CSS Grid Cards

.grid
  .grid__item
    .card
      img.card__img(src='https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80', alt='Snowy Mountains')
      .card__content
        h1.card__header A starry night
        p.card__text
          | Look up at the night sky, and find yourself <strong>immersed</strong> in the amazing mountain range of Aspen. 
        button.card__btn Explore <span>&rarr;</span>
        
  .grid__item
    .card
      img.card__img(src='https://images.unsplash.com/photo-1485160497022-3e09382fb310?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80', alt='Desert')
      .card__content
        h1.card__header Misty mornings
        p.card__text
          | Capture the stunning <strong>essence</strong> of the early morning sunrise in the Californian wilderness.
        button.card__btn Explore <span>&rarr;</span>
        
  .grid__item
    .card
      img.card__img(src='https://images.unsplash.com/photo-1506318164473-2dfd3ede3623?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80', alt='Canyons')
      .card__content
        h1.card__header Utah sunsets
        p.card__text
          | Sunsets over the <strong>stunning</strong> Utah Canyonlands, is truly something much more than incredible.
        button.card__btn Explore <span>&rarr;</span>

style.scss

// MEDIA QUERY
@mixin media($breakpoint) {
  @if $breakpoint == small {
    @media (max-width: 60em) {
      @content;
    }
  }
}

// VARIABLES
$color-header: #0d0d0d;
$color-text: #404040;

$color-btn-text: #3363ff;
$color-btn-background: #e6ecff;

$transition: .2s;

// RESET
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

// GLOBAL
html {
  box-sizing: border-box;
  font-size: 62.5%; // 10px/16px
}

body {
  display: flex;
  justify-content: center;
  align-content: center;
  padding: 6rem;
  background-color: #f5f5f5;
  font-family: "Inter", sans-serif;
  
  @include media(small) {
      padding: 3rem;
   }
}

// MAIN CONTENT
.grid {
  display: grid;
  width: 114rem;
  grid-gap: 6rem;
  grid-template-columns: repeat(
    auto-fit,
    minmax(30rem, 1fr)
  );
  align-items: start;
  
  @include media(small) {
      grid-gap: 3rem;
   }
  
  &__item {
    background-color: #fff;
    border-radius: .4rem;
    overflow: hidden;
    box-shadow: 0 3rem 6rem rgba(0, 0, 0, .1);
    cursor: pointer;
    transition: $transition;
    
    &:hover {
      transform: translateY(-.5%);
      box-shadow: 0 4rem 8rem rgba(0, 0, 0, .2);
    }
  }
}

.card {
  &__img {
    display: block;
    width: 100%;
    height: 18rem;
    object-fit: cover;
   }
  
  &__content {
    padding: 3rem 3rem;
  }
  
  &__header {
    font-size: 3rem;
    font-weight: 500;
    color: $color-header;
    margin-bottom: 1.5rem;
  }
  
  &__text {
    font-size: 1.5rem;
    letter-spacing: .1rem;
    line-height: 1.7;
    color: darken($color-text, 1%);
    margin-bottom: 2.5rem;
  }
  
  &__btn {
    display: block;
    width: 100%;
    padding: 1.5rem;
    font-size: 2rem;
    text-align: center;
    color: $color-btn-text;
    background-color: $color-btn-background;
    border: none;
    border-radius: .4rem;
    transition: $transition;
    cursor: pointer;
    
    span {
      margin-left: 1rem;
      transition: $transition;
    }
    
    &:hover,
    &:active {
      background-color: darken( $color-btn-background, 2%);
      
        span {
        margin-left: 1.5rem;
      }
    }
  }
}

ui-cards.markdown

UI Cards

A Pen by Curtis Lee on CodePen.

License.