Wide Article Link

By Harry Manchanda

article news blog social icons content

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;
}

Wide Article Link

By Harry Manchanda

Promotion Hero with Links

Product Image Gallery

Featured Image Block grid

Wide Article Link

By Harry Manchanda

Similar Building Blocks

Promotion Hero with Links

Product Image Gallery

Featured Image Block grid