This component highlights results list multimedia items. There are 4 observed variants of this component including map, infographic, video, and image gallery.
<article class="list__row-meta multimedia-list-item is-gallery" style="background-image:url(/fa_prototype/assets/images/16x9_comp2.jpg);">
<div class="multimedia-list-item__gradient-wrapper">
<div class="meta">
<span class="topic"><a href="#">Immigration Reform</a></span>
<span class="date"><time pubdate datetime="2013-09-15" title="Sep. 15, 2013">Sep. 15, 2013</time></span>
<span class="type"><a href="#">Gallery</a></span>
</div>
<div class="multimedia-list-item-article">
<a href="#">
<h1 class="multimedia-list-item-article__title">Foreign Policy a la Modi</h1>
<p class="multimedia-list-item-article__deck">Where Juba Gets Its Energy. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<div class="multimedia-list-item__gallery-preview">
<img class="multimedia-list-item__gallery-preview-image" src="/fa_prototype/assets/images/16x9_comp2.jpg" />
<img class="multimedia-list-item__gallery-preview-image" src="/fa_prototype/assets/images/16x9_comp1.jpg" />
<img class="multimedia-list-item__gallery-preview-image" src="/fa_prototype/assets/images/16x9_comp3.jpg" />
<img class="multimedia-list-item__gallery-preview-image is-last" src="/fa_prototype/assets/images/16x9_comp4.jpg" />
</div>
</a>
</div>
</div>
</article>
<article class="list__row-meta multimedia-list-item is-map" style="background-image:url(/fa_prototype/assets/images/featured-map.jpg);">
<div class="multimedia-list-item__gradient-wrapper">
<div class="meta">
<span class="topic"><a href="#">Immigration Reform</a></span>
<span class="date"><time pubdate datetime="2013-09-15" title="Sep. 15, 2013">Sep. 15, 2013</time></span>
<span class="type"><a href="#">Map</a></span>
</div>
<div class="multimedia-list-item-article">
<a href="#">
<h1 class="multimedia-list-item-article__title">South Sudan's Black Gold</h1>
<p class="multimedia-list-item-article__deck">Where Juba Gets Its Energy. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</div>
</div>
</article>
<article class="list__row-meta multimedia-list-item is-infographic" style="background-image:url(/fa_prototype/assets/images/infographic.jpg);">
<div class="multimedia-list-item__gradient-wrapper">
<div class="meta">
<span class="topic"><a href="#">Immigration Reform</a></span>
<span class="date"><time pubdate datetime="2013-09-15" title="Sep. 15, 2013">Sep. 15, 2013</time></span>
<span class="type"><a href="#">Infographic</a></span>
</div>
<div class="multimedia-list-item-article">
<a href="#">
<h1 class="multimedia-list-item-article__title">A relatively longer title. This gives an example of how a longer headline might look.</h1>
<p class="multimedia-list-item-article__deck">Where Juba Gets Its Energy. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</div>
</div>
</article>
<article class="list__row-meta multimedia-list-item is-video" style="background-image:url(/fa_prototype/assets/images/video.jpg);">
<div class="multimedia-list-item__gradient-wrapper">
<div class="meta">
<span class="topic"><a href="#">Immigration Reform</a></span>
<span class="date"><time pubdate datetime="2013-09-15" title="Sep. 15, 2013">Sep. 15, 2013</time></span>
<span class="type"><a href="#">Video</a></span>
</div>
<div class="multimedia-list-item-article">
<a href="#">
<h2 class="multimedia-list-item-article__title">Foreign Affairs Focus: Muhtar Kent on Immigration Reform</h2>
<p class="multimedia-list-item-article__deck">Where Juba Gets Its Energy. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span class="multimedia-list-item-article__video-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="7 831 1000 1000"><path d="M506 852c-265.1 0-480 214.9-480 480s214.9 480 480 480 480-214.9 480-480-214.9-480-480-480zm0 925.4c-245.8 0-445.4-199.7-445.4-445.4S260.2 886.6 506 886.6s445.4 199.7 445.4 445.4-199.6 445.4-445.4 445.4zm-84.4-257.3L675 1335.8l-253.4-184.2v368.5z"/></svg></span>
</a>
</div>
</div>
</article>
<article class="list__row-meta multimedia-list-item is-audio" style="background-image:url(/fa_prototype/assets/images/audio.jpg);">
<div class="multimedia-list-item__gradient-wrapper">
<div class="meta">
<span class="topic">
<a href="#">Immigration Reform</a>
</span>
<span class="date">
<time pubdate datetime="2013-09-15" title="Sep. 15, 2013">
Sep. 15, 2013
</time>
</span>
<span class="topic"><a href="#">Immigration Reform</a></span>
<span class="date">
<time pubdate datetime="2013-09-15" title="Sep. 15, 2013">Sep. 15, 2019</time>
</span>
<span class="type"><a href="#">Audio</a></span>
</div>
<div class="multimedia-list-item__audio">
<a href="#">
<h2 class="multimedia-list-item-article__title">
Foreign Affairs Focus: Muhtar Kent on Immigration Reform
</h2>
<p class="multimedia-list-item-article__deck">
Where Juba Gets Its Energy. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<span class="multimedia-list-item-article__video-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="7 831 1000 1000"><path d="M506 852c-265.1 0-480 214.9-480 480s214.9 480 480 480 480-214.9 480-480-214.9-480-480-480zm0 925.4c-245.8 0-445.4-199.7-445.4-445.4S260.2 886.6 506 886.6s445.4 199.7 445.4 445.4-199.6 445.4-445.4 445.4zm-84.4-257.3L675 1335.8l-253.4-184.2v368.5z"/></svg>
</span>
</a>
</div>
</div>
</article>