About the Author

By Harry Manchanda

article news blog about social icons profile

How do I use This?

About the author of an article usually found at the bottom of a news article.

HTML

<div class="about-the-author">
  <h3 class="author-title">About the Author</h3>
  <div class="row">
    <div class="small-12 medium-4 columns">
      <div class="author-image">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/President_Barack_Obama.jpg/480px-President_Barack_Obama.jpg">
      </div>
      <div class="author-social">
        <a href="#">
          <span class="fa-stack fa-lg facebook">
            <i class="fa fa-circle fa-stack-2x"></i>
            <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
          </span>
        </a>
        <a href="#">
          <span class="fa-stack fa-lg twitter">
            <i class="fa fa-circle fa-stack-2x"></i>
            <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
          </span>
        </a>
        <a href="#">
          <span class="fa-stack fa-lg linkedin">
            <i class="fa fa-circle fa-stack-2x"></i>
            <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
          </span>
        </a>
      </div>
    </div>
    <div class="small-12 medium-8 columns">
      <h4 class="separator-left">Barack Obama</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores eum, iusto vel repudiandae, quaerat soluta sequi officia. Blanditiis atque, illo eaque sint in architecto illum nostrum repudiandae labore tenetur! Eaque impedit pariatur odio ad ipsum qui aspernatur dolorem consequuntur a molestias nisi, quae voluptatem expedita, inventore voluptatibus dolores, veritatis corporis facilis laudantium explicabo vero! Non hic quia facilis blanditiis eum.</p>
    </div>
  </div>
</div>

// Source: https://designpieces.com/2012/12/social-media-colours-hex-and-rgb/
$social-brand-facebook: #3b5998;
$social-brand-twitter: #55acee;
$social-brand-linkedin: #007bb5;
$about-the-author-text-transform: uppercase;
$about-the-author-separator-width: 5rem;
$about-the-author-separator-thickness: 0.125rem;

.about-the-author {
  background-color: $white;
  padding: 1rem;
  border: 1px solid $medium-gray;

  .separator-left {
    text-align: left;
    @include clearfix;

    &::after {
      position: relative;
      width: $about-the-author-separator-width;
      border-bottom: $about-the-author-separator-thickness solid $primary-color;
      margin: 0.3rem auto 0;
      margin-left: 0;
    }
  }

  .author-title {
    text-transform: $about-the-author-text-transform;
  }

  .author-social {
    text-align: center;
    margin-top: 0.7rem;
    margin-bottom: 0.7rem;

    .fa-stack {
      display: inline-block;

      &.facebook {
        color: lighten($social-brand-facebook, 10%);

        &:hover,
        &:focus {
          color: $social-brand-facebook;
        }
      }

      &.twitter {
        color: lighten($social-brand-twitter, 10%);

        &:hover,
        &:focus {
          color: $social-brand-twitter;
        }
      }

      &.linkedin {
        color: lighten($social-brand-linkedin, 10%);

        &:hover,
        &:focus {
          color: $social-brand-linkedin;
        }
      }
    }
  }

  .author-image {
    border: 1px solid $medium-gray;
  }
}

.about-the-author {
  background-color: #fefefe;
  padding: 1rem;
  border: 1px solid #cacaca;
}

.about-the-author .separator-left {
  text-align: left;
}

.about-the-author .separator-left::before, .about-the-author .separator-left::after {
  display: table;
  content: ' ';
  -webkit-flex-basis: 0;
      -ms-flex-preferred-size: 0;
          flex-basis: 0;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
}

.about-the-author .separator-left::after {
  clear: both;
}

.about-the-author .separator-left::after {
  position: relative;
  width: 5rem;
  border-bottom: 0.125rem solid #1779ba;
  margin: 0.3rem auto 0;
  margin-left: 0;
}

.about-the-author .author-title {
  text-transform: uppercase;
}

.about-the-author .author-social {
  text-align: center;
  margin-top: 0.7rem;
  margin-bottom: 0.7rem;
}

.about-the-author .author-social .fa-stack {
  display: inline-block;
}

.about-the-author .author-social .fa-stack.facebook {
  color: #4c70ba;
}

.about-the-author .author-social .fa-stack.facebook:hover, .about-the-author .author-social .fa-stack.facebook:focus {
  color: #3b5998;
}

.about-the-author .author-social .fa-stack.twitter {
  color: #83c3f3;
}

.about-the-author .author-social .fa-stack.twitter:hover, .about-the-author .author-social .fa-stack.twitter:focus {
  color: #55acee;
}

.about-the-author .author-social .fa-stack.linkedin {
  color: #009ee8;
}

.about-the-author .author-social .fa-stack.linkedin:hover, .about-the-author .author-social .fa-stack.linkedin:focus {
  color: #007bb5;
}

.about-the-author .author-image {
  border: 1px solid #cacaca;
}

About the Author

By Harry Manchanda

Responsive Blog Post

Featured Image Block grid

Featured Articles with Side Links

About the Author

By Harry Manchanda

Similar Building Blocks

Responsive Blog Post

Featured Image Block grid

Featured Articles with Side Links