Health Design System

Band: Cards Call To Action 

<div class="health-band health-band--full-width-bg">
    <div class="health-band__container">
        <h2>List of call-to-action cards</h2>
        <div class="row">
            <div class="col-xs-12 col-sm-3">
                <div class="health-card health-card--clickable health-card--shadow ">
                    <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-3">
                <div class="health-card health-card--clickable health-card--shadow ">
                    <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-3">
                <div class="health-card health-card--clickable health-card--shadow ">
                    <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-3">
                <div class="health-card health-card--clickable health-card--shadow ">
                    <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>
</div>

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.