1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "eyebrow": "Leadership",
  "smallPreview": {
    "sizes": {
      "(min-width: 1280px) and (max-width: 1459px)": "//placehold.dev.area17.com/image/211x119?, //placehold.dev.area17.com/image/422x238? 2x",
      "(min-width: 1460px) and (max-width: 1919px)": "//placehold.dev.area17.com/image/284x160?, //placehold.dev.area17.com/image/568x320? 2x",
      "(min-width: 1920px)": "//placehold.dev.area17.com/image/280x158?, //placehold.dev.area17.com/image/560x316? 2x"
    },
    "ratio": "16:9",
    "width": 375,
    "height": 211,
    "alt": "Placeholder image (16:9)"
  },
  "title": "Why Diversity Is Hard (and Why It's Worth It)",
  "duration": "3:15"
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<figure class="m-listing-media {{ current ? " is-current" }}">
	<div class="m-listing-media__image">
		{% include 'components/atoms/image/image' with smallPreview only %}

		{% if duration %}
			<time class="m-listing-media__duration" datetime="{{ duration }}">{{ duration }}</time>
		{% endif %}
	</div>

	<figcaption class="m-listing-media__caption">
		{% if eyebrow %}
			<span class="m-listing-media__caption-eyebrow">{{ eyebrow }}</span>
		{% endif %}

		<h2 class="m-listing-media__caption-title">{{ title }}</h2>
	</figcaption>
</figure>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
.m-listing-media {
  @include columns-container;
  align-items: flex-start;
  @include breakpoint("large+") {
    flex-wrap: nowrap;
  }

  &__image {
    @include column(
      (
        xsmall: 3,
        small: 2,
        medium: 2,
        large: 2,
        xlarge: 2,
        xxlarge: 2,
        xxxlarge: 2
      )
    );
    position: relative;
    @include theme-inverse;

    &::before,
    &::after {
      content: "";
      @include stretch;
      @include trans-show-hide;
    }

    &::before {
      content: "";
      z-index: 1;
      background-color: var(--color--background);
    }

    &::after {
      content: "NOW PLAYING";
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      @include f-ui-3;
      text-align: center;
      width: 0;
      margin: auto;
    }
  }

  .is-current &__image {
    &::before,
    &::after {
      @include trans-show-hide--active;
    }

    &::before {
      opacity: 0.5;
    }
  }

  &__duration {
    @include f-ui-4;
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 2;
  }

  &__caption {
    @include column(
      (
        xsmall: 3,
        small: 2,
        medium: 2,
        large: 2,
        xlarge: 2,
        xxlarge: 2,
        xxxlarge: 2
      )
    );
    @include f-heading-1;
    padding-top: 4px;

    @include breakpoint("medium+") {
      padding-top: 0;
    }
  }

  &__caption-eyebrow {
    color: var(--color--text--aux);
  }

  &__caption-title {
  }
}