Neat Article container

By Harry Manchanda

F6
#
article sticky hero header news blog social icons content container flexbox
How do I use This?

A neat Article Container that includes header, social sharing, image and content area.

HTML
<div class="neat-article-container">
  <div class="row large-8 columns align-center">
    <div class="neat-article-header">
      <div class="article-header-avatar">
        <img class="header-avatar" src="https://i.imgur.com/3AeQRbR.jpg">
      </div>
      <div class="article-header-author">
        <p class="author-name">
          Harry Manchanda
        </p>
        <p class="author-description">
          Front End Developer crawling his way to Full Stack Development. Team Member @ZURB/Yetinauts!
        </p>
        <p class="article-date-read">27 April, 2017 - 5 min read</p>
      </div>
    </div>
    <div class="neat-article-title">
      <h3 class="article-title">
        Familiarity Bias is Holding You Back: It’s Time to Embrace Arrow Functions
      </h3>
    </div>
  </div>
  <div class="neat-article-image">
    <img class="article-image" src="https://i.imgur.com/0buQ75a.jpg" alt="Space">
  </div>
  <div class="row neat-article-content">
    <div class="small-2 large-2 columns" data-sticky-container>
      <div class="sticky article-social" data-sticky data-anchor="sticky1" data-sticky-on="small">
        <div class="rounded-social-buttons">
          <a class="social-button facebook" href="#"></a>
          <a class="social-button twitter" href="#"></a>
          <a class="social-button google-plus" href="#"></a>
        </div>
      </div>
    </div>
    <div class="small-10 large-8 columns" id="sticky1">
      <div class="article-content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate accusantium unde culpa est dolorem earum in numquam accusamus, recusandae dolorum. Aperiam nesciunt iste numquam laboriosam, asperiores explicabo impedit laborum, non, itaque quae nemo, assumenda sequi autem pariatur debitis obcaecati culpa mollitia ratione perspiciatis officiis accusamus magni! Inventore ipsam alias non ea dolores veritatis vero sint libero tempore. Alias vero, libero sapiente, maxime facilis magnam, natus modi mollitia at ut numquam consequuntur expedita recusandae incidunt perspiciatis placeat sint doloribus. Ipsam numquam, optio consequuntur commodi possimus! Earum rem rerum, possimus, quae repellat modi omnis quos sapiente magni nesciunt similique atque veniam ipsa.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate accusantium unde culpa est dolorem earum in numquam accusamus, recusandae dolorum. Aperiam nesciunt iste numquam laboriosam, asperiores explicabo impedit laborum, non, itaque quae nemo, assumenda sequi autem pariatur debitis obcaecati culpa mollitia ratione perspiciatis officiis accusamus magni! Inventore ipsam alias non ea dolores veritatis vero sint libero tempore. Alias vero, libero sapiente, maxime facilis magnam, natus modi mollitia at ut numquam consequuntur expedita recusandae incidunt perspiciatis placeat sint doloribus. Ipsam numquam, optio consequuntur commodi possimus! Earum rem rerum, possimus, quae repellat modi omnis quos sapiente magni nesciunt similique atque veniam ipsa.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate accusantium unde culpa est dolorem earum in numquam accusamus, recusandae dolorum. Aperiam nesciunt iste numquam laboriosam, asperiores explicabo impedit laborum, non, itaque quae nemo, assumenda sequi autem pariatur debitis obcaecati culpa mollitia ratione perspiciatis officiis accusamus magni! Inventore ipsam alias non ea dolores veritatis vero sint libero tempore. Alias vero, libero sapiente, maxime facilis magnam, natus modi mollitia at ut numquam consequuntur expedita recusandae incidunt perspiciatis placeat sint doloribus. Ipsam numquam, optio consequuntur commodi possimus! Earum rem rerum, possimus, quae repellat modi omnis quos sapiente magni nesciunt similique atque veniam ipsa.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate accusantium unde culpa est dolorem earum in numquam accusamus, recusandae dolorum. Aperiam nesciunt iste numquam laboriosam, asperiores explicabo impedit laborum, non, itaque quae nemo, assumenda sequi autem pariatur debitis obcaecati culpa mollitia ratione perspiciatis officiis accusamus magni! Inventore ipsam alias non ea dolores veritatis vero sint libero tempore. Alias vero, libero sapiente, maxime facilis magnam, natus modi mollitia at ut numquam consequuntur expedita recusandae incidunt perspiciatis placeat sint doloribus. Ipsam numquam, optio consequuntur commodi possimus! Earum rem rerum, possimus, quae repellat modi omnis quos sapiente magni nesciunt similique atque veniam ipsa.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate accusantium unde culpa est dolorem earum in numquam accusamus, recusandae dolorum. Aperiam nesciunt iste numquam laboriosam, asperiores explicabo impedit laborum, non, itaque quae nemo, assumenda sequi autem pariatur debitis obcaecati culpa mollitia ratione perspiciatis officiis accusamus magni! Inventore ipsam alias non ea dolores veritatis vero sint libero tempore. Alias vero, libero sapiente, maxime facilis magnam, natus modi mollitia at ut numquam consequuntur expedita recusandae incidunt perspiciatis placeat sint doloribus. Ipsam numquam, optio consequuntur commodi possimus! Earum rem rerum, possimus, quae repellat modi omnis quos sapiente magni nesciunt similique atque veniam ipsa.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate accusantium unde culpa est dolorem earum in numquam accusamus, recusandae dolorum. Aperiam nesciunt iste numquam laboriosam, asperiores explicabo impedit laborum, non, itaque quae nemo, assumenda sequi autem pariatur debitis obcaecati culpa mollitia ratione perspiciatis officiis accusamus magni! Inventore ipsam alias non ea dolores veritatis vero sint libero tempore. Alias vero, libero sapiente, maxime facilis magnam, natus modi mollitia at ut numquam consequuntur expedita recusandae incidunt perspiciatis placeat sint doloribus. Ipsam numquam, optio consequuntur commodi possimus! Earum rem rerum, possimus, quae repellat modi omnis quos sapiente magni nesciunt similique atque veniam ipsa.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate accusantium unde culpa est dolorem earum in numquam accusamus, recusandae dolorum. Aperiam nesciunt iste numquam laboriosam, asperiores explicabo impedit laborum, non, itaque quae nemo, assumenda sequi autem pariatur debitis obcaecati culpa mollitia ratione perspiciatis officiis accusamus magni! Inventore ipsam alias non ea dolores veritatis vero sint libero tempore. Alias vero, libero sapiente, maxime facilis magnam, natus modi mollitia at ut numquam consequuntur expedita recusandae incidunt perspiciatis placeat sint doloribus. Ipsam numquam, optio consequuntur commodi possimus! Earum rem rerum, possimus, quae repellat modi omnis quos sapiente magni nesciunt similique atque veniam ipsa.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate accusantium unde culpa est dolorem earum in numquam accusamus, recusandae dolorum. Aperiam nesciunt iste numquam laboriosam, asperiores explicabo impedit laborum, non, itaque quae nemo, assumenda sequi autem pariatur debitis obcaecati culpa mollitia ratione perspiciatis officiis accusamus magni! Inventore ipsam alias non ea dolores veritatis vero sint libero tempore. Alias vero, libero sapiente, maxime facilis magnam, natus modi mollitia at ut numquam consequuntur expedita recusandae incidunt perspiciatis placeat sint doloribus. Ipsam numquam, optio consequuntur commodi possimus! Earum rem rerum, possimus, quae repellat modi omnis quos sapiente magni nesciunt similique atque veniam ipsa.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate accusantium unde culpa est dolorem earum in numquam accusamus, recusandae dolorum. Aperiam nesciunt iste numquam laboriosam, asperiores explicabo impedit laborum, non, itaque quae nemo, assumenda sequi autem pariatur debitis obcaecati culpa mollitia ratione perspiciatis officiis accusamus magni! Inventore ipsam alias non ea dolores veritatis vero sint libero tempore. Alias vero, libero sapiente, maxime facilis magnam, natus modi mollitia at ut numquam consequuntur expedita recusandae incidunt perspiciatis placeat sint doloribus. Ipsam numquam, optio consequuntur commodi possimus! Earum rem rerum, possimus, quae repellat modi omnis quos sapiente magni nesciunt similique atque veniam ipsa.
        </p>
      </div>
    </div>
  </div>

