Featured Articles with Side Links

By Christine Siu

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

Featured Articles with Side Links

By Christine Siu

Featured Image Block grid

Article Row Section

About the Author

Featured Articles with Side Links

By Christine Siu

Similar Building Blocks

Featured Image Block grid

Article Row Section

About the Author