Slat List

The slat-list component is a collection of slat components. This component provides dividers between the slats.

Below you can see three different variants of a slat component in the list. The “kicker” (with content before the title), “trailer” (with content after the title), and plain (just the title).

Slat List

<!-- start `slat-list` component; -->
<section class="slat-list">
  <!-- start `slat` component; -->
  <article class="slat"><a href="#">
      <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
      <div class="slat__text">
        <h3>Vivamus molestie nulla a posuere dictum</h3>
      </div>
    </a> </article>
  <!-- end `slat` component; -->
  <hr />
  <!-- start `slat` component; -->
  <article class="slat"><a href="#">
      <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
      <div class="slat__text">
        <h3>Suspendisse at lacus non lacus dapibus</h3>
      </div>
    </a> </article>
  <!-- end `slat` component; -->
  <hr />
  <!-- start `slat` component; -->
  <article class="slat"><a href="#">
      <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
      <div class="slat__text">
        <h3>Nulla a sapien ut urna hendrerit sceler</h3>
      </div>
    </a> </article>
  <!-- end `slat` component; -->
</section>
<!-- end `slat-list` component; -->

{
  "stories": [
    {
      "img": "http://via.placeholder.com/72x72",
      "alt": "empty placeholder image",
      "title": "Vivamus molestie nulla a posuere dictum",
      "url": "#"
    },
    {
      "img": "http://via.placeholder.com/72x72",
      "alt": "empty placeholder image",
      "title": "Suspendisse at lacus non lacus dapibus",
      "url": "#"
    },
    {
      "img": "http://via.placeholder.com/72x72",
      "alt": "empty placeholder image",
      "title": "Nulla a sapien ut urna hendrerit sceler",
      "url": "#"
    }
  ]
}

.slat-list {
  margin-top: size(1);

  &__title {
    font-size: $font-size__large;
    padding: size(1) 0;
  }

  hr {
    border: 0;
    border-top: 1px solid $color__highlightLight;
    margin: size(0.5) 0 (size(0.5) - 1);
  }
}

Slat List with kicker

<!-- start `slat-list` component; -->
<section class="slat-list">
  <h2 class="slat-list__title">Right Now</h2>
  <!-- start `slat` component; -->
  <article class="slat"><a href="#">
      <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
      <div class="slat__text">
        <div class="slat__kicker">NFL&nbsp;&nbsp;8min ago
        </div>
        <h3>Donec vehicula massa nec nisi vestibulum vulputate</h3>
      </div>
    </a> </article>
  <!-- end `slat` component; -->
  <hr />
  <!-- start `slat` component; -->
  <article class="slat"><a href="#">
      <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
      <div class="slat__text">
        <div class="slat__kicker">NFL&nbsp;&nbsp;8min ago
        </div>
        <h3>Praesent hendrerit massa sit amet nulla bibendum</h3>
      </div>
    </a> </article>
  <!-- end `slat` component; -->
  <hr />
  <!-- start `slat` component; -->
  <article class="slat"><a href="#">
      <div class="slat__text">
        <div class="slat__kicker">NCAA&nbsp;&nbsp;8min ago
        </div>
        <h3>Vivamus vel turpis quis nunc aliquet interdum</h3>
      </div>
    </a> </article>
  <!-- end `slat` component; -->
  <hr />
  <!-- start `slat` component; -->
  <article class="slat"><a href="#">
      <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
      <div class="slat__text">
        <div class="slat__kicker">Soccer&nbsp;&nbsp;8min ago
        </div>
        <h3>Integer vel sem vitae ligula semper auctoracsit</h3>
      </div>
    </a> </article>
  <!-- end `slat` component; -->
  <hr />
  <!-- start `slat` component; -->
  <article class="slat"><a href="#">
      <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
      <div class="slat__text">
        <div class="slat__kicker">Golf&nbsp;&nbsp;8min ago
        </div>
        <h3>Nam placerat risus faucibus dui vehicula malesuada</h3>
      </div>
    </a> </article>
  <!-- end `slat` component; -->
  <hr />
  <!-- start `slat` component; -->
  <article class="slat"><a href="#">
      <div class="slat__text">
        <div class="slat__kicker">NFL&nbsp;&nbsp;8min ago
        </div>
        <h3>Vivamus nec lacus quis nulla venenatis viverra</h3>
      </div>
    </a> </article>
  <!-- end `slat` component; -->
  <hr />
  <!-- start `slat` component; -->
  <article class="slat"><a href="#">
      <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
      <div class="slat__text">
        <div class="slat__kicker">NBA&nbsp;&nbsp;8min ago
        </div>
        <h3>Mauris placerat sem elementum leo molestie turpis</h3>
      </div>
    </a> </article>
  <!-- end `slat` component; -->
  <hr />
  <!-- start `slat` component; -->
  <article class="slat"><a href="#">
      <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
      <div class="slat__text">
        <div class="slat__kicker">NCAA&nbsp;&nbsp;8min ago
        </div>
        <h3>Fusce lacinia nunc ac lectus sodales, sed pulvinar</h3>
      </div>
    </a> </article>
  <!-- end `slat` component; -->
