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--full-width-bg health-band--neutral">
    <div class="health-band__container">
        <div class="row">
            <div class="col-xs-12 col-sm-4">
                <div class="health-card health-card--clickable health-card--shadow ">
                    <div class="health-card__image">
                        <img src="https://picsum.photos/800/450" />
                    </div>
                    <div class="health-card__body">
                        <h2 class="health-card__title">
                            <a class="health-card__link" href="#">Nemo enim ipsam voluptatem quia voluptas sit aspernatur</a>
                        </h2>
                        <div class="health-card__text">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                        </div>
                        <div class="health-card__date">20 July 2019</div>
                        <div class="health-card__tag">News</div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-4">
                <div class="health-card health-card--clickable health-card--shadow ">
                    <div class="health-card__image">
                        <img src="https://picsum.photos/800/450" />
                    </div>
                    <div class="health-card__body">
                        <h2 class="health-card__title">
                            <a class="health-card__link" href="#">Nemo enim ipsam voluptatem quia voluptas sit aspernatur</a>
                        </h2>
                        <div class="health-card__text">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                        </div>
                        <div class="health-card__date">20 July 2019</div>
                        <div class="health-card__tag">News</div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-4">
                <div class="health-card health-card--clickable health-card--shadow ">
                    <div class="health-card__image">
                        <img src="https://picsum.photos/800/450" />
                    </div>
                    <div class="health-card__body">
                        <h2 class="health-card__title">
                            <a class="health-card__link" href="#">Nemo enim ipsam voluptatem quia voluptas sit aspernatur</a>
                        </h2>
                        <div class="health-card__text">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                        </div>
                        <div class="health-card__date">20 July 2019</div>
                        <div class="health-card__tag">News</div>
                    </div>
                </div>
            </div>
        </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>