Slat

The ACME slat component is used in multiple components:

There are three (3) styles for the slat.

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

<!-- 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>Lorem ipsum dolor sit amet consectetur adipiscing elit</h3>
    </div>
  </a> </article>
<!-- end `slat` component; -->

{
  "img": "http://via.placeholder.com/72x72",
  "alt": "empty placeholder image",
  "title": "Lorem ipsum dolor sit amet consectetur adipiscing elit",
  "url": "#"
}

.slat {
  .img-cover {
    min-width: size(3);
    min-height: size(3);
  }

  h3 {
    font-size: $font-size__medium;
    font-weight: 400;
    transition: color $duration__color;
  }

  a {
    color: $color__textDark;
    text-decoration: none;
    display: flex;
    align-items: center;
    align-content: center;

    &:hover,
    &:focus {
      // don't want the kicker or trailer to be change;
      h3 {
        text-decoration: underline;
        color: $color__highlightLight;
      }

      img {
        opacity: $opacity__hover;
      }
    }
  }

  // container for the text content of the slat;
  &__text {
    padding: 0 0 0 size(0.5);
    flex-grow: 1;
  }

  &__kicker,
  &__trailer {
    font-size: $font-size__small;
  }
}

Slat (with trailer)

<!-- 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>Lorem ipsum dolor sit amet consectetur adipiscing elit</h3>
      <div class="slat__trailer">Vestibulum&nbsp;&nbsp;8min ago
      </div>
    </div>
  </a> </article>
<!-- end `slat` component; -->

{
  "trailer": {
    "section": "Vestibulum",
    "time": "8min ago"
  },
  "img": "http://via.placeholder.com/72x72",
  "alt": "empty placeholder image",
  "title": "Lorem ipsum dolor sit amet consectetur adipiscing elit",
  "url": "#"
}

.slat {
  .img-cover {
    min-width: size(3);
    min-height: size(3);
  }

  h3 {
    font-size: $font-size__medium;
    font-weight: 400;
    transition: color $duration__color;
  }

  a {
    color: $color__textDark;
    text-decoration: none;
    display: flex;
    align-items: center;
    align-content: center;

    &:hover,
    &:focus {
      // don't want the kicker or trailer to be change;
      h3 {
        text-decoration: underline;
        color: $color__highlightLight;
      }

      img {
        opacity: $opacity__hover;
      }
    }
  }

  // container for the text content of the slat;
  &__text {
    padding: 0 0 0 size(0.5);
    flex-grow: 1;
  }

  &__kicker,
  &__trailer {
    font-size: $font-size__small;
  }
}

Slat (with kicker)

<!-- 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">Vestibulum&nbsp;&nbsp;8min ago
      </div>
      <h3>Lorem ipsum dolor sit amet consectetur adipiscing elit</h3>
    </div>
  </a> </article>
<!-- end `slat` component; -->

{
  "kicker": {
    "section": "Vestibulum",
    "time": "8min ago"
  },
  "img": "http://via.placeholder.com/72x72",
  "alt": "empty placeholder image",
  "title": "Lorem ipsum dolor sit amet consectetur adipiscing elit",
  "url": "#"
}

.slat {
  .img-cover {
    min-width: size(3);
    min-height: size(3);
  }

  h3 {
    font-size: $font-size__medium;
    font-weight: 400;
    transition: color $duration__color;
  }

  a {
    color: $color__textDark;
    text-decoration: none;
    display: flex;
    align-items: center;
    align-content: center;

    &:hover,
    &:focus {
      // don't want the kicker or trailer to be change;
      h3 {
        text-decoration: underline;
        color: $color__highlightLight;
      }

      img {
        opacity: $opacity__hover;
      }
    }
  }

  // container for the text content of the slat;
  &__text {
    padding: 0 0 0 size(0.5);
    flex-grow: 1;
  }

  &__kicker,
  &__trailer {
    font-size: $font-size__small;
  }
}