Blog Post Footer

By Rafi

F6
#
social blog flexbox button icons footer svg
How do I use This?

Great for the bottom of an article or blog post. You can highlight the author and bio along with some actions. There are 2 snippets provided - one with icon-fonts and one with nicer looking SVG's (as shown). Either way, your custom icons or images will work the same way.

HTML
<!-- with icon font (fontawesome) -->
<div class="blogpost-footer-actions">
  <div class="blogpost-footer-actions-left">
    <a href="#"><i class="fa fa-heart-o" aria-hidden="true"> 4</i></a>
    <a href="#"><i class="fa fa-comment-o" aria-hidden="true"> 2</i></a>
  </div>
  <div class="blogpost-footer-actions-right">
    <a href="#"><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
    <a href="#"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
  </div>
</div>

<div class="blogpost-footer-author-section">

  <div>
    <a href="#" class="blogpost-footer-author">
      <img class="avatar" src="https://fillmurray.com/200/200" alt="" />
      <div>
        <p class="author">Bill Murray</p>
        <p class="bio">Bill Murray is an American actor, comedian, and writer.</p>
      </div>
    </a>
  </div>
  <a href="#" class="hollow button success">Follow</a>

</div>


<!-- with svg's -->
<div class="blogpost-footer-actions">
  <div class="blogpost-footer-actions-left">
    <button><svg class="svgIcon-use" width="29" height="29" viewBox="0 0 29 29"><path d="M16.215 23.716c-.348.288-.984.826-1.376 1.158a.526.526 0 0 1-.68 0c-.36-.307-.92-.78-1.22-1.03C9.22 20.734 3 15.527 3 10.734 3 7.02 5.916 4 9.5 4c1.948 0 3.77.898 5 2.434C15.73 4.898 17.552 4 19.5 4c3.584 0 6.5 3.02 6.5 6.734 0 4.9-6.125 9.96-9.785 12.982zM19.5 5.2c-1.774 0-3.423.923-4.41 2.468a.699.699 0 0 1-.59.323.706.706 0 0 1-.59-.32c-.988-1.54-2.637-2.47-4.41-2.47-2.922 0-5.3 2.49-5.3 5.54 0 4.23 6.19 9.41 9.517 12.19.217.18.566.48.783.66l.952-.79c3.496-2.88 9.348-7.72 9.348-12.05 0-3.05-2.378-5.53-5.3-5.53z"></path></svg></button>
    <button><svg class="svgIcon-use" width="29" height="29" viewBox="0 0 29 29"><path d="M21.27 20.058c1.89-1.826 2.754-4.17 2.754-6.674C24.024 8.21 19.67 4 14.1 4 8.53 4 4 8.21 4 13.384c0 5.175 4.53 9.385 10.1 9.385 1.007 0 2-.14 2.95-.41.285.25.592.49.918.7 1.306.87 2.716 1.31 4.19 1.31.276-.01.494-.14.6-.36a.625.625 0 0 0-.052-.65c-.61-.84-1.042-1.71-1.282-2.58a5.417 5.417 0 0 1-.154-.75zm-3.85 1.324l-.083-.28-.388.12a9.72 9.72 0 0 1-2.85.424c-4.96 0-8.99-3.706-8.99-8.262 0-4.556 4.03-8.263 8.99-8.263 4.95 0 8.77 3.71 8.77 8.27 0 2.25-.75 4.35-2.5 5.92l-.24.21v.32c0 .07 0 .19.02.37.03.29.1.6.19.92.19.7.49 1.4.89 2.08-.93-.14-1.83-.49-2.67-1.06-.34-.22-.88-.48-1.16-.74z"></path></svg></button>
  </div>
  <div class="blogpost-footer-actions-right">
    <button><svg class="svgIcon-use" width="29" height="29" viewBox="0 0 29 29"><path d="M21.967 11.8c.018 5.93-4.607 11.18-11.177 11.18-2.172 0-4.25-.62-6.047-1.76l-.268.422-.038.5.186.013.168.012c.3.02.44.032.6.046 2.06-.026 3.95-.686 5.49-1.86l1.12-.85-1.4-.048c-1.57-.055-2.92-1.08-3.36-2.51l-.48.146-.05.5c.22.03.48.05.75.08.48-.02.87-.07 1.25-.15l2.33-.49-2.32-.49c-1.68-.35-2.91-1.83-2.91-3.55 0-.05 0-.01-.01.03l-.49-.1-.25.44c.63.36 1.35.57 2.07.58l1.7.04L7.4 13c-.978-.662-1.59-1.79-1.618-3.047a4.08 4.08 0 0 1 .524-1.8l-.825.07a12.188 12.188 0 0 0 8.81 4.515l.59.033-.06-.59v-.02c-.05-.43-.06-.63-.06-.87a3.617 3.617 0 0 1 6.27-2.45l.2.21.28-.06c1.01-.22 1.94-.59 2.73-1.09l-.75-.56c-.1.36-.04.89.12 1.36.23.68.58 1.13 1.17.85l-.21-.45-.42-.27c-.52.8-1.17 1.48-1.92 2L22 11l.016.28c.013.2.014.35 0 .52v.04zm.998.038c.018-.22.017-.417 0-.66l-.498.034.284.41a8.183 8.183 0 0 0 2.2-2.267l.97-1.48-1.6.755c.17-.08.3-.02.34.03a.914.914 0 0 1-.13-.292c-.1-.297-.13-.64-.1-.766l.36-1.254-1.1.695c-.69.438-1.51.764-2.41.963l.48.15a4.574 4.574 0 0 0-3.38-1.484 4.616 4.616 0 0 0-4.61 4.613c0 .29.02.51.08.984l.01.02.5-.06.03-.5c-3.17-.18-6.1-1.7-8.08-4.15l-.48-.56-.36.64c-.39.69-.62 1.48-.65 2.28.04 1.61.81 3.04 2.06 3.88l.3-.92c-.55-.02-1.11-.17-1.6-.45l-.59-.34-.14.67c-.02.08-.02.16 0 .24-.01 2.12 1.55 4.01 3.69 4.46l.1-.49-.1-.49c-.33.07-.67.12-1.03.14-.18-.02-.43-.05-.64-.07l-.76-.09.23.73c.57 1.84 2.29 3.14 4.28 3.21l-.28-.89a8.252 8.252 0 0 1-4.85 1.66c-.12-.01-.26-.02-.56-.05l-.17-.01-.18-.01L2.53 21l1.694 1.07a12.233 12.233 0 0 0 6.58 1.917c7.156 0 12.2-5.73 12.18-12.18l-.002.04z"></path></svg></button>
    <button><svg class="svgIcon-use" width="29" height="29" viewBox="0 0 29 29"><path d="M16.39 23.61v-5.808h1.846a.55.55 0 0 0 .546-.48l.36-2.797a.551.551 0 0 0-.547-.62H16.39V12.67c0-.67.12-.813.828-.813h1.474a.55.55 0 0 0 .55-.55V8.803a.55.55 0 0 0-.477-.545c-.436-.06-1.36-.116-2.22-.116-2.5 0-4.13 1.62-4.13 4.248v1.513H10.56a.551.551 0 0 0-.55.55v2.797c0 .304.248.55.55.55h1.855v5.76c-4.172-.96-7.215-4.7-7.215-9.1 0-5.17 4.17-9.36 9.31-9.36 5.14 0 9.31 4.19 9.31 9.36 0 4.48-3.155 8.27-7.43 9.15M14.51 4C8.76 4 4.1 8.684 4.1 14.46c0 5.162 3.75 9.523 8.778 10.32a.55.55 0 0 0 .637-.543v-6.985a.551.551 0 0 0-.55-.55H11.11v-1.697h1.855a.55.55 0 0 0 .55-.55v-2.063c0-2.02 1.136-3.148 3.03-3.148.567 0 1.156.027 1.597.06v1.453h-.924c-1.363 0-1.93.675-1.93 1.912v1.78c0 .3.247.55.55.55h2.132l-.218 1.69H15.84c-.305 0-.55.24-.55.55v7.02c0 .33.293.59.623.54 5.135-.7 9.007-5.11 9.007-10.36C24.92 8.68 20.26 4 14.51 4"></path></svg></button>
  </div>