</div>




$social-button-size: 3.125rem;
$social-button-border-width: 0.125rem;
$social-button-font-size: 1.5625rem;
$social-button-line-height: 2em;
$social-button-border-radius: 1.6875rem;
$social-button-transition: all 0.5s ease;
$social-button-margin: 0.75rem;

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

@mixin social-button($brand-color, $brand-icon) {
  background: $brand-color;

  &:before {
    font-family: "FontAwesome";
    content: $brand-icon;
  }

  &:hover,
  &:focus {
    color: $brand-color;
    background: $white;
    border-color: $brand-color;
  }
}


.neat-article-container {
  margin-top: 1.5rem;

  .neat-article-header {
    width: 100%;
    display: flex;
    align-items: flex-start;

    .article-header-avatar {
      padding-right: 0.5rem;
      padding-left: 0.5rem;

      .header-avatar {
        width: rem-calc(60);
        height: rem-calc(60);
        border-radius: 50%;
      }
    }

    .article-header-author {
      flex: 1 0 0;

      .author-name {
        color: $black;
        margin-bottom: 0;
      }

      .author-description,
      .article-date-read {
        color: $dark-gray;
        margin-bottom: 0;
        font-size: 0.85em;
      }
    }
  }

  .neat-article-title {
    margin-top: 1rem;

    .article-title {
      color: $black;
      font-weight: 600;
    }
  }

  .neat-article-image {
    margin-top: 1.5rem;

    .article-image {
      width: 100%;
      height: 100vh;

      @include breakpoint(medium only) {
        height: 65vh;
      }

      @include breakpoint(small only) {
        height: 45vh;
      }
    }
  }

  .neat-article-content {
    margin-top: 2rem;

    .article-social {
      .rounded-social-buttons {
        text-align: center;

        .social-button {
          display: block;
          position: relative;
          cursor: pointer;
          width: $social-button-size;
          height: $social-button-size;
          border: $social-button-border-width solid transparent;
          padding: 0;
          text-decoration: none;
          text-align: center;
          color: $white;
          font-size: $social-button-font-size;
          font-weight: normal;
          line-height: $social-button-line-height;
          border-radius: $social-button-border-radius;
          transition: $social-button-transition;
          margin-right: $social-button-margin;
          margin-bottom: $social-button-margin;

          &:hover,
          &:focus {
            transform: rotate(360deg);
          }

          &.facebook {
            @include social-button($social-brand-facebook, "\f09a")
          }

          &.twitter {
            @include social-button($social-brand-twitter, "\f099")
          }

          &.google-plus {
            @include social-button($social-brand-google-plus, "\f0d5")
          }
        }
      }
    }

    .article-content {
      color: $black;
    }
  }
}




