Card

The ACME card component is used in multiple components featured-stories, headline-slideshow, search-results as just a few examples.

There are two styles for the card, an overlay (text on top of the image), and stacked (text underneath the image).

The card component has two SCSS files. This is so other components can read in the configuration variables for this component - and possibly alter them when the component is nested within other components. headline-slideshow uses the card config VARS in setting styles for the slideshow.

Card Overlay

<!-- start `card` component; -->
<article class="card card--overlay"><a href="#">
    <div class="img-cover"><img src="http://via.placeholder.com/640x640" alt="empty placeholder image" /></div>
    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
  </a> </article>
<!-- end `card` component; -->

{
  "img": "http://via.placeholder.com/640x640",
  "alt": "empty placeholder image",
  "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
  "url": "#",
  "addClass": "card--overlay"
}

@import './vars';

.card {
  a {
    color: $color__textDark;
    text-decoration: none;
    display: block;
    transition: color $duration__color;

    &:hover,
    &:focus {
      color: $color__highlightLight;

      h1,
      h2,
      h3 {
        text-decoration: underline;
      }

      img {
        opacity: $opacity__hover;
      }
    }
  }
}

.card--stacked {
  padding-top: $card__img-margin; // if we used a margin on the img, the BG wouldn't show;
  background: $color__backgroundDarkShade;

  .img-cover {
    height: size(8) - $card__img-margin * 2;
    margin: 0 $card__img-margin $card__img-margin;
  }

  h2,
  h3 {
    padding: size(0.5) size(1);
  }
}

.card--overlay {
  position: relative;

  // default size is square;
  .img-cover {
    padding-bottom: 100%;
  }

  h1,
  h2,
  h3 {
    position: absolute;
    bottom: size(0.5);
    left: size(0.75);
    right: size(0.75);

    font-size: $font-size__medium;
    line-height: $line-height__medium;
    font-weight: 700;
  }
}

$card__img-margin: size(1/6);

Card Stacked

<!-- start `card` component; -->
<article class="card card--stacked"><a href="#">
    <div class="img-cover"><img src="http://via.placeholder.com/640x640" alt="empty placeholder image" /></div>
    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
  </a> </article>
<!-- end `card` component; -->

{
  "img": "http://via.placeholder.com/640x640",
  "alt": "empty placeholder image",
  "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
  "url": "#",
  "addClass": "card--stacked"
}

@import './vars';

.card {
  a {
    color: $color__textDark;
    text-decoration: none;
    display: block;
    transition: color $duration__color;

    &:hover,
    &:focus {
      color: $color__highlightLight;

      h1,
      h2,
      h3 {
        text-decoration: underline;
      }

      img {
        opacity: $opacity__hover;
      }
    }
  }
}

.card--stacked {
  padding-top: $card__img-margin; // if we used a margin on the img, the BG wouldn't show;
  background: $color__backgroundDarkShade;

  .img-cover {
    height: size(8) - $card__img-margin * 2;
    margin: 0 $card__img-margin $card__img-margin;
  }

  h2,
  h3 {
    padding: size(0.5) size(1);
  }
}

.card--overlay {
  position: relative;

  // default size is square;
  .img-cover {
    padding-bottom: 100%;
  }

  h1,
  h2,
  h3 {
    position: absolute;
    bottom: size(0.5);
    left: size(0.75);
    right: size(0.75);

    font-size: $font-size__medium;
    line-height: $line-height__medium;
    font-weight: 700;
  }
}

$card__img-margin: size(1/6);