Blog module: Byline and sharing icons

by jorgeluis

HTML

<div class="table">

  <div class="table-cell">
      <span class="authorbox-date">October 28, 2016</span><i> by </i><a href="http://www.wetpaint.com/author/zoe-jewell/">Zoe Jewell</a>
  </div>

  <div class="pull-right">
  
    <div class="table-cell">
 
      <div class="table icon-group">

        <div class="table-cell authorbox-share-count">
          <div class=""><span class="share-count">850</span> Shares</div>
        </div>
      
        <div class="table-cell">
          <a href="#" class="icon icon--facebook share-fb" data-shareurl="#" data-event="share-facebook">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
              <circle class="circle" cx="20" cy="20" r="20"></circle>
              <path class="path" d="M29 26.5l0.6-5h-5c0-2.1 0-3 0-3.3 0 0 0-0.1 0-0.3 0-1.4 0.3-2.1 2.1-2.1 1.6 0 3.2 0 3.2 0l0.2-4.6c0 0-1.5-0.2-3.5-0.2 -5 0-7.1 3.1-7.1 6.3 0 2.2 0 4.2 0 4.2H15v5h4.4V40c0.2 0 0.4 0 0.6 0 1.6 0 3.1-0.2 4.6-0.6V26.5H29z"></path>
            </svg>
          </a>
          <a href="#" class="icon icon--twitter share-tw" data-shareurl="#" data-event="share-twitter">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
              <circle class="circle" cx="20" cy="20" r="20"></circle>
              <path class="bird" d="M32.1 12.8c-0.9 0.3-1.7 0.6-2.7 0.8 0.9-0.6 1.7-1.5 2.1-2.6 -0.9 0.5-1.9 0.9-3 1.1 -0.9-0.9-2.1-1.5-3.4-1.5 -2.6 0-4.7 2.1-4.7 4.7 0 0.3 0 0.7 0.1 1 -3.9-0.2-7.4-2.1-9.7-4.9 -0.4 0.7-0.6 1.5-0.6 2.4 0 1.6 0.9 3.1 2.1 3.9 -0.8 0-1.5-0.3-2.1-0.6 0 0 0 0 0 0.1 0 2.3 1.6 4.2 3.8 4.6 -0.4 0.1-0.8 0.2-1.2 0.2 -0.3 0-0.6 0-0.9-0.1 0.6 1.9 2.3 3.3 4.4 3.3 -1.6 1.3-3.6 2-5.8 2 -0.3 0-0.8 0-1.1-0.1 2.1 1.4 4.5 2.1 7.2 2.1 8.6 0 13.4-7.1 13.4-13.4 0-0.2 0-0.4 0-0.6C30.7 14.6 31.5 13.8 32.1 12.8z"></path>
            </svg>
          </a>
          <a class="icon icon--email share-em" href="mailto:?subject=Some+subject&amp;body=Some+body+text" data-event="share-email">
            <svg...

CSS

/* general classes */
body {
  font: 15px/1 sans-serif;
}
.table {
  display: table;
  width: 100%;
}
.table-cell {
  display: table-cell;
  vertical-align: middle;
  padding: 5px 10px;
}
.pull-right {
  float: right;
}
.icon {
  display: inline-block;
  width: 40px;
}


.icon-group {
  white-space: nowrap;
  text-align: center;
}
.circle {
  fill: gray;
}
.path, .mark {
  fill: white;
}

.authorbox-share-count {
  background: #eee;
}