Simple Article Header

By Harry Manchanda

article news blog social icons content

How do I use This?

A Super Simple Article Header. This also includes the posts section.

HTML

<div class="simple-article-header">
  <!-- Article Published Date & Reading Time -->
  <p class="article-date-read">Published on: 21 April, 2017 - 3 min read</p>
  
  <!-- Article Title -->
  <h4 class="article-title">
    <a href="#">
      20 Best PHP Blogs You Must Follow
    </a>
  </h4>

  <!-- Article Author Name & Comment Hyperlink -->
  <p class="article-author-comments">
    <em>by <a href="#">Harry Manchanda</a></em> -
    <a class="article-comments" href="#">3 Comments</a>
  </p>

  <!-- Article Social Links -->
  <div class="article-social">
    <a href="#" class="button social facebook">
      <i class="fa fa-facebook fa-lg" aria-hidden="true"></i>
    </a>
    <a href="#" class="button social twitter">
      <i class="fa fa-twitter fa-lg" aria-hidden="true"></i>
    </a>
    <a href="#" class="button social linkedin">
      <i class="fa fa-linkedin fa-lg" aria-hidden="true"></i>
    </a>
    <a href="#" class="button social google-plus">
      <i class="fa fa-google-plus fa-lg" aria-hidden="true"></i>
    </a>
  </div>

  <!-- Article Image -->
  <div class="article-post-image">
    <div class="thumbnail">
      <img src="https://i.imgur.com/22ue2CP.jpg">
    </div>
  </div>

  <!-- Article Post Content -->
  <div class="article-post-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, quod, mollitia! Ex sed magni veritatis pariatur facere hic necessitatibus aperiam. Necessitatibus doloribus molestias velit sequi expedita laudantium odio sunt nam ratione quibusdam animi consequatur vero quam eligendi veritatis voluptatum excepturi similique perferendis, suscipit facilis itaque, cum totam quasi. Corporis quis beatae neque tenetur, ullam quisquam itaque reprehenderit amet, provident praesentium ab velit laudantium debitis enim dignissimos iure magnam voluptatum! Reiciendis aut adipisci accusantium harum ratione quaerat maxime, cum non provident dolores. Unde id quod aliquam esse officia tenetur assumenda veniam deserunt consequuntur doloremque ducimus perferendis accusamus in dolorem animi magni, quisquam fugiat quasi quaerat voluptate repellendus molestiae excepturi blanditiis. Rerum excepturi quas expedita vel, ducimus neque assumenda, necessitatibus! Eos est quas dolore fuga odio, soluta nulla totam tempora minima quis itaque sapiente ducimus veniam enim repellendus. Soluta earum consectetur voluptatum, quasi aperiam doloribus neque blanditiis, amet, odit vero, sit omnis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, quod, mollitia! Ex sed magni veritatis pariatur facere hic necessitatibus aperiam. Necessitatibus doloribus molestias velit sequi expedita laudantium odio sunt nam ratione quibusdam animi consequatur vero quam eligendi veritatis voluptatum excepturi similique perferendis, suscipit facilis itaque, cum totam quasi. Corporis quis beatae neque tenetur, ullam quisquam itaque reprehenderit amet, provident praesentium ab velit laudantium debitis enim dignissimos iure magnam voluptatum! Reiciendis aut adipisci accusantium harum ratione quaerat maxime, cum non provident dolores. Unde id quod aliquam esse officia tenetur assumenda veniam deserunt consequuntur doloremque ducimus perferendis accusamus in dolorem animi magni, quisquam fugiat quasi quaerat voluptate repellendus molestiae excepturi blanditiis. Rerum excepturi quas expedita vel, ducimus neque assumenda, necessitatibus! Eos est quas dolore fuga odio, soluta nulla totam tempora minima quis itaque sapiente ducimus veniam enim repellendus. Soluta earum consectetur voluptatum, quasi aperiam doloribus neque blanditiis, amet, odit vero, sit omnis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, quod, mollitia! Ex sed magni veritatis pariatur facere hic necessitatibus aperiam. Necessitatibus doloribus molestias velit sequi expedita laudantium odio sunt nam ratione quibusdam animi consequatur vero quam eligendi veritatis voluptatum excepturi similique perferendis, suscipit facilis itaque, cum totam quasi. Corporis quis beatae neque tenetur, ullam quisquam itaque reprehenderit amet, provident praesentium ab velit laudantium debitis enim dignissimos iure magnam voluptatum! Reiciendis aut adipisci accusantium harum ratione quaerat maxime, cum non provident dolores. Unde id quod aliquam esse officia tenetur assumenda veniam deserunt consequuntur doloremque ducimus perferendis accusamus in dolorem animi magni, quisquam fugiat quasi quaerat voluptate repellendus molestiae excepturi blanditiis. Rerum excepturi quas expedita vel, ducimus neque assumenda, necessitatibus! Eos est quas dolore fuga odio, soluta nulla totam tempora minima quis itaque sapiente ducimus veniam enim repellendus. Soluta earum consectetur voluptatum, quasi aperiam doloribus neque blanditiis, amet, odit vero, sit omnis.</p>
  </div>
