Featured Articles with Side Links

By Christine Siu

F6
#
news articles side-links blog tags flexbox
How do I use This?

A responsive featured articles area to showcase many links at once.

HTML
<div class="featured-article-side-links">
  <div class="row collapse">
    <!-- big feature -->
    <div class="small-12 medium-6 columns">
      <a href="#">
        <div class="featured-article-big">
          <div class="featured-article-tag">
            <span class="label">News</span>
          </div>
          <div class="featured-article-text">
            <p class="featured-article-title">Article Title Here <span class="author">by Jane Doe</span></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quasi quae cum itaque quis soluta quaerat adipisci qui ex, laudantium consequuntur porro perferendis a laboriosam.</p>
            <a href="#">Read More ></a>
          </div>
        </div>
      </a>
    </div>

    <!-- small feature -->
    <div class="medium-2 columns hide-for-small-only">
      <div class="featured-article-small-container">
        <a href="#">
          <div class="featured-article-small">
            <div class="featured-article-tag">
              <span class="label">News</span>
            </div>
            <div class="featured-article-text">
              <p class="featured-article-title">Another Article Title Here</p>
            </div>
          </div>
        </a>
        <a href="#">
          <div class="featured-article-small">
            <div class="featured-article-tag">
              <span class="label">News</span>
            </div>
            <div class="featured-article-text">
              <p class="featured-article-title">Another Article Title Here</p>
            </div>
          </div>
        </a>
        <a href="#">
          <div class="featured-article-small">
            <div class="featured-article-tag">
              <span class="label">News</span>
            </div>
            <div class="featured-article-text">
              <p class="featured-article-title">Another Article Title Here</p>
            </div>
          </div>
        </a>
      </div>
    </div>

    <!-- side links -->
    <div class="small-12 medium-4 columns featured-article-links-container">
      <div class="featured-article-links-header">
        Top Stories
      </div>
      <div class="featured-article-links">
        <a href="#">Article Title Here</a>
      </div>
      <div class="featured-article-links">
        <a href="#">Article Title Here</a>
      </div>
      <div class="featured-article-links">
        <a href="#">Article Title Here</a>
      </div>
      <div class="featured-article-links">
        <a href="#">Article Title Here</a>
      </div>
      <div class="featured-article-links">
        <a href="#">Article Title Here</a>
      </div>
      <div class="featured-article-links">
        <a href="#">Article Title Here</a>
      </div>
      <div class="featured-article-links">
        <a href="#">Article Title Here</a>
      </div>
      <div class="featured-article-links">
        <a href="#">Article Title Here</a>
      </div>
      <div class="featured-article-links">
        <a href="#">Article Title Here</a>
      </div>
      <div class="featured-article-links">
        <a href="#">Article Title Here</a>
      </div>
      <div class="featured-article-links">
        <a href="#">Article Title Here</a>
      </div>
    </div>
  </div>
</div>


$featured-article-text-color: $white;
$featured-article-border: rem-calc(1) solid $white;
$featured-article-links-border: rem-calc(1) solid $light-gray;
$featured-article-side-links-height: rem-calc(450);

// big feature
$featured-article-big-bg: url('https://placehold.it/600?text=Big+Feature') no-repeat center center;
$featured-article-title-size-big: rem-calc(28);
$featured-article-author-size-big: rem-calc(18);

// small feature
$featured-article-small-bg: url('https://placehold.it/200?text=Small+Feature') no-repeat center center;
$featured-article-title-size-small: rem-calc(16);
$featured-article-author-size-small: rem-calc(12);

.featured-article-big {
  background: $featured-article-big-bg;
  background-size: cover;
  height: $featured-article-side-links-height;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: rem-calc(10);
  border-right: $featured-article-border;

  .featured-article-text {
    .featured-article-title {
      font-size: $featured-article-title-size-big;
      font-weight: bold;
      line-height: rem-calc(30);
      .author {
        font-size: $featured-article-author-size-big;
      }
    }
    p {
      color: $featured-article-text-color;
      margin-bottom: 0;
    }
  }
}

.featured-article-small-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: $featured-article-side-links-height;

  :last-child .featured-article-small {
    border-bottom: 0;
  }
}

.featured-article-small {
  background: $featured-article-small-bg;
  height: $featured-article-side-links-height / 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: rem-calc(10);
  border-bottom: $featured-article-border;

  :last-child {
    border-bottom: 0;
  }

  .featured-article-text {
    .featured-article-title {
      font-size: $featured-article-title-size-small;
      font-weight: bold;
      line-height: rem-calc(15);
      max-height: rem-calc(45);
      overflow: hidden;
      text-overflow: ellipsis;
    }
    p {
      color: $featured-article-text-color;
      margin-bottom: 0;
    }
  }
}

.featured-article-links-container {
  border: $featured-article-links-border;
  background-color: $white;
  height: $featured-article-side-links-height;
  overflow: scroll;
}

.featured-article-links,
.featured-article-links-header {
  padding: rem-calc(10);
  border-bottom: $featured-article-links-border;

  &:last-child {
    border-bottom: 0;
  }
}

.featured-article-links-header {
  font-weight: 600;
  text-transform: uppercase;
}



.featured-article-big {
  background: url("https://placehold.it/600?text=Big+Feature") no-repeat center center;
  background-size: cover;
  height: 28.125rem;
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0.625rem;
  border-right: 0.0625rem solid #fefefe;
}

.featured-article-big .featured-article-text .featured-article-title {
  font-size: 1.75rem;
  font-weight: bold;
  line-height: 1.875rem;
}

.featured-article-big .featured-article-text .featured-article-title .author {
  font-size: 1.125rem;
}

.featured-article-big .featured-article-text p {
  color: #fefefe;
  margin-bottom: 0;
}

.featured-article-small-container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 28.125rem;
}

.featured-article-small-container :last-child .featured-article-small {
  border-bottom: 0;
}

.featured-article-small {
  background: url("https://placehold.it/200?text=Small+Feature") no-repeat center center;
  height: 9.375rem;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0.625rem;
  border-bottom: 0.0625rem solid #fefefe;
}

.featured-article-small :last-child {
  border-bottom: 0;
}

.featured-article-small .featured-article-text .featured-article-title {
  font-size: 1rem;
  font-weight: bold;
  line-height: 0.9375rem;
  max-height: 2.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.featured-article-small .featured-article-text p {
  color: #fefefe;
  margin-bottom: 0;
}

.featured-article-links-container {
  border: 0.0625rem solid #e6e6e6;
  background-color: #fefefe;
  height: 28.125rem;
  overflow: scroll;
}

.featured-article-links,
.featured-article-links-header {
  padding: 0.625rem;
  border-bottom: 0.0625rem solid #e6e6e6;
}

.featured-article-links:last-child,
.featured-article-links-header:last-child {
  border-bottom: 0;
}

.featured-article-links-header {
  font-weight: 600;
  text-transform: uppercase;
}
JS

Similar Building Blocks

media

Featured Image Block grid

F6
by Kevin Ball
media

Article Row Section

F6
by Rafi
media

About the Author

F6
by Harry Manchanda