Card

A card is a visual organization of content. They are best used when you have multiple content items made of the same elements.

This could be something as simple as a bunch of News article content types which all share a publication date, image, and title, or they could have more complex content.

Cards don't contain any semantic meaning on their own. You can choose to implement them as a list if it makes sense to do so.

Note Cards are not implemented in the current CDS yet. This page is incomplete in the interim.

Code

<div class="layout-cards">
<div class="cards">
    <div class="card">
        <!-- Card contents -->
    </div>
</div>