</div>

$article-title-case: uppercase;

// Source: https://designpieces.com/2012/12/social-media-colours-hex-and-rgb/
$social-brand-facebook: #3b5998;
$social-brand-twitter: #55acee;
$social-brand-linkedin: #007bb5;
$social-brand-google-plus: #dd4b39;

.simple-article-header {
  background: $white;
  padding: 1.3rem 2rem .7rem;
  border: 1px solid $medium-gray;
  margin-bottom: 1rem;

  .article-date-read {
    color: $dark-gray;
  }

  .article-title {
    text-transform: $article-title-case;

    a {
      color: $black;

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

  .article-author-comments {
    a.article-comments {
      color: $dark-gray;

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

  .article-date-read,
  .article-title,
  .article-author-comments,
  .article-social,
  .article-post-image,
  .article-post-content {
    margin-bottom: 0.25rem;
  }

  .article-social {
    margin-top: 0.75rem;

    .social {
      margin-right: 0.25rem;

      &.facebook {
        @include button-style($social-brand-facebook, auto, $white);
      }
      &.twitter {
        @include button-style($social-brand-twitter, auto, $white);
      }
      &.linkedin {
        @include button-style($social-brand-linkedin, auto, $white);
      }
      &.google-plus {
        @include button-style($social-brand-google-plus, auto, $white);
      }

      > .fa {
        color: $white;

        &.fa-comments-o {
          margin-right: 0.25rem;
        }
      }
    }
  }
}

.simple-article-header {
  background: #fefefe;
  padding: 1.3rem 2rem .7rem;
  border: 1px solid #cacaca;
  margin-bottom: 1rem;
}

.simple-article-header .article-date-read {
  color: #8a8a8a;
}

.simple-article-header .article-title {
  text-transform: uppercase;
}

.simple-article-header .article-title a {
  color: #0a0a0a;
}

.simple-article-header .article-title a:hover, .simple-article-header .article-title a:focus {
  color: #1779ba;
}

.simple-article-header .article-author-comments a.article-comments {
  color: #8a8a8a;
}

.simple-article-header .article-author-comments a.article-comments:hover, .simple-article-header .article-author-comments a.article-comments:focus {
  color: #1779ba;
}

.simple-article-header .article-date-read,
.simple-article-header .article-title,
.simple-article-header .article-author-comments,
.simple-article-header .article-social,
.simple-article-header .article-post-image,
.simple-article-header .article-post-content {
  margin-bottom: 0.25rem;
}

.simple-article-header .article-social {
  margin-top: 0.75rem;
}

.simple-article-header .article-social .social {
  margin-right: 0.25rem;
}

.simple-article-header .article-social .social.facebook {
  background-color: #3b5998;
  color: #fefefe;
}

.simple-article-header .article-social .social.facebook:hover, .simple-article-header .article-social .social.facebook:focus {
  background-color: #2f477a;
  color: #fefefe;
}

.simple-article-header .article-social .social.twitter {
  background-color: #55acee;
  color: #fefefe;
}

.simple-article-header .article-social .social.twitter:hover, .simple-article-header .article-social .social.twitter:focus {
  background-color: #1a8fe8;
  color: #fefefe;
}

.simple-article-header .article-social .social.linkedin {
  background-color: #007bb5;
  color: #fefefe;
}

.simple-article-header .article-social .social.linkedin:hover, .simple-article-header .article-social .social.linkedin:focus {
  background-color: #006291;
  color: #fefefe;
}

.simple-article-header .article-social .social.google-plus {
  background-color: #dd4b39;
  color: #fefefe;
}

.simple-article-header .article-social .social.google-plus:hover, .simple-article-header .article-social .social.google-plus:focus {
  background-color: #be3221;
  color: #fefefe;
}

.simple-article-header .article-social .social > .fa {
  color: #fefefe;
}

.simple-article-header .article-social .social > .fa.fa-comments-o {
  margin-right: 0.25rem;
}

Simple Article Header

By Harry Manchanda

Responsive Hero Section

Flexible Article with Responsive Images

Sidelines Text Divider

Simple Article Header

By Harry Manchanda

Similar Building Blocks

Responsive Hero Section

Flexible Article with Responsive Images

Sidelines Text Divider