News/Magazine Card

By Harry Manchanda

How do I use This?

Article card great for news/magazine sites layouts. Use the grid to size the cards.

HTML

<div class="news-card-tag">
  <span class="label"><a href="#">Angular 2</a></span>
  <span class="label"><a href="#">Angular 4</a></span>
</div>
<div class="card news-card">
  <img src="https://i.imgur.com/6jMbuU1.jpg">
  <div class="card-section">
    <div class="news-card-date">Sunday, 16th April</div>
    <article class="news-card-article">
      <h4 class="news-card-title"><a href="#">5 Features To Watch Out For in Angular v4</a></h4>
      <p class="news-card-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae facere, ipsam quae sit, eaque perferendis commodi!...</p>
    </article>
    <div class="news-card-author">
      <div class="news-card-author-image">
        <img src="https://i.imgur.com/lAMD2kS.jpg" alt="user">
      </div>
      <div class="news-card-author-name">
        By <a href="#">Harry Manchanda</a>
      </div>
    </div>
  </div>
</div>

$news-card-label-background: $primary-color;
$news-card-label-background-hover: scale-color($news-card-label-background, $lightness: -15%);

.news-card-tag {
  margin-bottom: 0.5rem;

  .label {
    border-radius: 0.125rem;
    background-color: $news-card-label-background;
    color: $white;

    a {
      background-color: inherit;
      color: inherit;
    }

    &:hover,
    &:focus {
      background-color: $news-card-label-background-hover;

      a {
        background-color: inherit;
        color: inherit;
      }
    }
  }
}

.news-card {
  background-color: $white;
  font-weight: 400;
  margin-bottom: 1.6rem;
  border-radius: 0.125rem;
  box-shadow: 0 1px 3px rgba(0,0,0, 0.12), 0 1px 2px rgba(0,0,0, 0.24);

  .card-section {
    background-color: inherit;

    .news-card-date {
      font-size: 1em;
      color: $dark-gray;
    }

    .news-card-article {
      background-color: inherit;

      .news-card-title {
        line-height: 1.3;
        font-weight: bold;

        a {
          text-decoration: none;
          color: $dark-gray;
          transition: color 0.5s ease;

          &:hover {
            color: $primary-color;
          }
        }
      }

      .news-card-description {
        color: $dark-gray;
      }
    }

    .news-card-author {
      overflow: hidden;
      padding-bottom: 1.6rem;

      .news-card-author-image {
        display: inline-block;
        vertical-align: middle;

        img {
          border-radius: 50%;
          margin-right: 0.6em;
        }
      }

      .news-card-author-name {
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
}

.news-card-tag {
  margin-bottom: 0.5rem;
}

.news-card-tag .label {
  border-radius: 0.125rem;
  background-color: #1779ba;
  color: #fefefe;
}

.news-card-tag .label a {
  background-color: inherit;
  color: inherit;
}

.news-card-tag .label:hover, .news-card-tag .label:focus {
  background-color: #14679e;
}

.news-card-tag .label:hover a, .news-card-tag .label:focus a {
  background-color: inherit;
  color: inherit;
}

.news-card {
  background-color: #fefefe;
  font-weight: 400;
  margin-bottom: 1.6rem;
  border-radius: 0.125rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.news-card .card-section {
  background-color: inherit;
}

.news-card .card-section .news-card-date {
  font-size: 1em;
  color: #8a8a8a;
}

.news-card .card-section .news-card-article {
  background-color: inherit;
}

.news-card .card-section .news-card-article .news-card-title {
  line-height: 1.3;
  font-weight: bold;
}

.news-card .card-section .news-card-article .news-card-title a {
  text-decoration: none;
  color: #8a8a8a;
  transition: color 0.5s ease;
}

.news-card .card-section .news-card-article .news-card-title a:hover {
  color: #1779ba;
}

.news-card .card-section .news-card-article .news-card-description {
  color: #8a8a8a;
}

.news-card .card-section .news-card-author {
  overflow: hidden;
  padding-bottom: 1.6rem;
}

.news-card .card-section .news-card-author .news-card-author-image {
  display: inline-block;
  vertical-align: middle;
}

.news-card .card-section .news-card-author .news-card-author-image img {
  border-radius: 50%;
  margin-right: 0.6em;
}

.news-card .card-section .news-card-author .news-card-author-name {
  display: inline-block;
  vertical-align: middle;
}

News/Magazine Card

By Harry Manchanda

Product Image Gallery

Featured Articles with Side Links

Responsive Hero Section

News/Magazine Card

By Harry Manchanda

Similar Building Blocks

Product Image Gallery

Featured Articles with Side Links

Responsive Hero Section