Cards

Cards are used to present discrete pieces of content and are typically used in listings.

<article class="health-card health-card--shadow">
    <div class="wrapper">
        <div class="health-card__image health-card__image--full-width image--link">
            <a href="#">

                <div class="image-outer">
                    <div class="image-placeholder" style="max-width: 800px;">
                        <div style="padding-top: 56.25%;"></div>
                    </div>
                    <div class="image-wrapper image-loading">
                        <div class="image">
                            <img width="800" height="450" data-src="../../images/trex_16x9.jpg">
                        </div>
                    </div>
                </div>

            </a>
        </div>
        <h3 class="health-card__title au-display-md">
            <a href="#">Nemo enim ipsam voluptatem quia voluptas sit aspernatur</a>
        </h3>
        <footer class="metadata metadata--inline">
            20 July 2019
        </footer>
    </div>
</article>