@charset "UTF-8";

.neat-article-container {
  margin-top: 1.5rem;
}

.neat-article-container .neat-article-header {
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.neat-article-container .neat-article-header .article-header-avatar {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

.neat-article-container .neat-article-header .article-header-avatar .header-avatar {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
}

.neat-article-container .neat-article-header .article-header-author {
  -webkit-flex: 1 0 0;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
}

.neat-article-container .neat-article-header .article-header-author .author-name {
  color: #0a0a0a;
  margin-bottom: 0;
}

.neat-article-container .neat-article-header .article-header-author .author-description,
.neat-article-container .neat-article-header .article-header-author .article-date-read {
  color: #8a8a8a;
  margin-bottom: 0;
  font-size: 0.85em;
}

.neat-article-container .neat-article-title {
  margin-top: 1rem;
}

.neat-article-container .neat-article-title .article-title {
  color: #0a0a0a;
  font-weight: 600;
}

.neat-article-container .neat-article-image {
  margin-top: 1.5rem;
}

.neat-article-container .neat-article-image .article-image {
  width: 100%;
  height: 100vh;
}

@media screen and (min-width: 40em) and (max-width: 63.9375em) {
  .neat-article-container .neat-article-image .article-image {
    height: 65vh;
  }
}

@media screen and (max-width: 39.9375em) {
  .neat-article-container .neat-article-image .article-image {
    height: 45vh;
  }
}

.neat-article-container .neat-article-content {
  margin-top: 2rem;
}

.neat-article-container .neat-article-content .article-social .rounded-social-buttons {
  text-align: center;
}

.neat-article-container .neat-article-content .article-social .rounded-social-buttons .social-button {
  display: block;
  position: relative;
  cursor: pointer;
  width: 3.125rem;
  height: 3.125rem;
  border: 0.125rem solid transparent;
  padding: 0;
  text-decoration: none;
  text-align: center;
  color: #fefefe;
  font-size: 1.5625rem;
  font-weight: normal;
  line-height: 2em;
  border-radius: 1.6875rem;
  transition: all 0.5s ease;
  margin-right: 0.75rem;
  margin-bottom: 0.75rem;
}

.neat-article-container .neat-article-content .article-social .rounded-social-buttons .social-button:hover, .neat-article-container .neat-article-content .article-social .rounded-social-buttons .social-button:focus {
  -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

.neat-article-container .neat-article-content .article-social .rounded-social-buttons .social-button.facebook {
  background: #3b5998;
}

.neat-article-container .neat-article-content .article-social .rounded-social-buttons .social-button.facebook:before {
  font-family: "FontAwesome";
  content: "";
}

.neat-article-container .neat-article-content .article-social .rounded-social-buttons .social-button.facebook:hover, .neat-article-container .neat-article-content .article-social .rounded-social-buttons .social-button.facebook:focus {
  color: #3b5998;
  background: #fefefe;
  border-color: #3b5998;
}

.neat-article-container .neat-article-content .article-social .rounded-social-buttons .social-button.twitter {
  background: #55acee;
}

.neat-article-container .neat-article-content .article-social .rounded-social-buttons .social-button.twitter:before {
  font-family: "FontAwesome";
  content: "";
}

.neat-article-container .neat-article-content .article-social .rounded-social-buttons .social-button.twitter:hover, .neat-article-container .neat-article-content .article-social .rounded-social-buttons .social-button.twitter:focus {
  color: #55acee;
  background: #fefefe;
  border-color: #55acee;
}

.neat-article-container .neat-article-content .article-social .rounded-social-buttons .social-button.google-plus {
  background: #dd4b39;
}

.neat-article-container .neat-article-content .article-social .rounded-social-buttons .social-button.google-plus:before {
  font-family: "FontAwesome";
  content: "";
}

.neat-article-container .neat-article-content .article-social .rounded-social-buttons .social-button.google-plus:hover, .neat-article-container .neat-article-content .article-social .rounded-social-buttons .social-button.google-plus:focus {
  color: #dd4b39;
  background: #fefefe;
  border-color: #dd4b39;
}

.neat-article-container .neat-article-content .article-content {
  color: #0a0a0a;
}
JS

Similar Building Blocks

media

Sidelines Text Divider

F6
by Rafi
media

About the Author

F6
by Harry Manchanda
media

Article Row Section

F6
by Rafi