</section>
<!-- end `slat-list` component; -->

{
  "title": "Right Now",
  "stories": [
    {
      "kicker": {
        "section": "NFL",
        "time": "8min ago"
      },
      "img": "http://via.placeholder.com/72x72",
      "alt": "empty placeholder image",
      "title": "Donec vehicula massa nec nisi vestibulum vulputate",
      "url": "#"
    },
    {
      "kicker": {
        "section": "NFL",
        "time": "8min ago"
      },
      "img": "http://via.placeholder.com/72x72",
      "alt": "empty placeholder image",
      "title": "Praesent hendrerit massa sit amet nulla bibendum",
      "url": "#"
    },
    {
      "kicker": {
        "section": "NCAA",
        "time": "8min ago"
      },
      "title": "Vivamus vel turpis quis nunc aliquet interdum",
      "url": "#"
    },
    {
      "kicker": {
        "section": "Soccer",
        "time": "8min ago"
      },
      "img": "http://via.placeholder.com/72x72",
      "alt": "empty placeholder image",
      "title": "Integer vel sem vitae ligula semper auctoracsit",
      "url": "#"
    },
    {
      "kicker": {
        "section": "Golf",
        "time": "8min ago"
      },
      "img": "http://via.placeholder.com/72x72",
      "alt": "empty placeholder image",
      "title": "Nam placerat risus faucibus dui vehicula malesuada",
      "url": "#"
    },
    {
      "kicker": {
        "section": "NFL",
        "time": "8min ago"
      },
      "title": "Vivamus nec lacus quis nulla venenatis viverra",
      "url": "#"
    },
    {
      "kicker": {
        "section": "NBA",
        "time": "8min ago"
      },
      "img": "http://via.placeholder.com/72x72",
      "alt": "empty placeholder image",
      "title": "Mauris placerat sem elementum leo molestie turpis",
      "url": "#"
    },
    {
      "kicker": {
        "section": "NCAA",
        "time": "8min ago"
      },
      "img": "http://via.placeholder.com/72x72",
      "alt": "empty placeholder image",
      "title": "Fusce lacinia nunc ac lectus sodales, sed pulvinar",
      "url": "#"
    }
  ]
}

.slat-list {
  margin-top: size(1);

  &__title {
    font-size: $font-size__large;
    padding: size(1) 0;
  }

  hr {
    border: 0;
    border-top: 1px solid $color__highlightLight;
    margin: size(0.5) 0 (size(0.5) - 1);
  }
}

Slat List with trailer