</div>

<div class="blogpost-footer-author-section">

  <div>
    <a href="#" class="blogpost-footer-author">
      <img class="avatar" src="https://fillmurray.com/200/200" alt="" />
      <div>
        <p class="author">Bill Murray</p>
        <p class="bio">Bill Murray is an American actor, comedian, and writer.</p>
      </div>
    </a>
  </div>
  <a href="#" class="hollow button success">Follow</a>

</div>


.blogpost-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: rem-calc(29);
  border-bottom: 1px solid $medium-gray;
  padding: 1rem;

  @include breakpoint(medium) {
    padding: 1rem 0;
  }
}

.blogpost-footer-actions-left,
.blogpost-footer-actions-right {
  a,
  button {
    color: $black;
  }

  button:hover {
    cursor: pointer;
  }

  a + a,
  button + button {
    margin-left: 0.75rem;
  }
}

.blogpost-footer-author-section {
  padding: 1.75rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  .button {
    border-radius: 5000px;
    padding: 0.875rem 1.75rem;
  }

  @include breakpoint(medium) {
    padding: 1.75rem 0;
  }
}


.blogpost-footer-author {
  display: flex;
  align-items: center;
  flex: 1 0 0;

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

  .author {
    color: $black;
    margin-left: 0.75rem;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0;
  }

  .bio {
    margin-left: 0.75rem;
    margin-bottom: 0;
    color: $dark-gray;
  }
}



.blogpost-footer-actions {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-size: 1.8125rem;
  border-bottom: 1px solid #cacaca;
  padding: 1rem;
}

@media print, screen and (min-width: 40em) {
  .blogpost-footer-actions {
    padding: 1rem 0;
  }
}

.blogpost-footer-actions-left a,
.blogpost-footer-actions-left button,
.blogpost-footer-actions-right a,
.blogpost-footer-actions-right button {
  color: #0a0a0a;
}

.blogpost-footer-actions-left button:hover,
.blogpost-footer-actions-right button:hover {
  cursor: pointer;
}

.blogpost-footer-actions-left a + a,
.blogpost-footer-actions-left button + button,
.blogpost-footer-actions-right a + a,
.blogpost-footer-actions-right button + button {
  margin-left: 0.75rem;
}

.blogpost-footer-author-section {
  padding: 1.75rem 1rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.blogpost-footer-author-section .button {
  border-radius: 5000px;
  padding: 0.875rem 1.75rem;
}

@media print, screen and (min-width: 40em) {
  .blogpost-footer-author-section {
    padding: 1.75rem 0;
  }
}

.blogpost-footer-author {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-flex: 1 0 0;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
}

.blogpost-footer-author .avatar {
  border-radius: 50%;
  height: 3.75rem;
  width: 3.75rem;
}

.blogpost-footer-author .author {
  color: #0a0a0a;
  margin-left: 0.75rem;
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 0;
}

.blogpost-footer-author .bio {
  margin-left: 0.75rem;
  margin-bottom: 0;
  color: #8a8a8a;
}
JS

Similar Building Blocks

containers

CSS Grid - Holy Grail Layout

F6
by Christine Siu
containers

CSS Masonry Grid

F6
by Rafi
containers

Portfolio Resume Scrolling Container

F6
by Kevin Ball