Let us know what you think about the new Building Blocks

Wide Article Link

By Harry Manchanda

F6
#
How do I use This?

A Super simple wide article link specially useful for latest post/blog updates.

HTML
<div class="wide-article-link">
  <div class="row">
    <div class="small-12 medium-9 columns">
      <h4 class="article-title">
        <a href="#">
          Honing its dynamic pricing formula, Vacasa wants to make homeowners more cash than Airbnb
        </a>
      </h4>
      <p class="article-author"><em>by <a href="#">TechCrunch</a></em></p>
      <p class="article-elipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat longshoreman... <a href="#" class="read-more">Read more</a></p>
      <div class="article-social">
        <a href="#" class="button social comments">
          <i class="fa fa-comments-o" aria-hidden="true"></i> 0
        </a>
        <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>
    </div>
    <div class="small-12 medium-3 columns flex-container align-middle">
      <img src="https://images.pexels.com/photos/29410/pexels-photo-29410.jpg?w=1260&h=750&auto=compress&cs=tinysrgb">
    </div>
  </div>
</div>

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

.wide-article-link {
  background-color: $white;
  padding: 1rem 1rem 0.5rem;
  border: 1px solid $medium-gray;
  margin-bottom: 1rem;

  .article-title {
    a {
      color: $black;

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

  .article-elipsis {
    .read-more {
      font-weight: bold;
    }
  }

  .article-title,
  .article-author,
  .article-elipsis {
    margin-bottom: 0.25rem;
  }

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

    .social {
      margin-right: 0.25rem;

      &.comments {
        @include button-style($social-comments, auto, $white);
      }
      &.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;
        }
      }
    }
  }
}


.wide-article-link {
  background-color: #fefefe;
  padding: 1rem 1rem 0.5rem;
  border: 1px solid #cacaca;
  margin-bottom: 1rem;
}

.wide-article-link .article-title a {
  color: #0a0a0a;
}

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

.wide-article-link .article-elipsis .read-more {
  font-weight: bold;
}

.wide-article-link .article-title,
.wide-article-link .article-author,
.wide-article-link .article-elipsis {
  margin-bottom: 0.25rem;
}

.wide-article-link .article-social {
  margin-top: 0.75rem;
}

.wide-article-link .article-social .social {
  margin-right: 0.25rem;
}

.wide-article-link .article-social .social.comments {
  background-color: #8a8a8a;
  color: #fefefe;
}

.wide-article-link .article-social .social.comments:hover, .wide-article-link .article-social .social.comments:focus {
  background-color: #6e6e6e;
  color: #fefefe;
}

.wide-article-link .article-social .social.facebook {
  background-color: #3b5998;
  color: #fefefe;
}

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

.wide-article-link .article-social .social.twitter {
  background-color: #55acee;
  color: #fefefe;
}

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

.wide-article-link .article-social .social.linkedin {
  background-color: #007bb5;
  color: #fefefe;
}

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

.wide-article-link .article-social .social.google-plus {
  background-color: #dd4b39;
  color: #fefefe;
}

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

.wide-article-link .article-social .social > .fa {
  color: #fefefe;
}

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

JS