Card - Simple

PREVIEW
<a href="#" class="card-simple">
    <div class="card-simple__header">
        <div class="card-simple__icon">
            <i class="fa fa-external-link"></i>
        </div>
        <h3 class="card-simple__title">Simple Card</h3>
    </div>
    <div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
.card-simple {
  display: flex;
  flex-direction: column;
  background-color: $color-base-white;
  border: 1px solid $color-grey-dark;
  border-top: 4px solid $color-blue-medium;
  color: $color-blue-dark;
  padding: 1.2rem;
  margin-left: 0.6rem;
  margin-right: 0.6rem;
  margin-bottom: 1.2rem;
  max-width: 16.4rem;
  min-height: 20rem;

  &:hover,
  &:focus {
    outline: 0;
    text-decoration: none;
    color: $color-blue-medium;
  }
}

.card-simple__icon {
  float: right;
  color: $color-grey-dark;
}

.card-simple__title {
  @include typeTitle(true);
  margin-top: 0;
  overflow-wrap: break-word;
}

.card-simple__desc {
  flex: 1;
}

// Simple Card grouping layout
.card-simple-group {
  display: flex;
  flex-wrap: wrap;

  @media (min-width: $breakpoint-desktop) {
    margin: 0 -0.6rem;
  }

  @media (max-width: $breakpoint-tablet - 1) {
    > .card-simple {
      width: 100%;
      max-width: none;
      min-height: 0;
    }
  }
}
URL copied to clipboard!