Featured Stories

featured-stories is a full width, multi-column component. Meant for the home and section templates.

This component changes drastically based on breakpoint. The middle column of card components is only visible at the large breakpoint and above. When the middle column of card components aren't visible, the list of “Top Stories” will contain links to those stories.

The list of links is set to always the same height as the featured story. This means links don't wrap in the list (otherwise we'd have to deal with truncating multi line content - which gets us into messy JavaScript).

Featured Stories

<!-- start `featured-stories` component; -->
<div class="featured-stories">
  <div class="row">
    <div class="col-lg-6 col-md-8">
      <!-- start `card` component; -->
      <article class="card card--overlay card--featured-large"><a href="#">
          <div class="img-cover"><img src="http://via.placeholder.com/720x540" alt="empty placeholder image" /></div>
          <h1>Pellentesque in ligula et ante lobortis auctor nulla dictum mauris sit amet</h1>
        </a> </article>
      <!-- end `card` component; -->
    </div>
    <div class="col-lg-2 d-none d-lg-block">
      <!-- start `card` component; -->
      <article class="card card--overlay card--featured-small d-none d-md-block"><a href="#">
          <div class="img-cover"><img src="http://via.placeholder.com/216x162" alt="empty placeholder image" /></div>
          <h2>In ornare diam sit amet consectetur</h2>
        </a> </article>
      <!-- end `card` component; -->
      <!-- start `card` component; -->
      <article class="card card--overlay card--featured-small d-none d-md-block"><a href="#">
          <div class="img-cover"><img src="http://via.placeholder.com/216x162" alt="empty placeholder image" /></div>
          <h2>Cras tincidunt est eget leo elementum auctor</h2>
        </a> </article>
      <!-- end `card` component; -->
      <!-- start `card` component; -->
      <article class="card card--overlay card--featured-small d-none d-md-block"><a href="#">
          <div class="img-cover"><img src="http://via.placeholder.com/216x162" alt="empty placeholder image" /></div>
          <h2>Integer id ipsum vel lect tempus faucibus</h2>
        </a> </article>
      <!-- end `card` component; -->
    </div>
    <div class="col-md-4">
      <section class="featured-stories__top"><br class="d-md-none" />
        <h2>Top Stories</h2><a class="d-lg-none" href="#">In ornare diam sit amet consectetur</a> <a class="d-lg-none" href="#">Cras tincidunt est eget leo elementum auctor</a> <a class="d-lg-none" href="#">Integer id ipsum vel lect tempus faucibus</a> <a href="#">Quisque volutpat purus non mi volutpat, quis gravida urna malesuada</a> <a href="#">Morbi aliquam ligula a tellus fermentum, sed faucibus dolor dignissim</a> <a href="#">Duis eget ligula eu eros congue sollicitudin ac a arcu</a> <a href="#">Mauris non magna ac leo faucibus malesuada</a> <a href="#">Nulla euismod tellus vitae massa dictum, ut pellentesque mauris pulvinar</a> <a href="#">Maecenas sit amet enim quis risus ultricies bibendum</a> <a href="#">Ut volutpat ipsum at nisl maximus, a fermentum arcu condimentum</a> <a href="#">Nunc ornare nunc vitae leo tristique dapibus</a> <a href="#">Cras viverra justo ut congue efficitur</a> <a href="#">Vivamus nec felis posuere, finibus lectus sit amet, fermentum magna</a> <a href="#">Nunc accumsan tortor vitae dolor gravida, sit amet iaculis urna tincidunt</a> <a href="#">Aenean sodales neque nec arcu iaculis finibus</a> <a class="d-md-none d-lg-block" href="#">Phasellus consectetur orci et risus lobortis, ac egestas arcu interdum</a> <a class="d-md-none d-lg-block" href="#">Mauris ultrices lorem at diam interdum, in porttitor velit tempus</a> <a class="d-md-none d-lg-block" href="#">Nulla ut metus et nisl feugiat lacinia</a> 
      </section>
    </div>
  </div>
