Cards
Card building blocks, add parts to the card to suit your use case.
<a class="c-card | u-max-20" href="#URL">
<div class="c-card__body">
<h3 class="u-heading u-epsilon">Card Title</h3>
<p class="u-lead">Lorem sub title ipsum dolor sit amet.</p>
<p class="u-trunc u-trunc-2 | u-mt-sm">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</a><a class="c-card | u-max-20" href="#URL">
<div class="c-card__head">
<h3 class="u-heading u-epsilon">Card Title</h3>
<p class="u-lead">Lorem sub title ipsum dolor sit amet.</p>
</div>
<div class="c-card__body">
<p class="u-trunc u-trunc-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</a><a class="c-card | u-max-20" href="#URL">
<div class="c-card__head">
<h3 class="u-heading u-epsilon">Card Title</h3>
<p class="u-lead">Lorem sub title ipsum dolor sit amet.</p>
</div>
<div class="c-card__body">
<p class="u-trunc u-trunc-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="c-card__footer">
<p class="u-mb-none">Footer</p>
</div>
</a><a class="c-card | u-max-20" href="#URL">
<div class="c-card__head">
<h3 class="u-heading u-epsilon">Card Title</h3>
<p class="u-lead">Lorem sub title ipsum dolor sit amet.</p>
</div>
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img | o-fit | u-aspect--3x2" srcset="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=320&h=212&q=80, https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=640&h=424&q=80 2x" loading="lazy" width="320" height="212" alt>
</div>
<div class="c-card__body">
<p class="u-trunc u-trunc-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span class="u-hidden">Read More about #card_title</span>
</div>
</a><a class="c-card | u-max-20" href="#URL">
<div class="c-card__head">
<h3 class="u-heading u-epsilon">Card Title</h3>
<p class="u-lead">Lorem sub title ipsum dolor sit amet.</p>
</div>
<div class="c-card__thumb">
<div class="c-card__thumb-logo">
<img class="c-img | o-fit" src="/assets/img/brands/cupra@100.png" loading="lazy" width="32" height="32" alt="Logo Alt">
</div>
<img class="c-card__thumb-img c-img | o-fit | u-aspect--3x2" srcset="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=320&h=212&q=80, https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=640&h=424&q=80 2x" loading="lazy" width="320" height="212" alt>
</div>
<div class="c-card__body">
<p class="u-trunc u-trunc-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span class="u-hidden">Read More about #card_title</span>
</div>
</a><a class="c-card | u-max-20" href="#URL">
<div class="c-card__head">
<h3 class="u-heading u-epsilon">Card Title</h3>
<p class="u-lead">Lorem sub title ipsum dolor sit amet.</p>
</div>
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img | o-fit | u-aspect--3x2" srcset="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=320&h=212&q=80, https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=640&h=424&q=80 2x" loading="lazy" width="320" height="212" alt>
</div>
<div class="c-card__body">
<p class="u-trunc u-trunc-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span class="u-hidden">Read More about #card_title</span>
</div>
<div class="c-card__footer">
<p class="u-mb-none">Footer</p>
</div>
</a>Card Elements
You can use cards with different element tags. The most frequent elements we used range from a div, link or button.
Card Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="c-card | u-max-20">
<div class="c-card__body">
<h3 class="u-heading u-epsilon">Card Title</h3>
<p class="u-trunc u-trunc-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="c-card__footer">
<a class="c-link-bare" href="#URL">Link <span aria-hidden="true">→</span></a>
</div>
</div><a class="c-card | u-max-20" href="#URL">
<div class="c-card__body">
<h3 class="u-heading u-epsilon">Card Title</h3>
<p class="u-trunc u-trunc-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</a><button class="c-card | u-max-20" type="button">
<div class="c-card__body">
<h3 class="u-heading u-epsilon">Card Title</h3>
<p class="u-trunc u-trunc-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</button>Card Examples
Some basic card examples as used across the website.
<a class="c-card | u-max-20" href="#URL">
<div class="c-card__thumb">
<img class="c-card__thumb-img c-img | o-fit | u-aspect--3x2" srcset="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=320&h=212&q=80, https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=640&h=424&q=80 2x" loading="lazy" width="320" height="212" alt>
</div>
<div class="c-card__tags">
<span class="c-badge c-badge--inverted c-badge--blue">News</span>
</div>
<div class="c-card__body | o-flow-sm">
<h3 class="u-heading u-epsilon">
<span class="u-trunc u-trunc-2">Card Title</span>
</h3>
<span class="u-fs-sm">
<svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<defs>
<linearGradient id="a" x1="0%" x2="98.387%" y1="44.444%" y2="55.376%">
<stop offset="0%" stop-color="#FFF" stop-opacity="0"/>
<stop offset="100%" stop-color="#3A82ED"/>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<path fill="url(#a)" d="M2 2h8a2 2 0 0 1 2 2v2H0V4a2 2 0 0 1 2-2Z" transform="translate(2 1)"/>
<path stroke="#00377C" stroke-width="1.5" d="M4.3 3h7.4A2.3 2.3 0 0 1 14 5.3v6.4a2.3 2.3 0 0 1-2.3 2.3H4.3A2.3 2.3 0 0 1 2 11.7V5.3A2.3 2.3 0 0 1 4.3 3Z"/>
<path stroke="#00377C" stroke-linecap="round" stroke-width="1.5" d="M11 3V1M5 3V1"/>
<path stroke="#00377C" stroke-linecap="square" stroke-width="1.5" d="M2 7h12"/>
</g>
</svg>
20<sup>th</sup> April, 2022
</span>
<p class="u-trunc u-trunc-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span class="u-hidden">Read More about #card_title</span>
</div>
</a>Small Thumb
Small singular card thumb link, mostly used for brand lists.
<a class="c-card | u-w-6" href="#URL">
<div class="c-card__thumb">
<img class="c-card__img c-img | o-fit | u-w-100%" src="/assets/img/brands/cupra.png" loading="lazy" width="108" height="108" alt>
</div>
</a>Off Site Card
Show users that the link takes you off-site.
<a class="c-card c-card--offsite | u-max-20" href="#URL">
<svg class="c-icon" viewbox="0 0 16 16" aria-hidden="true">
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14 11.5v1a2 2 0 0 1-2 2H3.5a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2H4m2.5 7.5L14 2m0 5V2H9"/>
</svg>
<div class="c-card__body">
<h3 class="u-heading u-epsilon">Card Title</h3>
<p class="u-trunc u-trunc-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</a>