Components
Card
Cards group content about a single subject. Use the element that matches the content, then add role="region" for the Lumo card treatment and classes for visual variants.
Default
This is card
Read more
<article role="region">
<p>This is card</p>
<hr>
<a href="#" role="button">Read more</a>
</article>Elevated card
This is card with shadow
<article role="region" class="shadow">
<p>This is card with shadow</p>
</article>Card with header and footer
Header of card
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo ipsum enim corrupti soluta delectus similique dolorum perspiciatis ea adipisci hic.
<article role="region">
<header>
<h5>Header of card</h5>
</header>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo ipsum enim corrupti
soluta
delectus similique dolorum perspiciatis ea adipisci hic.</p>
<footer>Footer of card</footer>
</article>Card variations as clickable elements
Header of card
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo ipsum enim corrupti soluta delectus similique dolorum perspiciatis ea adipisci hic.
Pastel card
Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, mollitia.
Elevated card
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, iure?
Light card
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, ducimus?
<a href="#region_card" role="region" style="margin-top: 1rem;">
<h5>Header of card</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo ipsum enim corrupti
soluta
delectus similique dolorum perspiciatis ea adipisci hic.</p>
</a>
<a href="#" role="region" class="variant-pastel" style="margin-top: 1rem;">
<h5>Pastel card</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, mollitia.</p>
</a>
<a href="#" role="region" class="variant-elevated" style="margin-top: 1rem;">
<h5>Elevated card</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, iure?</p>
</a>
<a href="#" role="region" class="variant-subtle" style="margin-top: 1rem;">
<h5>Light card</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, ducimus?</p>
</a>