</div>
<!-- end `featured-stories` component; -->

{
  "lead": {
    "url": "#",
    "img": "http://via.placeholder.com/720x540",
    "alt": "empty placeholder image",
    "title": "Pellentesque in ligula et ante lobortis auctor nulla dictum mauris sit amet"
  },
  "top": {
    "title": "Top Stories",
    "stories": [
      {
        "url": "#",
        "img": "http://via.placeholder.com/216x162",
        "alt": "empty placeholder image",
        "title": "In ornare diam sit amet consectetur"
      },
      {
        "url": "#",
        "img": "http://via.placeholder.com/216x162",
        "alt": "empty placeholder image",
        "title": "Cras tincidunt est eget leo elementum auctor"
      },
      {
        "url": "#",
        "img": "http://via.placeholder.com/216x162",
        "alt": "empty placeholder image",
        "title": "Integer id ipsum vel lect tempus faucibus"
      },
      {
        "url": "#",
        "title": "Quisque volutpat purus non mi volutpat, quis gravida urna malesuada"
      },
      {
        "url": "#",
        "title": "Morbi aliquam ligula a tellus fermentum, sed faucibus dolor dignissim"
      },
      {
        "url": "#",
        "title": "Duis eget ligula eu eros congue sollicitudin ac a arcu"
      },
      {
        "url": "#",
        "title": "Mauris non magna ac leo faucibus malesuada"
      },
      {
        "url": "#",
        "title": "Nulla euismod tellus vitae massa dictum, ut pellentesque mauris pulvinar"
      },
      {
        "url": "#",
        "title": "Maecenas sit amet enim quis risus ultricies bibendum"
      },
      {
        "url": "#",
        "title": "Ut volutpat ipsum at nisl maximus, a fermentum arcu condimentum"
      },
      {
        "url": "#",
        "title": "Nunc ornare nunc vitae leo tristique dapibus"
      },
      {
        "url": "#",
        "title": "Cras viverra justo ut congue efficitur"
      },
      {
        "url": "#",
        "title": "Vivamus nec felis posuere, finibus lectus sit amet, fermentum magna"
      },
      {
        "url": "#",
        "title": "Nunc accumsan tortor vitae dolor gravida, sit amet iaculis urna tincidunt"
      },
      {
        "url": "#",
        "title": "Aenean sodales neque nec arcu iaculis finibus"
      },
      {
        "url": "#",
        "title": "Phasellus consectetur orci et risus lobortis, ac egestas arcu interdum"
      },
      {
        "url": "#",
        "title": "Mauris ultrices lorem at diam interdum, in porttitor velit tempus"
      },
      {
        "url": "#",
        "title": "Nulla ut metus et nisl feugiat lacinia"
      }
    ]
  }
}

.featured-stories {
  margin-top: size(1);

  // left rail, primary story card;
  .card--featured-large {
    .img-cover {
      height: size(17);
      padding: 0;
    }

    h1 {
      font-size: 32px;
      line-height: 36px;
      bottom: 16px;
      left: size(1);
      right: size(1);
    }
  }

  // center rail, secondary story cards;
  // visible only at certain breakpoints;
  .card--featured-small {
    margin-top: size(1);

    &:first-child {
      margin-top: 0;
    }

    .img-cover {
      height: size(5);
      padding: 0;
    }

    h3 {
      font-size: 14px;
      line-height: 20px;
      bottom: 8px;
      left: size(0.5);
      right: size(0.5);
    }
  }

  // right rail, tertiary story list;
  // Top Stories;
  &__top {
    h2 {
      font-size: $font-size__medium;
      line-height: $line-height__large;
    }

    a {
      color: $color__textDark;
      text-decoration: none;
      display: block;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: $font-size__medium;
      line-height: $line-height__large;
      transition: color $duration__color;

      @include breakpoint($breakpoint--md) {
        font-size: $font-size__small;
        line-height: $line-height__medium;
      }

      &:hover,
      &:focus {
        text-decoration: underline;
        color: $color__highlightLight;
      }
    }
  }
}