Health Design System

Band: Cards Image

Bands

Group components on full width landing pages

Landing pages are made up of several bands that provide a snapshot into further information. For example a Latest news band with the latest 3 news items.

<div class="health-band health-band--neutral-1">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <h2>Latest news</h2>
            </div>
        </div>
        <div class="row">
            <ul class="health-card-list">
                <li class="col-sm-4">
                    <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>

                </li>
                <li class="col-sm-4">
                    <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>

                </li>
                <li class="col-sm-4">
                    <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>

                </li>
            </ul>
        </div>
        <div class="row standard-gap">
            <div class="col-xs-12 text--align-right">
                <a href="#" class="au-cta-link">All news</a>
            </div>
        </div>
    </div>
</div>