<!-- start `slat-list` component; -->
<section class="slat-list">
  <h2 class="slat-list__title">Popular Stories</h2>
  <!-- start `slat` component; -->
  <article class="slat"><a href="#">
      <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
      <div class="slat__text">
        <h3>Donec vehicula massa nec nisi vestibulum vulputate</h3>
        <div class="slat__trailer">NFL&nbsp;&nbsp;8min ago
        </div>
      </div>
    </a> </article>
  <!-- end `slat` component; -->
  <hr />
  <!-- start `slat` component; -->
  <article class="slat"><a href="#">
      <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
      <div class="slat__text">
        <h3>Praesent hendrerit massa sit amet nulla bibendum, non mollis dolor scelerisque</h3>
        <div class="slat__trailer">NFL&nbsp;&nbsp;8min ago
        </div>
      </div>
    </a> </article>
  <!-- end `slat` component; -->
  <hr />
  <!-- start `slat` component; -->
  <article class="slat"><a href="#">
      <div class="slat__text">
        <h3>Vivamus vel turpis quis nunc aliquet interdum</h3>
        <div class="slat__trailer">NCAA&nbsp;&nbsp;8min ago
        </div>
      </div>
    </a> </article>
  <!-- end `slat` component; -->
  <hr />
  <!-- start `slat` component; -->
  <article class="slat"><a href="#">
      <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
      <div class="slat__text">
        <h3>Integer vel sem vitae ligula semper auctor ac sit amet lectus</h3>
        <div class="slat__trailer">Soccer&nbsp;&nbsp;8min ago
        </div>
      </div>
    </a> </article>
  <!-- end `slat` component; -->
  <hr />
  <!-- start `slat` component; -->
  <article class="slat"><a href="#">
      <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
      <div class="slat__text">
        <h3>Nam placerat risus faucibus dui vehicula malesuada</h3>
        <div class="slat__trailer">Golf&nbsp;&nbsp;8min ago
        </div>
      </div>
    </a> </article>
  <!-- end `slat` component; -->
  <hr />
  <!-- start `slat` component; -->
  <article class="slat"><a href="#">
      <div class="slat__text">
        <h3>Vivamus nec lacus quis nulla venenatis viverra et a lectus hendrerit massa sit amet nulla</h3>
        <div class="slat__trailer">NFL&nbsp;&nbsp;8min ago
        </div>
      </div>
    </a> </article>
  <!-- end `slat` component; -->
  <hr />
  <!-- start `slat` component; -->
  <article class="slat"><a href="#">
      <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
      <div class="slat__text">
        <h3>Mauris placerat sem elementum leo molestie turpis sollicitudin</h3>
        <div class="slat__trailer">NBA&nbsp;&nbsp;8min ago
        </div>
      </div>
    </a> </article>
  <!-- end `slat` component; -->
  <hr />
  <!-- start `slat` component; -->
  <article class="slat"><a href="#">
      <div class="img-cover"><img src="http://via.placeholder.com/72x72" alt="empty placeholder image" /></div>
      <div class="slat__text">
        <h3>Fusce lacinia nunc ac lectus sodales, sed pulvinar ipsum tristique</h3>
        <div class="slat__trailer">NCAA&nbsp;&nbsp;8min ago
        </div>
      </div>
    </a> </article>
  <!-- end `slat` component; -->
</section>
<!-- end `slat-list` component; -->

{
  "title": "Popular Stories",
  "stories": [
    {
      "trailer": {
        "section": "NFL",
        "time": "8min ago"
      },
      "img": "http://via.placeholder.com/72x72",
      "alt": "empty placeholder image",
      "title": "Donec vehicula massa nec nisi vestibulum vulputate",
      "url": "#"
    },
    {
      "trailer": {
        "section": "NFL",
        "time": "8min ago"
      },
      "img": "http://via.placeholder.com/72x72",
      "alt": "empty placeholder image",
      "title": "Praesent hendrerit massa sit amet nulla bibendum, non mollis dolor scelerisque",
      "url": "#"
    },
    {
      "trailer": {
        "section": "NCAA",
        "time": "8min ago"
      },
      "title": "Vivamus vel turpis quis nunc aliquet interdum",
      "url": "#"
    },
    {
      "trailer": {
        "section": "Soccer",
        "time": "8min ago"
      },
      "img": "http://via.placeholder.com/72x72",
      "alt": "empty placeholder image",
      "title": "Integer vel sem vitae ligula semper auctor ac sit amet lectus",
      "url": "#"
    },
    {
      "trailer": {
        "section": "Golf",
        "time": "8min ago"
      },
      "img": "http://via.placeholder.com/72x72",
      "alt": "empty placeholder image",
      "title": "Nam placerat risus faucibus dui vehicula malesuada",
      "url": "#"
    },
    {
      "trailer": {
        "section": "NFL",
        "time": "8min ago"
      },
      "title": "Vivamus nec lacus quis nulla venenatis viverra et a lectus hendrerit massa sit amet nulla",
      "url": "#"
    },
    {
      "trailer": {
        "section": "NBA",
        "time": "8min ago"
      },
      "img": "http://via.placeholder.com/72x72",
      "alt": "empty placeholder image",
      "title": "Mauris placerat sem elementum leo molestie turpis sollicitudin",
      "url": "#"
    },
    {
      "trailer": {
        "section": "NCAA",
        "time": "8min ago"
      },
      "img": "http://via.placeholder.com/72x72",
      "alt": "empty placeholder image",
      "title": "Fusce lacinia nunc ac lectus sodales, sed pulvinar ipsum tristique",
      "url": "#"
    }
  ]
}

.slat-list {
  margin-top: size(1);

  &__title {
    font-size: $font-size__large;
    padding: size(1) 0;
  }

  hr {
    border: 0;
    border-top: 1px solid $color__highlightLight;
    margin: size(0.5) 0 (size(0.5) - 1);
  }
}