Health Design System

Band: Cards Resources

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">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <h2>Latest resources</h2>
            </div>
        </div>
        <div class="row">
            <ul class="health-card-list">
                <li class="col-sm-6">
                    <div class="health-card health-card--resource">
                        <div class="row">
                            <div class="col-xs-3">
                                <div class="image--border image--link">
                                    <a href="#">
          <img src="../../images/real_tall.jpg">
        </a>
                                </div>
                            </div>
                            <div class="col-xs-9">
                                <h3 class="au-display-md">
                                    <a href="#">Dinosaur factsheet</a>
                                </h3>
                                <div class="metadata metadata--inline au-display-sm--text">
                                    <div class="health-field__item">20 July 2019</div>
                                    <div class="health-field__item">Publication</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="col-sm-6">
                    <div class="health-card health-card--resource">
                        <div class="row">
                            <div class="col-xs-3">
                                <div class="image--border image--link">
                                    <a href="#">
          <img src="../../images/real_tall.jpg">
        </a>
                                </div>
                            </div>
                            <div class="col-xs-9">
                                <h3 class="au-display-md">
                                    <a href="#">Dinosaur factsheet</a>
                                </h3>
                                <div class="metadata metadata--inline au-display-sm--text">
                                    <div class="health-field__item">20 July 2019</div>
                                    <div class="health-field__item">Publication</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="col-sm-6">
                    <div class="health-card health-card--resource">
                        <div class="row">
                            <div class="col-xs-3">
                                <div class="image--border image--link">
                                    <a href="#">
          <img src="../../images/real_tall.jpg">
        </a>
                                </div>
                            </div>
                            <div class="col-xs-9">
                                <h3 class="au-display-md">
                                    <a href="#">Dinosaur factsheet</a>
                                </h3>
                                <div class="metadata metadata--inline au-display-sm--text">
                                    <div class="health-field__item">20 July 2019</div>
                                    <div class="health-field__item">Publication</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="col-sm-6">
                    <div class="health-card health-card--resource">
                        <div class="row">
                            <div class="col-xs-3">
                                <div class="image--border image--link">
                                    <a href="#">
          <img src="../../images/real_tall.jpg">
        </a>
                                </div>
                            </div>
                            <div class="col-xs-9">
                                <h3 class="au-display-md">
                                    <a href="#">Dinosaur factsheet</a>
                                </h3>
                                <div class="metadata metadata--inline au-display-sm--text">
                                    <div class="health-field__item">20 July 2019</div>
                                    <div class="health-field__item">Publication</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="row standard-gap">
            <div class="col-xs-12 text--align-right">
                <a href="#" class="au-cta-link">View more resources</a>
            </div>
        </div>
    </div>
</div>