@coopdigital/component-card
Version:
102 lines (98 loc) • 7.21 kB
HTML
<article class="coop-c-editorialcard">
<a
href="#"
class="coop-c-editorialcard__link"
data-contenttype=""
data-contentparent=""
data-linktext=""
>
<div class="coop-c-editorialcard__inner">
<figure class="coop-c-editorialcard__media">
<picture class="coop-c-editorialcard__image">
<!-- if browser supports webp image format, serve the webp format-->
<source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/1xIj1XR8rHSadHDMhxWyid/8c0e5d881334839a0e5809c9a8af8eca/Fairtrade_Supplier_Image.jpg?fm=webp&q=60&fit=thumb&w=618&h=346 1x" type="image/webp">
<source srcset="//images.ctfassets.net/bffxiku554r1/1xIj1XR8rHSadHDMhxWyid/8c0e5d881334839a0e5809c9a8af8eca/Fairtrade_Supplier_Image.jpg?fm=webp&q=60&fit=thumb&w=618&h=346 1x" type="image/webp">
<!-- if no webp supported then default to serve progressive jpeg -->
<source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/1xIj1XR8rHSadHDMhxWyid/8c0e5d881334839a0e5809c9a8af8eca/Fairtrade_Supplier_Image.jpg?fm=jpg&q=60&fit=thumb&w=618&h=346 1x" type="image/jpeg">
<source srcset="//images.ctfassets.net/bffxiku554r1/1xIj1XR8rHSadHDMhxWyid/8c0e5d881334839a0e5809c9a8af8eca/Fairtrade_Supplier_Image.jpg?fm=jpg&q=60&fit=thumb&w=618&h=346 1x" type="image/jpeg">
<!-- fallback -->
<img src="//images.ctfassets.net/bffxiku554r1/1xIj1XR8rHSadHDMhxWyid/8c0e5d881334839a0e5809c9a8af8eca/Fairtrade_Supplier_Image.jpg?fm=jpg&q=60&fit=thumb&w=618&h=346" width="618" height="346" alt="">
</picture>
</figure>
<div class="coop-c-editorialcard__content">
<header class="coop-c-editorialcard__header">
<h3 class="coop-c-editorialcard__title">
<span>Find out the difference <span class="coop-u-nowrap">Co-op</span> makes as we celebrate 25 years of Fairtrade</span>
</h3>
</header>
</div>
</div>
</a>
</article>
<article class="coop-c-editorialcard">
<a
href="#"
class="coop-c-editorialcard__link"
data-contenttype=""
data-contentparent=""
data-linktext=""
>
<div class="coop-c-editorialcard__inner">
<figure class="coop-c-editorialcard__media">
<picture class="coop-c-editorialcard__image">
<!-- if browser supports webp image format, serve the webp format-->
<source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/1xIj1XR8rHSadHDMhxWyid/8c0e5d881334839a0e5809c9a8af8eca/Fairtrade_Supplier_Image.jpg?fm=webp&q=60&fit=thumb&w=618&h=346 1x" type="image/webp">
<source srcset="//images.ctfassets.net/bffxiku554r1/1xIj1XR8rHSadHDMhxWyid/8c0e5d881334839a0e5809c9a8af8eca/Fairtrade_Supplier_Image.jpg?fm=webp&q=60&fit=thumb&w=618&h=346 1x" type="image/webp">
<!-- if no webp supported then default to serve progressive jpeg -->
<source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/1xIj1XR8rHSadHDMhxWyid/8c0e5d881334839a0e5809c9a8af8eca/Fairtrade_Supplier_Image.jpg?fm=jpg&q=60&fit=thumb&w=618&h=346 1x" type="image/jpeg">
<source srcset="//images.ctfassets.net/bffxiku554r1/1xIj1XR8rHSadHDMhxWyid/8c0e5d881334839a0e5809c9a8af8eca/Fairtrade_Supplier_Image.jpg?fm=jpg&q=60&fit=thumb&w=618&h=346 1x" type="image/jpeg">
<!-- fallback -->
<img src="//images.ctfassets.net/bffxiku554r1/1xIj1XR8rHSadHDMhxWyid/8c0e5d881334839a0e5809c9a8af8eca/Fairtrade_Supplier_Image.jpg?fm=jpg&q=60&fit=thumb&w=618&h=346" width="618" height="346" alt="">
</picture>
</figure>
<div class="coop-c-editorialcard__content">
<header class="coop-c-editorialcard__header">
<p class="coop-c-editorialcard__subtitle">Fairtrade</p>
<h3 class="coop-c-editorialcard__title">
<span>Find out the difference <span class="coop-u-nowrap">Co-op</span> makes as we celebrate 25 years of Fairtrade</span>
</h3>
</header>
</div>
</div>
</a>
</article>
<article class="coop-c-editorialcard">
<a
href="#"
class="coop-c-editorialcard__link"
data-contenttype=""
data-contentparent=""
data-linktext=""
>
<div class="coop-c-editorialcard__inner">
<figure class="coop-c-editorialcard__media">
<picture class="coop-c-editorialcard__image">
<!-- if browser supports webp image format, serve the webp format-->
<source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/1xIj1XR8rHSadHDMhxWyid/8c0e5d881334839a0e5809c9a8af8eca/Fairtrade_Supplier_Image.jpg?fm=webp&q=60&fit=thumb&w=618&h=346 1x" type="image/webp">
<source srcset="//images.ctfassets.net/bffxiku554r1/1xIj1XR8rHSadHDMhxWyid/8c0e5d881334839a0e5809c9a8af8eca/Fairtrade_Supplier_Image.jpg?fm=webp&q=60&fit=thumb&w=618&h=346 1x" type="image/webp">
<!-- if no webp supported then default to serve progressive jpeg -->
<source media="(min-width: 64em)" srcset="//images.ctfassets.net/bffxiku554r1/1xIj1XR8rHSadHDMhxWyid/8c0e5d881334839a0e5809c9a8af8eca/Fairtrade_Supplier_Image.jpg?fm=jpg&q=60&fit=thumb&w=618&h=346 1x" type="image/jpeg">
<source srcset="//images.ctfassets.net/bffxiku554r1/1xIj1XR8rHSadHDMhxWyid/8c0e5d881334839a0e5809c9a8af8eca/Fairtrade_Supplier_Image.jpg?fm=jpg&q=60&fit=thumb&w=618&h=346 1x" type="image/jpeg">
<!-- fallback -->
<img src="//images.ctfassets.net/bffxiku554r1/1xIj1XR8rHSadHDMhxWyid/8c0e5d881334839a0e5809c9a8af8eca/Fairtrade_Supplier_Image.jpg?fm=jpg&q=60&fit=thumb&w=618&h=346" width="618" height="346" alt="">
</picture>
</figure>
<div class="coop-c-editorialcard__content">
<header class="coop-c-editorialcard__header">
<p class="coop-c-editorialcard__subtitle">Fairtrade</p>
<h3 class="coop-c-editorialcard__title">
<span>Find out the difference <span class="coop-u-nowrap">Co-op</span> makes as we celebrate 25 years of Fairtrade</span>
</h3>
</header>
<div class="coop-c-editorialcard__body">
<p>Join us in celebrating 25 years of Fairtrade by enjoying products that carry the Fairtrade Mark, or holding your own Fairtrade party.</p>
</div>
</div>
</div>
</a>
</article>